画像の遅延読み込みをしてサイトの表示速度をアップしてくれるWordPressプラグイン「Unveil Lazy Load」ですが、このプラグインが原因でslick.jsでスライドにした画像がうまく表示されないという不具合が起こりました。
プラグインのON/OFFを切り替えるプラグインはありますが、あまりプラグインを入れたくないサイトでしたので、プラグインなしでやる方法を考えました。
そこで、slick.jsでスライドを設置しているページだけ「Unveil Lazy Load」を実行しないようにできないか模索したところ、想定どおりにできたので紹介します。
コードの紹介
以下のコードをfunctions.phpに記述する。
1 2 3 4 5 6 7 8 9 10 | add_action('get_header', 'my_get_header'); function my_get_header() { if(is_page('ページID、スラッグなど')) { global $unveil_lazy_load; remove_action( 'wp_enqueue_scripts', array($unveil_lazy_load, 'load_scripts') ); remove_filter( 'the_content', array($unveil_lazy_load, 'add_dummy_image'), 99 ); remove_filter( 'post_thumbnail_html', array($unveil_lazy_load, 'add_dummy_image'), 11 ); remove_filter( 'get_avatar', array($unveil_lazy_load, 'add_dummy_image' ), 11 ); } } |
コードの解説（備忘録みたいなものなので、スルーしてOK）
・1行目
functions.phpでは単純にページ判定処理をすることはできませんので、add_actionのget_header時に処理をするようにフックを使用します。
・3行目
ページ判定なので、is_categoryとかでもOKだと思います。
・4～7行目
5～7行目は同じ処理です。説明は5行目についてのもの。
プラグインのコードを見るとUnveilLazyLoadクラスのコンストラクタで「add_action(‘wp_enqueue_scripts’, array($this, ‘load_scripts’));」という記述がありましたので、これを「remove_action」してしまえばプラグインの実行を止められると考えました。
add_actionで「array($this, ‘load_scripts’)」のように設定されたactionを削除するには、インスタンス化されたUnveilLazyLoadクラス＝$unveil_lazy_loadをグローバル宣言して「array($unveil_lazy_load, ‘load_scripts’)」とやれば、削除することができます。
プラグインのON/OFFを切り替えるプラグイン
今回は使用を見送りましたが、便利そうだし、せっかくなのでプラグインのON/OFFを切り替えるプラグインも紹介しておきます。
plugin load filter
Plugin Organizer
plugin load filterの方は作者が日本人の方なので、英語に自信のない方でも安心ですね。
最後に
Unveil Lazy Loadプラグインは設定不要で使用できるところが手軽でいいのですが、逆に今回の様に特定のページだけ除外したいなどの要望には応えてくれませんので、こういうときは自力で解決しないといけませんね。
今回紹介した方法はあくまでも自分が考えた方法なので、他にもっと良い方法があるかもしれません。
参考サイト
functions.php内でis_home()を使うには
【WordPress】クラスによるアクション/フィルターへのフックを解除する
