Themify のテーマ内臓 lightbox のカスタマイズについて。
「Settings」→「Theme Settings」の「WordPress Gallery Lightbox」にある「Apply lightbox to image links (ie. links to jpg, png, and gif will open in lightbox)」にチェックを入れると、記事中の画像ファイルへのリンクがすべて prettyPhoto か photoSwipe で開かれるようになる。リンクrelやクラスを指定しなくても勝手に有効になるので便利。
…なんだけど、このままだとなんでもかんでも強制的に lightbox で開く設定になってしまい、任意の画像のみ OFF にすることなどができなくなる。
まず、なぜ全ての画像で lightbox が有効になるのかというと
1 |
".post-content a[href$=拡張子],.page-content a[href$=拡張子], ..." |
このような jQuery のフィルタに合致するものに対してイベントをバインドしているため。拡張子は ‘jpg’, ‘gif’, ‘png’, ‘JPG’, ‘GIF’, ‘PNG’, ‘jpeg’, ‘JPEG’ の計8種類が指定されている。
ということはこのフィルタさえうまく作り直してやれば有効・無効を自在に切り替えられるはず。
themify_gallery_plugins_args
というフィルターフックを使うことで書き換えられるので…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
add_filter('themify_gallery_plugins_args', 'custom_themify_gallery_plugins_args'); function custom_themify_gallery_plugins_args($args) { $file_extensions = array('jpg', 'jpeg', 'gif', 'png', 'JPG', 'JPEG', 'GIF', 'PNG'); $content_images = ''; foreach ($file_extensions as $ext) { $content_images .= ', .post-content a[href$='.$ext.']:not([class~=hoge])'; $content_images .= ', .page-content a[href$='.$ext.']:not([class~=hoge])'; } if (2 < strlen(content_images)) { $content_images = substr($content_images, 2); } $args['lightboxContentImagesSelector'] = $content_images; return $args; }; |
:not
フィルタを使用して指定された class を持つリンクを除外してしまう。上記の例だと hoge
が class に指定されていない(もしくは class 属性自体がない)リンクだけが抽出され lightbox が有効になる。
テーマの変更、リサイズ可否、その他もろもろの設定もフィルターフックを使用する。詳しくは公式サイトのドキュメントを参照。
追記
Basic 1.2.8 からは lightbox プラグインが prettyPhoto から Magnific に変更になっているが、基本的なカスタマイズ方針は同じ。 (2014/02/26)