Lightboxをダウンロードする

公式サイトのGithub Releases pageからzipファイルでLightboxをダウンロードする。

zipファイルを解凍する

lightbox2-2.11.3.zipを解凍すると、distフォルダ内に以下のような構成のフォルダを取り出せる。

• lightbox2-2.11.3
  • dist
    • css
      • lightbox.css
      • lightbox.min.css
    • js
      • lightbox.js
      • lightbox.min.js
      • lightbox.min.map
      • lightbox-plus-jquery.js
      • lightbox-plus-jquery.min.js
      • lightbox-plus-jquery.min.map
    • images
      • close.png
      • loading.gif
      • next.png
      • prev.png

この内、以下の2ファイル＋1フォルダをテーマフォルダにアップロードする。

• lightbox2-2.11.3
  • dist
    • css
      • lightbox.min.css //アップロードする
    • js
      • lightbox.min.js //アップロードする
    • images //アップロードする

WordPressのテーマフォルダにアップロードする

今回は親テーマにアップロードする。アップロードする階層はfunctions.phpがある階層。

• Parent-theme
  • css
    • lightbox.min.css
  • js
    • lightbox.min.js
  • images
  • functions.php

functions.phpでLightboxファイルを読み込む

lightbox.min.cssとlightbox.min.jsをWordPressに読み込むため、親テーマのfunctions.phpにコードを追記する。

function snk_enqueue_style() {
  wp_enqueue_style('lightbox-style', get_template_directory_uri() . '/css/lightbox.min.css');
}
add_action('wp_enqueue_scripts', 'snk_enqueue_style');

function snk_enqueue_scripts() {
  wp_enqueue_script('lightbox-script', get_template_directory_uri() . '/js/lightbox.min.js', array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'snk_enqueue_scripts');

Jqueryよりも後に読み込む必要があるため、jsの読み込みの依存関係をarray('jquery')と指定する。

投稿編集画面でギャラリーブロックor画像ブロックを使用する

ギャラリーページとして展開したい場合はギャラリーブロックを使用し、断片的な画像に対してLightboxを有効化したい場合は画像ブロックを使用する。

ポイントは、Lightboxを有効にしたい画像はメディアファイルとし、画像ブロックのツールバーの高度な設定で、rel属性にlightboxと入力する。

複数の画像をグループ化したいときは、rel属性の値をlightbox[group]と指定する。groupは任意のテキストで良い。

メモ

• メディアファイルを選択する
• 高度な設定のrel属性をlightboxと入力する
• グループ化する場合は、高度な設定のrel属性をlightbox[group]と入力する

.lb-nav a.lb-prev {
  position: absolute;
  left: -60px !important;
  opacity: 1 !important;/* 矢印を常に表示 */
}
.lb-nav a.lb-next {
  position: absolute;
  right: -60px !important;
  opacity: 1 !important;/* 矢印を常に表示 */
}