WordPressで画像をlightbox風にポップアップ表示させる
Easy FancyBoxとSimple Lightboxがおすすめ
WordPressで作成した記事に表示してある画像をクリックしたときに画面遷移せずにポップアップで拡大表示する方法を調べた。
WordPressのlightbox系プラグインが数多く利用可能になっているので、基本的にはその中から選択するのが良いかと思う。今回調べた中では、
の2つが良い印象を受けた。特にSimple Lightboxの方が数あるlightbox系プラグインの中でおすすめなのではないかと考えている。その理由として、
双方ともにプラグイン導入以前の画像に対して追加の作業無しにlightbox化することが出来る点があげられる。そして、Simple Lightboxについては、追加作業なしで複数画像をグループ化してスライドにすることも可能であった。
追加の作業とは、画像リンクのaタグにlightbox化するためのHTML属性を追加する必要がないという点を指していて、仮にHTML属性の追加が必要な場合には、既存の画像については後付けでHTML属性を個別に追加しなければならなくなる。実際にそのようなプラグインも存在するようだが、上であげた2つのプラグインについては、既存の画像(すでに投稿した記事に掲載中の画像)についても追加作業をすることなしにlightbox化することができるプラグインになる。
導入方法もシンプルになっていて、プラグインのディレクトリ、
wp-content\plugins
にコピーして有効化するだけになっている。
プラグイン有効化後の各種設定については、
Easy FancyBox:設定 → メディア
Simple Lightbox:外観 → lightbox
それぞれのページでカスタマイズすることができるようになっている。
プラグインを利用しないlightboxの導入方法
プラグインを利用すれば簡単に画像の拡大表示をすることができる。この件については、無理にプラグイン非依存に拘る必要はなさそうだが、参考までに
を利用してプラグイン非依存で実装する方法も載せてみようと思う。
インストール
lightboxのページの[DOWNLOAD]からlightbox一式(lightbox-2.7.1.zip)をダウンロードして展開する。
- css/lightbox.css
- js/lightbox.min.js
を利用しているテーマに階層を維持したままコピーすればインストール完了となる。
jsとcssのインクルード
テーマの関数(functions.php)にインストールしたjavascriptとcssの読み込み設定を行う。
function lightbox_enqueue() {
wp_register_script('lightbox-js', get_stylesheet_directory_uri().'/js/lightbox.min.js', false, null, false );
wp_enqueue_script('lightbox-js');
wp_register_style('lightbox-css', get_stylesheet_directory_uri().'/css/lightbox.css', false, null, false );
wp_enqueue_style('lightbox-css');
}
add_action('wp_enqueue_scripts', 'lightbox_enqueue', 10);
上のコードによりjsとcssを読み込むHTMLが追加されるので、後は画像のaタグにlightboxの属性を追加すれば拡大表示が行われる。
lightbox属性の自動追加
記事に画像を貼り付けるたびに手動でlightboxの属性を追加するのではなく、自動で属性付きのanchorタグを添付する方法を以下の載せてみる。image_send_to_editorフィルターフックでメディアライブラリからエディタに出力するタイミングでaタグの内容を変更することが可能。
function add_lb_attr($html, $id, $caption, $title, $align, $url, $size) {
return str_replace( '<a ', '<a data-lightbox="'. $id. '" ', $html );
}
add_filter('image_send_to_editor', 'add_lb_attr', 10, 7);
add_lb_attr()には複数の引数を渡すことが可能なので、柔軟にHTML属性をカスタマイズすることができる。上の例では、data-lightboxに$id(記事のid)を追加している。
無論、Easy FancyBoxかSimple Lightboxを利用すれば、上に載せたプラグイン非依存の作業は不要になる。