WordPressでInstagramの埋め込みが表示されない原因はこれだった！
最近一眼レフカメラを始め、インスタ熱が再燃してきました。
インスタの写真は、埋め込みタグを使ってブログに貼り付けることができます。
容量を圧迫することなく、綺麗な写真をそのまま掲載できるのはいいですよね。
ところがあるとき、ふと貼り付けた写真を見てみたところエラーで写真が表示されなくなっていました。
原因はすでに特定していて、「Twitterの自動リンクを作る」のコードだったのですが、これに気づくまでだいぶ時間を要しましたので備忘録とします。
埋め込み写真が表示されない原因として疑ったもの
原因として疑ったのが以下の３点です。
- ロリポップサーバーが重すぎる
- 何かのプラグインが干渉している
- STINGERがそもそも対応していない
予想１．ロリポップサーバーが重すぎる
ブログを開設当初、サーバーは「ロリポップ！」から始めました。
価格が安価で容量も十分ということで特に不満はなかったのですが、最近になって夜間帯に303エラーが頻発するようになりました。
やっぱりロリポップ重い。重すぎて埋め込んだインスタがいつまで経っても表示されない。
— Lognote (@Lognotebiz) 2016年3月27日
本業のホームページでは、Web予約の受付をホームページからできるようにしているため、夜間帯につながらなくなると仕事に支障が出ます。
そういうこともあり、高速サーバーとしてブロガーさんにも人気のある「エックスサーバー」へと乗り換えました。
xサーバー契約しました。引っ越したらロリポップとはさようならです。
— Lognote (@Lognotebiz) 2016年3月30日
実際にサーバー移転したときの記事はこちらです。
サーバーを変更すると、WordPressはデフォルトのテーマに戻ります。
そのときは、写真が問題なく表示されていました。
やまかわ一件落着と思えたのですが、テーマとプラグインを全て有効化したところでインスタの写真はまた表示されなくなりました。
やまかわ予想２．何かのプラグインが干渉している
埋め込みタグのコードに、入れているプラグインが干渉しているのではないかと一度全てストップしてみました。
結果として直らなかったので、原因はプラグインでもありませんでした。
予想３．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から削除したところ、以下のように問題なく表示されました。
テーマによっては、最初からこのコードが使われているものもあります。
もし同じような症状になった方は疑ってみてください。
