sample2

Wordpress技術実験サイトのためコンテンツに意味はなくデザインも乱れるかもしれません。

https://www.facebook.com/capture.jp

[WordPress]WPtouch Mobile Pluginでアイキャッチ画像が表示されないのはLazy Loadとの相性のようです #wordpress

テスト

WPtouch Mobile Pluginでアイキャッチ画像が表示されないのはLazy Loadとの相性のようです

概要

WPtouch Mobile Pluginを使ってモバイル対応していたサイトでトップページに各記事のアイキャッチ画像を表示していたのだけど、最近どうも表示されなくなったなあ、と思ったら、最近導入したLazy Loadが原因だったようです。
いや、まあ、下記で紹介する参考サイト(1)がなかったら気付かなかったもですが、とりあえず速度の課題はさておき、アイキャッチ画像は復活しました。

プラグインについて

WPtouch Mobile Plugin・・・モバイル対応していないWordpressサイトでも簡易的にモバイル対応させるためのプラグイン。割と多くのサイトが使っているようです。
Lazy Load・・・表示している箇所だけ画像読み込みを行うプラグイン(下記参考サイト(2)参照)

Lazy Load導入前の表示

LazyLoad導入前

Lazy Load導入後の表示

Lazy Loadを導入し、有効化しましたところ、
スクリーンショット 2015-01-20 23.26.00

あらら、アイキャッチ画像が表示されなくなってしまいました。
IMG_0041

Lazy Loadを無効化した際の表示

Lazy Loadを無効化しましたら、
スクリーンショット 2015-01-20 23.29.28

正常に表示されました。良かったです!
IMG_0042

参考サイト(有難うございます)

(1)WPtouchでアイキャッチが表示されない!原因はLazy Loadというプラグインだった | Taka's Life
(2)スクロールに応じて画像を遅延読込させるLazy Loadプラグイン (1/3):CodeZine

最後に

プラグインを導入したらPCだけでなく、スマホ等でも副作用チェックしなければ、と思いました。
元々、Lazy Loadは速度向上のために導入したので、また速度向上策は別途考えないといけません。
おそらく、WPtouch Mobile Pluginに頼ってスマホ対応するのではなく、CSSをカスタマイズしてレスポンシブ対応するのが一番良いのでしょうが。最近のテーマだと元々がレスポンシブ対応のものも多いので、そういったテーマを選定するのも一つの策だと思います。
/////

テスト

 - web_design , , , , ,