整体師がWordPressテーマ作りました

Healerは、スマホ&タブレット対応・SEO対策済みの整体院・サロン専用テーマです。

お客様の声やWeb予約カレンダー表示機能など便利機能が搭載されています。

公式サイト

WordPressでInstagramの埋め込みが表示されない原因はこれだった!

instagram-bug-cause-tw-autolink-thumbnail

最近一眼レフカメラを始め、インスタ熱が再燃してきました。

インスタの写真は、埋め込みタグを使ってブログに貼り付けることができます。
容量を圧迫することなく、綺麗な写真をそのまま掲載できるのはいいですよね。

ところがあるとき、ふと貼り付けた写真を見てみたところエラーで写真が表示されなくなっていました。

原因はすでに特定していて、「Twitterの自動リンクを作る」のコードだったのですが、これに気づくまでだいぶ時間を要しましたので備忘録とします。

埋め込み写真が表示されない原因として疑ったもの

原因として疑ったのが以下の3点です。

  • ロリポップサーバーが重すぎる
  • 何かのプラグインが干渉している
  • STINGERがそもそも対応していない

予想1.ロリポップサーバーが重すぎる

ブログを開設当初、サーバーは「ロリポップ!」から始めました。

価格が安価で容量も十分ということで特に不満はなかったのですが、最近になって夜間帯に303エラーが頻発するようになりました。

本業のホームページでは、Web予約の受付をホームページからできるようにしているため、夜間帯につながらなくなると仕事に支障が出ます。

そういうこともあり、高速サーバーとしてブロガーさんにも人気のある「エックスサーバー」へと乗り換えました。

実際にサーバー移転したときの記事はこちらです。

moving-from-lolipop-to-xserver-thumbnail
WordPressブログをロリポップからエックスサーバーに移行したので、そのときの全工程を備忘録として残したいと思います。 正直不安は

サーバーを変更すると、WordPressはデフォルトのテーマに戻ります。
そのときは、写真が問題なく表示されていました。

やまかわ
やっぱりロリポップが原因か!

一件落着と思えたのですが、テーマとプラグインを全て有効化したところでインスタの写真はまた表示されなくなりました。

やまかわ
ロリポップが原因ではありませんでした。ペパボさんごめんなさい……

予想2.何かのプラグインが干渉している

埋め込みタグのコードに、入れているプラグインが干渉しているのではないかと一度全てストップしてみました。

結果として直らなかったので、原因はプラグインでもありませんでした。

予想3.STINGERがそもそも対応していない

埋め込み写真が表示されなくなったとき、使用していたWordPressテーマはSTINGER7でした。

子テーマをカスタマイズして運営していたのですが、これを親テーマに変えてみると埋め込み写真が表示されたのです。

やまかわ
原因、子テーマじゃん!!!

ここで気づきました。
親テーマで表示されるということは子テーマに原因があるということです。

「Twitterの自動リンクを作る」のコードが原因だった

WordPressでは、functions.phpにコードを追加することでさまざまな便利な機能を使えるようになります。

その中のひとつとして、記事内に@(Twitterのアカウント名)と記述することで、aタグを付けずとも自動でリンクに変換してくれるというとても有名で便利なコードがあります。

コードは以下のようなものです。

//アットマークでTwitterの自動リンクを作る
function add_twitter_link($content) {
    $pattern= '/(?<=^|(?<=[^a-zA-Z0-9-_\.]))@([A-Za-z]+[A-Za-z0-9_]+)/i';
    $replace= '@<a href="http://www.twitter.com/$1" target="_blank">$1</a>';
    $content= preg_replace($pattern, $replace, $content);
    return $content;
}
add_filter( "the_content", "add_twitter_link" );

インスタの埋め込みコードには「○○さん(@Instagramのアカウント名)が投稿した写真」というような記述が含まれています。
もしかすると、このアットマークがTwitterと誤認識している可能性が無きにしも非ずです。

試しに上記の自動リンクのコードをfunctions.phpから削除したところ、以下のように問題なく表示されました。

*** 我が家の梅の木は今こんな感じです^_^ #canon #x7i #sigma #30mm #art #梅 #plum #blue #sky #青空

Lognoteさん(@lognotebiz)が投稿した写真 –

テーマによっては、最初からこのコードが使われているものもあります。
もし同じような症状になった方は疑ってみてください。

instagram-bug-cause-tw-autolink-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

Gravatarに登録すると、お好きな画像をアバターに設定できます。