テーマ「Cocoon」には「AMP機能を有効化」する機能がついています。
しかしこちらの機能で有効化してところ、画像が上下に重複して表示されるバグが発生してしまいました。
こういった感じですね。
2重、物によっては3重に表示されています・・・。
何個表示すんねん・・・と思わざるをえません。。。
記事によっては画像により吐き気をもよおすレベルです。。。
ググっても解決策が出てこなかったので・・・
もう「Cocoon」のテーマ作ってるところで相談しちゃえっ！！
ということで
はい、このようにですね、掲示板に書き込んで助けてもらいました😂
画像が重複する原因
「Lazy Load 機能」が原因でした。
WordPressを使用していると「プラグイン」を幾つか入れることになると思います。
もちろん僕もその1人です。
僕は画像を圧縮する為に
「Smush」
というプラグインを使用しています。
アタシにまかせな！圧縮してあげるよっ！！！
と言い出しそうなキャラクターですね。
何とこちらに「Lazy Load 機能」がついていました。
「Cocoon」本体には「高速化」の欄に
「Lazy Loadを有効にする」
という項目があります。
お分かりですか？
つまりのところ
「Coccon」側と
「Smush」側で2度表示されていた為
2重に表示されていたんですね。
尚「Cocoon」側のチェックを外しても直らなかったので、外すなら追加のプラグインの方が確実です。
Lazy Loadとは
さっきから当たり前のように言ってる「Lazy Load」って何ですか？
説明が遅れましたすみません💦
「Lazy Load」とは画像データを遅延読込させる機能です。
遅延・・・え、遅くなるなら要らなくないんですが・・・
ややや、言葉の雰囲気は良くないですが、
実際は見えてるところ（可視領域）の画像だけ表示させて、見えてないところは表示されない、という機能です。
見えていない分の読み込みをしない分、表示が早くなる、というものです。
分かりやすい資料をこちらに・・・
【Smush】Lazy Loadの解除方法
「Smush」の「Dashboard」を開くと、「Lazy Load」の項目が出てきます。
初期設定だとこちらの横に✅が入っていると思います。
「Lazy Load」を選択し、下へスクロールしていくと
「無効化」のボタンが出てきます。
英語で「Invalidation」かもしれません。
こちらをクリックすることで、「Smush」の「Lazy Load」を停止させることができます。
まとめ
ということで、今回は追加したプラグインに
「Lazy Load」機能が入っていたことが原因でした。
追加したプラグインにどのような機能が入っているか、
それを知っておくとエラーの回避に繋がりますね。
別のテーマで同じ現象が発生する方は一度全プラグインに「Lazy Load」が入っているかを確認して
1つだけ起動させるように調整すると大丈夫だと思います。
「Cocoon」に関しての過去の記事は↓をご覧ください☺️
コメント