Pickupニュース

lightGalleryをWordPressで使う方法
WordPress

lightGalleryをWordPressで使う方法

通常画像からギャラリー機能まで対応
lighGalleryは非常に高機能で使い勝手の良いlightbox系のjQueryプラグインなのですが、今のところWordPress用のプラグインは提供されていません。そこで、独自にlightGalleryをWordPressのテーマに組み込んで使う方法の紹介です。

lighGalleryの導入

まず、lighGalleryのライブラリ一式をまとめたフォルダを作成します。

リンク先のClone or downloadDownload ZIPをクリックして、ファイルをダウンロードします。

Webサイト

lightGalleryの準備

lightGalleryという名前のフォルダを新規作成し、そこにダウンロード・解凍後の lightGallery-masterdist フォルダの中からcssfontsimgjsフォルダを移動します。
ここでは、全てのプラグイン機能を梱包したlightgallery-all.jsを利用するので、上記作成したlightGalleryフォルダjsフォルダに lightGallery-masterlib フォルダの中からのlightgallery-all.js(またはlightgallery-all.min.js)を追加します。

テーマディレクトリにlightGalleryフォルダを追加

作成したlightGalleryフォルダを利用しているテーマディレクトリに追加します。
ここでは、{テーマディレクトリ}/lib/lighGalleryとしています。

スクリプト記述用のJavaScriptの追加

lightGalleryの設定を記述するmyscript.jsという名前のJavaScriptファイルを新規作成し、テーマディレクトリに追加します。
ここでは、{テーマディレクトリ}/js/myscript.jsとしています。
既にカスタムスクリプトを記述するJavaScriptファイルがある場合は不要です。

functions.phpの記述

functions.phpに以下のような記述を追加します。
PHPCopy
if(!is_admin()){ function add_style_and_script() { wp_enqueue_style('lightGallery-Style', get_template_directory_uri().'/lib/lightGallery/css/lightgallery.css'); wp_enqueue_script('lightGallery', get_template_directory_uri() . '/lib/lightGallery/js/lightgallery-all.js', array(), '1.3.5', true ); wp_enqueue_script('MyScript', get_template_directory_uri() . '/js/myscript.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'add_style_and_script' ); }

記事内の画像に対しての処理

functions.phpの記述

WordPressで
  • 配置:左
  • リンク先:メディアファイル
  • サイズ:サムネイル
の設定で画像を記事中に挿入すると、次のようなコードが出力されます。
HTMLCopy
<a href="{フル画像パス}"><img src="{サムネイル画像パス}" alt="{タイトル}" width="150" height="150" class="alignleft size-thumbnail wp-image-xxx" /></a>

しかし、このままだと<a>タグ内にクラス名などの識別子が無いため、lightGalleryで指定することが出来ません。そこで、functions.phpに以下のような記述を追加します。
PHPCopy
function image_add_lightgallery( $html ){ $html = preg_replace('/<a/', '<a class="lightgallery"', $html ); return $html; } add_filter('image_send_to_editor', 'image_add_lightgallery', 10);
これで、記事中に画像を挿入する際に、自動で<a>タグ内にlightgalleryというクラス名が追加されるので、これをlighGalleryのselectorに指定します。
また、記事本文全体(.entry-content⇐テーマによって異なります)をlighGalleryの実行セレクタとして指定します。

JavaScriptの記述

JavaScriptに以下のような記述を追加します。
JavaScriptCopy
jQuery(function($) { $('.entry-content').lightGallery({ selector: '.lightgallery' }); });

記事内のキャプション付き画像に対しての処理

WordPressでキャプション付きの画像を記事中に挿入すると、次のようなコードが出力されます。
HTMLCopy
<figure id="attachment_xxx" style="width: 150px" class="wp-caption alignleft"> <a href="{フル画像パス}"><img class="size-thumbnail wp-image-xxx" src="{サムネイル画像パス}" alt="{キャプション}" width="150" height="150" /></a> <figcaption class="wp-caption-text">{キャプション}</figcaption> </figure>
キャプション付きで挿入した場合は、<a>タグの親要素<figure>タグ内にwp-captionクラス名が追加されて出力されるので、これをlighGalleryのselectorに指定します。

JavaScriptの記述

JavaScriptに以下のような記述を追加します。
JavaScriptCopy
jQuery(function($) { $('.entry-content').lightGallery({ selector: '.wp-caption a' }); });

ギャラリー画像に対しての処理

WordPressで
  • リンク先:メディアファイル
  • カラム:3
  • サイズ:サムネイル
の設定でギャラリーを記事中に挿入すると、次のようなコードが出力されます。
HTMLCopy
<div id='gallery-xxx' class='gallery galleryid-xxx gallery-columns-3 gallery-size-thumbnail'> <figure class='gallery-item'> <div class='gallery-icon landscape'> <a href='{フル画像パス}'> <img width="150" height="150" src="{サムネイル画像パス}" class="attachment-thumbnail size-thumbnail" alt="{キャプション}" aria-describedby="gallery-xxx" /> </a> </div> <figcaption class='wp-caption-text gallery-caption' id='gallery-xxx'>{キャプション}</figcaption> </figure> ... ... </div>
ギャラリー機能を使用すると、全体の親要素にgalleryクラス名が付くのでこれをlighGalleryの実行セレクタとして指定し、その下位にある<a>をlighGalleryのselectorに指定します。

JavaScriptの記述

JavaScriptに以下のような記述を追加します。
JavaScriptCopy
jQuery(function($) { $('.gallery').lightGallery({ selector: 'a' }); });

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

記事ランキング