SWELLのLightbox（luminous）をClassicエディタでも有効化するカスタマイズ

SWELLは画像をクリックしたときにポップアップする「投稿画像をクリックで拡大表示する機能」が組み込まれています。その機能は、Luminousというjavascriptを使用しています。

Luminousについては以下の記事で紹介しています。

あわせて読みたい

非jQueryのluminousをWordPressに簡単に適用する方法 SWELLでも使われている非jQueryのLightbox JSライブラリのluminousをSWELL以外のテーマでも使いたいと思う人は多いと思います。 luminousの使い方は検索すると沢山出て…

残念ながら、この「投稿画像をクリックで拡大表示する機能」は、ブロックエディタでしか使うことができません。

Classicエディタで作成したサイトをSWELLに乗り換えた時によく問題になるのが、Classicエディタで作成した記事の画像には「投稿画像をクリックで拡大表示する機能」は適用できないという問題です。

少しカスタマイズすることで、Classicエディタで作成した記事にも「投稿画像をクリックで拡大表示する機能」を適用できます。

Classicエディタで作成した記事が大量にある場合や、ブロックエディタに乗せ変えるまでのつなぎとして、ClassicエディタでSWELLの「投稿画像をクリックで拡大表示する機能」を適用するカスタマイズをご紹介します。

「投稿画像をクリックで拡大表示する機能」はなぜClassicエディタでは有効にならないか？

結論から申し上げますと、ブロックエディタで画像を挿入したHTML構造になっていないと「投稿画像をクリックで拡大表示する機能」が画像を見つけてくれません。

SWELLでは、javascriptを使って特定のHTML構造になっているimgタグのマークアップを変更することで、その画像でluminousが有効になるようにしています。

「投稿画像をクリックで拡大表示する機能」では.post_content .wp-block-image img というセレクタで選択できる画像だけが対象になります。

Classicエディタで挿入した画像には、.wp-block-image がありませんから、対象外ということになってしまうのです。

Classicエディタで追加した画像に.wp-block-image を持つwrapperを付ければ認識する

Classicエディタで追加した画像は、pタグで囲まれています。

こんな感じです。↓

<p>
<img src="...">
</p>

このpタグに.wp-block-imageを追加すればいいのですが、このpタグは自動的に追加されるものでclassicエディタでは触れません。

SWELLのluminousでは、.wp-block-imageをjavascriptで探していますので、それよりも前にマークアップの変更が終わってないといけません。

このpタグをfigureタグに置き換えて、classを追加するという処理を、the_contetフィルターでゴニョゴニョすることで、簡単に希望するHTML構造することが可能です。

プライオリティが12になっているのはwpautop()処理よりも後にフィルターを実行するためです。

function filter_ptags_on_link_images($content)
{
	$count=0;
	$res = preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '<figure class="wp-block-image classic">\1\2\3</figure>', $content,-1,$count);
	return $res;
}
add_filter('the_content', 'filter_ptags_on_link_images',12,1);

まとめ

Classicエディタで作成した記事が多くて、Classicブロックのまま放置してある場合、「投稿画像をクリックで拡大表示する機能」が動かないので、今回の記事のカスタマイズを参考にしてみてください。

Classicエディタの記事でもSWELLの「投稿画像をクリックで拡大表示する機能」は使えますか？

SWELLが初期状態だと使えません。この記事のカスタマイズを行うことで使うことができます。

Classicエディタの記事でもSWELLの「投稿画像をクリックで拡大表示する機能」を使うカスタマイズ方法は？

functions.phpに本記事の内容をコピペすれば使えるようになります。code snippetsを使ってもいいでしょう。

Classicエディタの記事でもSWELLの「投稿画像をクリックで拡大表示する機能」を使う場合の注意事項は？

SWELL同様、aタグで囲われたimgタグは対象外です。

pタグとimgタグの間に別のタグが入っていたり、文字が入っていると上手く処理されません。その場合は、エディタで改行してください。

ショートコードで挿入した画像しかない場合、「投稿画像をクリックで拡大表示する機能」が有効にならない

以下の記事で対処方法を説明しています。

あわせて読みたい

SWELLカスタマイズ｜ショートコードで追加した画像にもluminousを適用する方法 SWELLには記事内の画像をLightbox系javascript プラグイン luminousを使ってポップアップする機能があります。 この機能をSWELLで使う場合、『SWELL設定から機能を有効…