関連記事
- WordPress6.3でクラシックブロックが改悪されてゴミになった&属性「fetchpriority」はタグ「amp-img」で使用できません。エラー
- VivaldiでWordPressの記事編集画面を開くのが遅い時の対処法備忘録
WP Featherlightは遅い
Featherlightは画像をポップアップで表示するいわゆるLightbox機能を提供してくれるjQueryのプラグインです。
WordPressでは『WP Featherlight』と言うプラグインをインストールするだけで使うことができます。
ところが、WP Featherlightを導入したところPageSpeed Insightsで表示される速度が目に見えて低下してしまいました。
少しのユーザビリティ向上のために速度を犠牲にするのは本末転倒なので、プラグインを使わずに設置することにしました。
- 最終的にバニラJSに移行しました。
20行以内のバニラJSでWordPressにLightbox機能を実装する
functions.phpに記述
wp_enqueue_style('featherlight', '//cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.css');
wp_enqueue_script('featherlight', '//cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.js', array('jquery'));
wp_enqueue_scriptの第二引数にjqueryを渡しておくとjQueryの後に読み込んでくれます。
テンプレートのhead部分に記述
$('img.size-medium, img.size-full').parent('a').featherlight({targetAttr: 'href'});
WordPressの記事エディターで画像を挿入すると書き足されるクラスに対して実行しています。
WordPressのバージョンによってはクラスの指定が変わるかもしれませんが、概ね上記の指定でいけると思います。
上記コードは必ずjQueryの読み込み後に実行するようにしてください。