【wordpress 】プラグインを使わず jQuery Lightboxを実装する方法

2018年5月30日
wordpress

まずは公式サイトからlightboxをダウンロードします。

http://lokeshdhakar.com/projects/lightbox2/
のDOWNLOADからダウンロードできます。

展開したフォルダのlightbox2-master\dist内にある
・/js/lightbox.min.js
・/css/lightbox.min.css
・/images/の画像
をテーマフォルダにアップロードして使用します。

 

■lightbox.min.jsとlightbox.min.cssを読み込みについて

functions.phpに以下を追記します。

//lightbox.min.js
wp_enqueue_script( 'themename-lightbox', get_template_directory_uri() . '/js/lightbox.min.js', array(), '', true );
//lightbox.min.css
wp_enqueue_style( 'themename-lightbox', get_template_directory_uri(). '/css/lightbox.min.css', array(), '', true );

jsの読み込み
wp_enqueue_script(スクリプトの識別名,スクリプトのパス, 依存スクリプト識別名, バージョン, 読み込み位置);

cssの読み込み
wp_enqueue_style(スタイルシートの識別名,スタイルシートのパス, 依存スタイルシートの識別名, バージョン,メディア指定);

・スクリプト/スタイルシート識別名
重複しないように、わかりやすく「テーマ名+lightbox」としておけば大丈夫です。

・スクリプト/スタイルシートパス
URLを指定します。
get_template_directory_uri()で指定すると、親テーマのディレクトリが指定されてしまうので、子テーマがカレントの時は、get_stylesheet_directory_uri()を使用します。

・依存スクリプト/スタイルシートの識別名
識別名で読み込み順を制御できます。(配列で指定します)
指定したファイル(識別名)の後ろに追加されます。
jsは読み込み位置制御するので空で問題ありません。
cssはテーマCSS(style.css)より前に記述されると、うまく動作しない場合があるので、テーマCSSの後ろに記述されるように指定します。
(テーマCSSのIDの’-css’を外したものを指定します 例:parent-style-css →parent-style 等)

・バージョン
URLにパラメータとして追加されます。
編集日時などを設定することで、編集の履歴やブラウザキャッシュ対策になります。

・読み込み位置(スクリプト)
falseで</head>タグ前に、trueで</body>タグ前に出力されます。、
デフォルトはfalseです。
依存スクリプトを指定しない場合はtrueにします。

・メディア指定(スタイルシート)
メディアを指定する文字列を指定します。

準備は以上です。

■投稿内の画像にLightboxする

投稿に画像を挿入します。

挿入した画像をクリックし、編集ボタン(鉛筆マーク)から、編集画面を開きます。

リンク先を「メディアファイル」にし、上級向け設定を開きます。

リンク relに『lightbox』と入力すれば完了です。