【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』と入力すれば完了です。