Lognote

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

instagram-bug-cause-tw-autolink-thumbnail

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

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

Pocket

最近一眼レフカメラを始め、撮った写真を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の最新ニュース情報を、
いいねしてチェックしてください!

関連記事

CSSでオリジナルのFeedly購読ボタンを作成する方法

皆さんはブログにFeedlyボタンは設置していますか?リピーターを増やすには必須のサービスですが、公式...

custom-post-category-thumbnail

WordPressで通常の投稿かカスタム投稿か判断してカテゴリー名を表示する方法

普段使い慣れないカスタム投稿タイプを使ったところ、普通のカスタマイズと勝手が違い四苦八苦しております。 今回は …

advanced-code-editor-thumbnail

テーマ編集で行数を表示するWordPressプラグイン「Advanced Code Editor」

WordPress内でテーマを編集するとき行数表示がなくて不便だなと感じることはないでしょうか。今日はそんな悩 …

wordpress-comment-voice-thumbnail

動画も可!WordPressのコメント機能を使った口コミ掲載方法

整体院サイトをリニューアルする中で、「お客様の声」を掲載するための専用ページをどのようにするか迷...

mb-substr-wordpress-thumbnail

WordPressの抜粋表示には「mb_substr」ではなく「the_excerpt」を使った方がいい理由

最近、SEO的に画像にaltとキャプションを入れるのも無視はできないという記事を読み、わたしも実践するようにな …

コメントを入力

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

トラックバック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
子テーマにコピーするの所がわかりにくい