wordpressはブログを運営する上で使いやすく、カスタマイズを自由自在にできるため必要不可欠なCMSです。プラグインを導入することにより、プログラミングがわからなくともある程度のサイトの速度アップや、デザインやエフェクトなどの効果を適用することも可能です。しかし、複数のプラグインを使ったり、テーマのカスタマイズをしているうちに各々のスクリプト（javascriptやphp）が競合し、思い通りに動かないことが多々あります。今回私の場合は、ブログ上の画像が表示されない（リンクが切れてしまう）といったトラブルが発生してしまいました。なんとか、解決に至ったのでその方法を忘備録として残しておきます。
画像が表示されない
先日より、画像が表示されない（リンクが壊れた画像になってしまう）というトラブルが発生していました。放っておけば勝手に直ったりもしていたため、サーバの一時的な不具合だろうとあまり気にしていませんでしたが、昨日トップ画面のほとんどの画像が表示されないという現象が発生し、原因解明を試みることにしました。
原因調査
プラグインの競合の可能性
冒頭でも記載しましたが、プラグインは非常に簡単に適用できるため、どんどん追加してしまいがちです。しかし、似たようなプラグインをいくつも使っていると競合してしまう可能性があります。プラグインどうしはお互いの干渉について考えて作られていないからです。作者が違うので当たり前といえば当たり前ですが、この点を注意して導入しなければ、いつか画像どころかwebページ自体表示されなくなってしまう可能性もあります。以下に、競合の可能性があるプラグイン（画像関連）をピックアップしておきました。問題が発生した場合、一旦プラグインを全て停止して直るかどうか試したほうが良いです。
- EWWW Image Optimizer — 画像のファイルサイズを圧縮
- Head Cleaner — CSSとJavascriptの読み込みを最適化
- Lazy Load — ページを表示してから画像を表示する
- W3 Total Cache — キャッシュやサーバの設定
- Jet Pack — wordpress運用に必要な機能がまとまったプラグイン
これらのプラグインは画像表示の高速化を簡単に行うことのできる最高のプラグインではありますが、使い方を間違うと画像自体表示されなくなってしまうため、以下のように詳しく設定方法が解説されているサイトを参考に設定しましょう。私の場合はテーマのSimplicityに含まれるLazy Loadのみ適用していたので、このプラグインを停止してみましたが、状況は改善されなかったのでプラグインの影響の可能性はなさそうでした。
画像名に問題がある可能性
画像名に日本語が含まれていると、文字化けによりファイルパスがおかしくなったり画像に影響するプラグインで不具合が発生する可能性があるようです。私もいくつかの画像でファイル名が日本語を使用していました。今回不具合を起こしていた画像名は英語だったため、原因ではなさそうでしたが、今後のために日本語ファイル名のものは全て英語に変更した方が良さそうです。以下サイトにファイルリネームのプラグインが紹介されていました。
サーバ設定の可能性
サーバについては少し専門的な話になるのですが、.htaccess（サーバの設定を記載するファイル）やphp.ini（PHPプログラムの全体的な動作や環境を設定するファイル）の記載が間違っているとうまくwebページが表示されないといった不具合が発生する可能性があります。以下、サイトを参考にこれらのファイルの記載方法が間違っていないか確認しましょう。
私はサーバとしてエックスサーバのWPXを使用しているのですが、コマンドラインでサーバの操作をしなくても、ボタン一つで.htaccessやphp.iniの設定が可能なため直接ファイルの書き換えを行う必要がなくコピペミスや間違えてファイルを消してしまうリスクが少なくおすすめです。ただ、簡単だからといって良さそうな設定を全てオンにすると、思わぬ不具合が生じてしまいます。今回の不具合もこのWPXの設定によって生じたものでした。詳細は下記の解決方法で説明します。
解決方法
上記の調査結果を元に自分のケースを当てはめ、自分が解決に至った過程をまとめました。
Google Chromeのconsoleでエラー原因を確認
画像が表示されないというのは、何かしらwebページにエラーが出ているということなので、それを確認するのが解決への一番の近道です。Google Chromeにはwebページのバグを発見するデバッガが標準で使えるのをご存知でしょうか。まず、Google Chromeでデバックしたいページを表示し、メニューの「表示 > 開発/管理 > デベロッパーツール」をクリックしましょう（command(ctl) + option(alt) + i のショートカットなら一発で表示できます）。表示された画面の「console」でエラーを確認しましょう。おそらく画像に関するエラーが表示されているはずです。
画像のリンク切れの原因を探る
エラー原因はどうやら画像がリンク切れになっているのが問題のようでした。リンク切れの画像のパスを別画面の表示すると「.pagespeed~.webp」と見慣れない拡張子がついていました。
webで「.pagespeed~.webp」を検索すると、mod_pagespeedがサーバに設定されていると自動で画像のリサイズが行われて、リサイズされたパスに飛ばされる仕組みのようです。以前、私が使用しているWPXで「Webサイトのコンテンツを最適化し、表示速度の向上および転送量の軽減を図ります。」の記載に踊らされ設定をONにしたのを思い出しました。mod_pagespeed自体はGoogleが開発した、まともな設定のようですが、不具合の情報もいくつか報告があったため、素人は安易に導入しないほうが安全かもしれません。
WPXの設定でmod_pagespeedをoffに
WPXの方で、「サーバ設定 > mod_pagespeed設定」をoffに設定すると、全ての画像が無事表示され。それ以後、表示されないといった現象は解消されました。
まとめ
WordPressやWPXなどのサービスを使えばプラグインやサーバの機能で簡単にカスタマイズやメンテナンスを行うことができます。しかし、便利な機能を提供できるということはそれなりに複雑なプログラムが組まれているわけで、安易に導入しないほうが安全です。サーバやプログラムの知識を磨き、その機能が他の機能に及ぼす影響を知った上で効果的に活用していきましょう。
コメント
このブログ記事を載せていただき本当にに助かりました。
私の場合は
AMPのアナリティクスで画像のサイズがサイトの表示スピードを落としていると出たので、色々消したり設定を変えている間に
AMPのtemplates mode というのをreader からスタンダードへ変えていました その設定を変えた事を あなたの ブログで思い出し、無事画像が表示あれ、ツイッターのカードリンクも貼れるようになりました。ほんとうにありがとうございました。
わざわざコメントありがとうございます！ お役に立ててよかったです。
私も作業をしていてハマってしまうことが多々あるので、
引き続き何か有益な共有事項があれば、ブログに載せていこうと思います。