wordpressにfancyboxを実装する【2020年版】

2020年07月02日 13:11

以前、同様の記事を書いたが、今回テーマ変更して、テーマもろとも削除してしまったので（白目）、新たに設定しようとしたら、fancybox自体が新しくなっていたため、備忘録的に残す。前回同様、wordpressのプラグインは使用していない。

実装自体はとても簡単。キャプションをどう採用するかを現時点でのwordpressの仕様に併せて更新している感じ。

以下の内容は、wordpressは5以上、テーマはtwentytwentyで想定している。

まずはfancyappからスクリプトをダウンロードする

fancyappのサイトからダウンロードするか、CDNをコピーするなりする。

fancybox公式

テーマ内のfunctions.phpへ必要なリンクを追加する

header.phpにリンクタグを貼りがちだが、wordpressでは、functions.phpにwp_enqueue_style()や、wp_enqueue_script()を使用して依存関係を指定して追加していくのが良い。

fancyboxはjQuery依存なので、以下のようなコードをfunctions.phpへ追加する。もちろんパスは自分の環境に併せて変えていく。

//fancybox css
wp_enqueue_style('fancybox-css', get_stylesheet_directory_uri() . '/lib/fancybox/jquery.fancybox.min.css');

//fancybox js
wp_enqueue_script('fancybox-js', get_stylesheet_directory_uri() . '/lib/fancybox/jquery.fancybox.min.js', array('jquery'));

wp_enqueue_scriptについては、公式ドキュメントで確認。

ごちゃごちゃ書いたが、ブラウザのソースへ以下のようにリンクタグが作成されていればOK。

  • jquery.fancybox.min.css
  • jquery本体
  • jquery.fancybox.min.js
  • 自分のjavascript（後述）

fancyboxを実装する

ここまできたらあとは実装のみ。fancyboxのキャプションをどうするかだが、隣接するfigcaptionタグのテキストを取る、figcaptionがなければ、imgのaltを取ることにする。そのコードが以下。

jQuery(function ($) {

	//画像直リンクのセレクタ
	//対応拡張子を増やす時は、ここに同じように追加すればOK
	var fb_selecter = 'a[href $=".jpg"],a[href $=".png"],a[href $=".gif"]';

	//fancybox実装
	$(fb_selecter).fancybox({
		//キャプション設定
		caption : function( instance, item ) {
			//隣接するfigcaptionを取得
			var _caption = $(this).next('figcaption').text();
			if(!_caption) {
				//figcaptionがなければ、画像のaltから取得
				_caption = $(this).children('img').attr('alt');
			}
			return _caption;
		}
	});

});

前述した「自分のjavascript」に上記コードを書く。

以上。

ライセンスについて

fancyboxの最新版は商用利用は有料となっているようですので、商用利用する場合は、公式サイトでライセンスの確認を行ってください。

技術
•