新年明けました。
今年は滅茶苦茶ブログを頑張ろうと、三が日からコツコツ作業をしています。
そんな中、ページの表示速度を上げる作業もしてたんです。
色々調べながらPage speed Insightでテストして・・・ってやってて。
携帯スコア94とかとんでもないところまで行けたので、とりあえずオッケー！って思ってたら。
ブログにアップロードしていた画像が全て表示されなくなってしまいました。
で、いくら検索しても原因が分からない。
「Wordpress 画像 表示されない」で50件ぐらい見てたんだけど上手くいかず。
二時間近く格闘してようやく解決したのでここにメモとして残しておきます。他にもこれでやらかした人がいるかもしれないからね。
結論だけ言います。
原因は、テーマ「Cocoon」に標準装備されている機能でした。驚愕！
CSS縮小化には手を触れちゃ駄目だ！
そんなお話です。
状況を振り返る
画像の高速化をあれこれしていた
まずもって疑ったのは、高速化にまつわるプラグインですよね。調べてもそう出てくるし。
しかも一番最後にやった作業が、全画像のリサイズをするプラグインの導入だったんです。
サムネが変なサイズになったりしていたので、それのリサイズがてらというところ。
なので真っ先に疑ったのはそこでした。ただリサイズしちゃった物はどうしようもないのも事実。
そこで確認するために、新たな画像をアップロードして記事に挿入してみたんです。
そしたらこれも表示されない。
この時点で、画像のリサイズは関係ないことが判明しました。
画像のファイル名を確認する
この確認と並行して行っていたのが、画像のファイル名およびURLの確認。
記事編集画面からHTML編集の状態で画像挿入部分を確認し、そこに記載されたURLをチェック。
コピーしてアドレスバーに貼ると画像のみのページに直行しました。これによってファイル名のミスもなし。
まあ新しい画像が表示されない時点でそれも確定していたんですけどね。
Lazy Load機能を止めてみる
次に試したのが、画像読み込み遅延系。
Jetpackを筆頭として、この機能はいろんなプラグインにあります。なのでこれを一つずつ止めてテスト。
けれどもこれでも画像は表示されない。
正直、割とここで詰んだかと思いました。
有料の相談サービスを探すぐらいには諦めてた。
Cocoonの機能を止めてみる
で、ここで思い出したんです。
「あれ？そういえばCocoonの高速化設定を試してみてたな？」
ということで止めてみることに。
この部分です。
この部分のチェックを全部外したら！復活！！！！
細かいところを探る
じゃあどれかが悪さをしてるなと、一つずつチェックして更新を繰り返しました。
結果、冒頭にも書きましたが、
CSS縮小化でした。
CSSが分からねえが直ったのでヨシ！
正直な話、CSSの役割はよく分かっていません。
縮小化するときになんらかの干渉があって画像を参照できなくなったんだなってだけの理解です。
それでも、
今日も一日 pic.twitter.com/7LZouEVeUh
— 現場猫bot (@genbaneko_bot) March 25, 2020
とまあ直ったんでヨシ！ですね。
Cocoonの設定が罠という怖さ
こういうエラーの時って、やっぱりプラグインから疑うと思うんですよ。
外部から引っ張ってきている物だし。
なので原因が標準で搭載されているCocoonの設定だと辿り着くのにとても時間がかかりました。
もちろんプラグインが原因で、この設定に影響が出てる可能性もあるわけですが。
ひとまず解決したので、Wordpressに画像が表示されなくなった、Cocoonを使っている！って人は試してみてください。これで直るとは限りませんが、私の場合は直りました。
各カテゴリページの一覧、および簡単な説明(手動作成サイトマップ)はこちらから！
全記事が見れるサイトマップはこちらからどうぞ！
サイトマップ、全記事こちらから。お好きな記事をお読みください。
コメント