話は少々長いですが、自分自身の備忘録も兼ねていますのでご容赦ください。結論だけお知りになりたい方は「プラグイン「Autoptimize」を外す」をご覧ください。
お客様からのご要望でトップページに「Facebook」の埋め込みもして欲しいとの要望がありましたので、通常の手順を踏み、「ページプラグイン」を使用して貼り付けました。
ところが貼り付けた途端、トップページの表示が重くなり、ページ自体は表示されるものの、埋め込んだはずの「Facebook」だけは「引用」の状態で文字リンク表示だけが現れ、ブラウザのタブの読み込み表示はぐるぐると回ったまま…
このように引用表示のまま
このように「Facebook」の「ページプラグイン」がうまく表示されない場合、まず真っ先に疑うのは
1. コードの貼り付け方（または貼り付ける位置）
2. 貼り付けるFacebookページの公開範囲
3. 個人のFacebookを貼り付けようとしている
等ですが、もちろんこんな理由でないことはすでに承知です。
しかし検索しても殆どの場合は上記ような理由のものしかでてきませんでした。
そんなにレアな現象なのだろうか？
実はそのホームページはWordpressの「アフィンガー5」テーマで制作しているのですが、同じ「Facebookページ」を別サイトにも貼り付けていたのですが、ちゃんと表示されていました。そちらは別のテーマを使用していたので、アフィンガー5との相性を疑いました。
プラグインとの相性を疑ってみる
しかし、いろいろあれこれ調べたりいじくっているうちにプラグインとの相性を疑い始め、その結果、トップページで使用している、スライダー「Meta Slider」を外すとあら不思議。ちゃんと問題なく表示されるではないですか。これが原因なのか？？
アフィンガーにはテーマ独自にトップページのスライダー機能があります。なので、そちらを使用すればなにも「Meta Slider」を使用しなくても良いのですが、各画像にリンクを貼って飛ばすことが出来ない。そのためどうしても「Meta Slider」のようなプラグインが必要でした。
そこで他のスライダープラグインを試したのですが、やはり同じような症状になり、これは単にプラグインとの相性ということではなさそうだという結論にいたりました。考えてみれば先に書いたように、このサイトとは別のサイトでも同じ「Facebookページ」を貼り付けていますがそちらも「Meta Slider」を使用しているのです。
いずれにせよこれは根本的な解決とは言えません。
JavaScript が正常に読み込めていないのか？
そこで疑ったのがJavaScriptです。
実はFacebookとは違いますがこんな記事をみつけました。
ここではTwitter の埋め込みについての記事が記載されていますが、
「正常表示されず引用表示となってしまうのです。」
というところは症状が一緒です。
ページの読み込み時点でFacebookの貼り込み部分だけが表示されずに、読み込み状態がいつまでもグルグルと回ったままというのは、まさに「Javascript が正常に読み込めていない」のではないだろうか。
疑ったのは、プラグイン「Autoptimize」
そこでふと浮かび上がった容疑者が「Autoptimize」。これはJavaScriptファイルをはじめ画像やCSS・HTML簡単に最適化して、サイトのページ表示速度を上げるプラグインとしてポピュラーです。
その設定画面を見直してみました。
すると「JavaScript」オプションの設定項目に「try-cashで囲む」なるものを見つけました。
try catchとは実行中に例外が発生した際に、処理を中断せずにその例外をキャッチし、特定の処理をさせることができる構文のことです。
試しにここにチェックを入れてみました。
すると、なんということでしょう～。無事「Facebook」が表示されたではありませんか～♪
やれやれようやく問題解決！！ …したはずでした。
今度はなぜか別のページの特定の場所に貼られた画像が出ない!?
はい。見出しの通りです。今度は別のページのある特定の場所の画像だけが表示されず、そのページが読み込み状態のままになるという珍現象が…
画像を差し替えても同じ。何打この現象は？
そしてまたトップページの「Facebook」も表示されなくなり、問題の箇所から画像を外すと「Facebook」がちゃんと読み込まれるようになるという状態に陥ったのです。
プラグイン「Autoptimize」を外す
そもそも「Autoptimize」はJavaScript・CSS・HTMLなど「コードの縮小」を行なう反面、
- WordPressのテーマによって、相性が悪いという問題が起こる可能性がある
- レイアウトが崩れる可能性がある
- スクリプトが動作しなくなる可能性がある
などが使用のデメリットとして良く言われているところです。
そこで試しに「Autoptimize」を外してみたところ…
はい。今度こそ問題が解決いたしました。埋め込んだ「Facebook」はもちろん、他ページの問題の場所の画像も表示されました。
現状ではこのホームページが差ほどストレスを感じるほど、重いわけでもないので、ひとまずこれで解決としました。
長いこと書きましたが、結論として、もし同じような問題で頭を抱えてる方がいらっしゃいましたら、「Autoptimize」を使用していないか確認し、使用しているようならそれを疑ってみてください。もし使用していない場合は、他のプラグインの相性などを検証してみると良いかと思います。
