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

instagram-bug-cause-tw-autolink-thumbnail

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

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

「便利だなー」と使っていたのですが、ある時ふと貼り付けた写真を見てみたところ、エラーで写真が表示されなくなっていました。

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

原因を疑ったもの

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

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

ロリポップサーバーが重すぎる

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

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

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

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

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

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

サーバーを変更すると、テーマは一旦「Twenty Fifteen」に戻ります。
そのときは、Instagramの写真が問題なく表示されていました。

山川
やっぱりロリポップが原因か!

一件落着と思えたのですが、テーマをSTINGERに戻し、プラグインも全て有効化したところでInstagramの写真がまた消えてしまいました。
ロリポップが原因ではなかったのです。

山川
ペパボさんごめんなさい……

何かのプラグインが干渉している

プラグインを入れたことで、上記のコードに干渉しているのではないかと考え、一度全てストップしてみました。

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

STINGERがそもそも対応していない

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

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

山川
原因、子テーマじゃん!!!

ここで気づきました。

親テーマで表示されるということは子テーマに原因があるということです。

「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" );

私はPHPの知識はあまりないため、どの記述が干渉しているのかまではわかりません。

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

試しに自動リンクのコードは削除したところ、以下のように問題なくInstagramの埋め込み写真が表示されるようになりました。

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

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

とても便利なコードなのですが、仕方ないですね。
とりあえず、Twitterのアットマークリンクは毎回手入力で入れることにします。

もし、インスタの埋め込みに引っかからない自動リンクの記述方法をご存知の方がいらっしゃいましたら教えてください。

WordPressのカスタマイズ本

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

Twitterで

コメントを残す

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

内容をご確認の上、送信してください。

日本語が含まれない投稿は無視されます。(スパム対策)