軽量Lightbox FeatherlightをWordPressにプラグインを使わないで設置

関連記事

WP Featherlightは遅い

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の読み込み後に実行するようにしてください。

関連記事

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL