タップできるもくじ
WordPressでスライドショーが表示されない原因は「レンダリングをブロックするJavaScriptの排除」だった（私の場合）
WordPressでスライドショーを表示しようとしたところ、なぜか「一部のブラウザのみ表示されない」という事象に見舞われました。
原因究明の経緯を備忘として記事にします。
記事を書いた人
元営業という経歴を活かしながら、金融・製造・流通業のお客様を中心にAI活用コンサルや定着支援・人材育成の支援をしたり、講演や執筆活動など幅広く活動しています。
ヤエリ（@yaesuri_man）
AI・機械学習・データサイエンス領域、サラリーマンハック、こだわりのガジェットなどを中心に記事を執筆しています。
結論
原因は「レンダリングブロックJavaScriptの排除」でした
WordPressでスライドショーが表示されない 現象
私の環境は以下です。
- WordPress4.9.8
- AFFINGER5 WING
当ブログのトップページに、以下のようなスライドショーを表示させようとカスタマイズ。
Chromeでは問題ありませんが、一部のブラウザやtwitterプロフィールのリンクから飛んだ時、スライドショーが表示されない事に気づきました。
| デバイス | ブラウザ | スライドショー表示 |
|---|---|---|
| PC | Chrome | 〇 |
| PC | Edge | 〇 |
| スマホ（iPhone） | Chrome | 〇 |
| スマホ（iPhone） | Safari | × |
| スマホ（iPhone） | twitterアプリ内リンクから | × |
なぜか、スマホのSafariとtwitterアプリ内のリンクから開いたときのみ、スライドショーが表示されないのです。
こちらの原因究明と対策を行いました
原因究明①プラグインの特定
「プラグインの競合が原因ではないか」というweb検索結果があり、プラグインを調べることに。
やり方はかなり地道ですが、以下です。
使用しているプラグインの記録
WordPress左側のメニュー内「プラグイン」→「インストール済みプラグイン」を開き、現在の設定を記録しておきます。
ページ内を右クリックして「印刷（P）」から、出力先をプリンタではなくPDFにすれば、PDFファイルとして保存できます。
全プラグインの使用停止
「プラグイン」一覧のチェックボックスにチェックを入れれば、全てのプラグインが選択されます。
その状態で「一括操作」→「停止」→「適用」です。
私の場合、全てのプラグインを停止した状態ではスライドショーが表示されました。
これで、原因はいずれかのプラグインにあることが分かりました。
プラグインを一つずつ有効にする
次に、原因となっているプラグインの特定です。
保存しておいたPDFと見比べながら、
- プラグインを1つ有効にする
- キャッシュを削除する
- ブラウザで該当ページを開き、確認する
を１つずつ、地道に繰り返していきます。
全てのプラグインでこれを試したところ、原因は有料プラグインの
- WP Faster Cache Premium
にあることが分かりました。
原因究明②設定の特定
原因となるプラグインが分かりましたら、あとは原因となる設定の特定です。
ここでもプラグイン特定とやることは同じ。
一旦全ての設定を無効にし、ひとつずつ設定をオンにし、ブラウザで表示を確認していきます。
原因はWP Faster Cache Premiumの「Render Blocking Js（レンダリングをブロックする JavaScript を除去してください）」
上記を地道に試していったところ、以下設定にたどり着きました。
「Render Blocking Js（レンダリングをブロックする JavaScript を除去してください）」
こちらの、
- チェックボックスをオンにすると、スライドショーが表示されない
- チェックボックスをオフにすると、スライドショーが表示される
のです。
サイト表示スピードを改善するためにJavaScriptをoffにすると、それを利用してスライドショーを表示させている一部のブラウザが影響を受ける、ということでしょうか。
こちらにチェックボックスを入れた時とそうでない時のサイトスピードをチェック。
私の場合はそれほどスピードに変化がなかったため、このチェックは外してしまい、スライドショー表示を取りました。
WordPressでスライドショーが表示されない原因は「レンダリングをブロックするJavaScriptの排除」だった（私の場合） まとめ
以上、私の環境の場合、一部ブラウザでスライドショーが表示されなかった原因は「レンダリングをブロックするJavaScriptの排除」でした。
私と同じようにスライドショーが表示されない人の参考になれば幸いです。
その他、ブログ運営関連の記事のまとめはこちら。
-
-
ブログ運営関連の記事まとめ
続きを見る