WordPressは、さまざまなライトボックス(Lightbox)プラグインを使用して画像をクリックすると、ライトボックスの形式で表示することができます。 一部のテーマでは、ライトボックス機能を基本的に搭載されて出てくることもあります。 そのような場合を除き、 Responsive Lightbox by dFactory などのプラグインをインストールして使用することができます。
通常Lightboxプラグインをインストールすると、自動的に文章内の画像をクリックすると、ライトボックスの形式で表示します。 しかし、プラグインに応じて、手動で rel="lightbox"のようなコードを挿入する必要があります。 あるいは WordPress容易でないjsファイルを Enqueueして使用する場合にも、手動で特定のコードをイメージタグに挿入する必要があります。
このような場合は、次のようなコードを関数ファイルに追加すると、 WordPress スレッド内のすべての画像に rel="lightbox" 属性が追加されます。
function add_lightbox_rel($content) { global $post; $pattern ="/<a(.*?)href=('|")(.*?).(bmp|gif|jpeg|jpg|png)('|")(.*?)>/i"; $replacement = '<a$1href=$2$3.$4$5 rel="lightbox" title="'.$post->post_title.'"$6>'; $content = preg_replace($pattern, $replacement, $content); return $content; } add_filter('the_content', 'add_lightbox_rel');
もし使用しているプラグインでイメージに他のコードを挿入する必要がある場合は、 rel="lightbox" 部分を、プラグインが必要とするコードに変更されます。
ちなみにライトボックス機能をKboardに適用する場合、サムネイル画像のタグ内に rel="lightbox"(あるいはプラグインが必要とするコード)を追加します。 このページの KBoard ギャラリーで拡大鏡をクリックすると、画像がライトボックス形式で表示されるように属性コードがイメージタグに追加されました。
ちなみに、WP jQuery Lightbox(https://wordpress.org/plugins/wp-jquery-lightbox/ )プラグインをインストールすると、
<a href="image-medium.jpg" rel="lightbox" data-download="image-superlarge.jpg"> [...] </a>
形式的にポップアップを浮かせることができます。