wordpressにfancyboxを入れてみた（wordpressプラグインなし）

2014年05月01日 17:28

wordpressのポスト内に掲載された大きな画像をfancyboxを使って表示したいと思って、google先生に聞いてみたところ、wordpress用のプラグインを使用するって方法がかなりヒットしました。

プラグインを使用しても良かったんですが、fancybox入れるだけなのにプラグインってちょっと大げさかなーと思いつつ、過去のポストで既に画像直リンクのものとかいちいち修正するのも面倒だよねーと。

fancybox使うにあたって結局はタグのアトリビュートとjQueryセレクタをどうするかって話なので、jQueryで実装してみた。とっても簡単なうえに、外しやすいです（例えばshadowboxに変えたい、とか）。

やってることは至ってシンプル。ちなみに画像にしか対応してません。うちのブログは動画とかないし。ははっ。

1.fancyboxの動作環境を作る。

fancybox公式サイトからソースをダウンロードし、実行環境を作る。普通のjQueryプラグインの導入方法と同じですね。必要なファイルは使用しているテーマフォルダの中に保存してください。以下のサイトがわかりやすいです。
http://bl6.jp/web/javascript/fancybox-responsive/

2.画像タグのalt属性の値を、aタグのtitle属性の値へ入れる。

fancyboxの仕様ではaタグのtitle属性がポップアップ時のキャプションになりますが、wordpressはaタグのtitle属性はデフォルトでは付かないので、これをjQeuryで実装します。

3.画像直リンクのみにfancyboxを実装します。

fancybox公式のexampleでは、ID名やクラス名等をセレクタとして使用してあります。wordpressのフックを使ってクラス名をつける手もありますが、過去のポストをいちいち修正したりデータベースのデータメンテナンスするのも面倒なのでjQueryで画像直リンクのみ拾ってfancyboxを実装します。

そして2と3のコードがコレ。headタグの中（または、bodyの閉じタグの直前）に書きます。

jQuery(function ($) {

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

	//imgタグのalt属性の値をaタグのtitle属性の値へ入れる
	$(fb_selecter).each(function () {
		var img_title = $(this).children('img').attr('alt');
		$(this).attr('title', img_title);
	});

	//fancybox実装
	$(fb_selecter).fancybox({
		openEffect: 'none',
		closeEffect: 'none',
		helpers: {
			title: {
				type: 'outside'
			}
		}
	});
});

使い方は、画像を掲載する時に直リンクに指定するだけです。

技術
• •