Lognote

ネット集客に強い整体院サイトを制作

instagram-bug-cause-tw-autolink-thumbnail

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

公開日:2016-04-03
最終更新日:

最近一眼レフカメラを始め、撮った写真をInstagramへアップすることが増えました。

Instagramにアップした写真は、埋め込みタグを使って簡単にブログに貼り付けることができ、「便利だなー」と私も結構使っていたのですが……

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

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

原因を疑ったもの

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

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

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

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

価格が安価なのと本業のホームページで使っていて特に不満がなかったからです。

ですが、最近になって22時以降の夜間帯に303エラーが頻発するようになりました。

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

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

サーバーをエックスサーバーに変えた直後、テーマはデフォルトで「Twenty Fifteen」になっています。

そのときは、Instagramの写真が問題なく表示されていました。

ヤマカワ
やっぱりロリポップが原因か!

一件落着と思えたのですが、以前の子テーマに戻し、プラグインも全て有効化したところで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)が投稿した写真 –

とても便利なコードなのでできれば使いたいのですが、InstagramとTwitterどちらを取るかですよね。

もし、自動リンクも使えるような記述方法をご存知の方がいらっしゃいましたら教えていただけますと幸いです。

以上、「WordPressでInstagramの埋め込みが表示されない原因はこれだった!」という記事をお届けしました。

-WordPress
-

この記事のタイトルとURLをコピーする

オススメ商品はこちら!

WordPressでInstagramの埋め込みが表示されない原因はこれだった!
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

cannot-modify-header-information-thumbnail

WordPressで”Cannot modify header information”の警告が出たときの解決方法

WordPressで"Cannot modify header information"の警告が出たときの解決方法を紹介します。

custom-field-ranking-thumbnail

WordPressのカスタムフィールドを使って商品ランキングを表示する方法

アフィリエイターの間では言わずと知れた人気WordPressテーマ「AFFINGER4」 AFFINGER4で …

comment-coupon-thumbnail

整体院の口コミ促進!コメントをくれた方に電子クーポンを配る方法

先日、WordPressの標準コメント機能を使って、お客様の声を掲載する方法を紹介しました。今回はそのおま...

views-display-thumbnail

WordPressで記事ごとに閲覧回数を表示する方法

「自分のブログもそこそこ読まれるようになってきたなー」 そんなとき、どれくらい読まれているのか訪問者に見せたく …

iphone-icon-black-thumbnail

WordPressでiPhone用アイコンの透過部分が黒くなる問題を疑似的に解決する方法

WordPressは、カスタマイズからサイトアイコンを簡単に設定できますが、iPhone用アイコンだと透過部分 …

コメントを入力

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

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい