SWELLカスタマイズ｜ショートコードで追加した画像にもluminousを適用する方法

SWELLには記事内の画像をLightbox系javascript プラグイン luminousを使ってポップアップする機能があります。

この機能をSWELLで使う場合、『SWELL設定から機能を有効化』した状態で、かつ、『記事内にリンクを付けずに画像を挿入』するだけです。

SWELL設定⇒SWELLの機能とすすみ『「投稿画像をクリックで拡大表示する機能」を停止する』がチェックされていなければ有効になっています。

それだけで、SWELLがよしなに処理してくれます。

しかし、「投稿画像をクリックで拡大表示する機能」が動かない現象が起こることがありますので、この記事では、SWELLのluminousを強制的に有効化するカスタマイズをお伝えします。

SWELLの「投稿画像をクリックで拡大表示する機能」が動かない

SWELLの「投稿画像をクリックで拡大表示する機能」は、記事内にluminousで処理すべき画像がある（aタグがないimgタグ）場合にしか有効になりません。

記事内にluminousで処理すべき画像があるかの判断は、SWELLがthe_contentフィルター（priority:10）内で行っています。

そのため、ショートコード展開前の記事が対象になりますので、ショートコードで展開された画像（priority:11）は対象になりません。

そもそも、ショートコードで展開された画像しかない記事の場合は、luminousのpopアップが有効になりませんので、「投稿画像をクリックで拡大表示する機能」が動かない現象に遭遇します。

強制的にluminousを有効化するようにSWELLに指示する

SWELLは、the_contentフィルタでluminous対象画像の存在を検出した時に、フラグを立てます。

そのフラグを強制的に立ててあげれば、SWELLはluminousを有効化します。

ショートコード内部で、そのフラグを強制的に立ててあげればよろしいです。

<?php
	\SWELL_Theme::set_use( 'luminous', true );

luminousの動きをカスタマイズ

SWELLは、luminousを起動するために、同梱されているjsスクリプトを読み込みます。

build/js/front/set_luminous.min.js

luminousの起動条件やオプションなどを変更する場合は、set_luminous.min.jsを書き換える必要があります。

ソースコードが圧縮されているので、javascriptの整形ツールに通してから編集すれば大丈夫です。

子テーマにコピーして修正すればカスタマイズすることができます。

子テーマのbuild/js/front/set_luminous.min.jsを読み込むためのスクリプトになります。

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_my_set_luminous',99 );
function enqueue_my_set_luminous(){
wp_dequeue_script( 'swell_set_luminous');
	$timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/js/front/set_luminous.min.js' ) );
wp_enqueue_script( 'swell_set_luminous', get_stylesheet_directory_uri() . '/build/js/front/set_luminous.min.js', [ 'swell_luminous' ], $timestamp, true );	
}

「投稿画像をクリックで拡大表示する機能」が動かない人たち

SWELLの利用者は教科書通りの使い方しかしない人が多いのか、フォーラムを見てもあまりトラブルの事例はありませんでした。

「投稿画像をクリックで拡大表示する機能」はclassic editorだと動かないようですね。

まとめ

SWELLの「投稿画像をクリックで拡大表示する機能」はブログ内の画像をスマホで拡大表示する時には便利だと思います。

「投稿画像をクリックで拡大表示する機能」が上手く動かない場合は、恐らくSWELL作者の想定外の画像挿入が行われていますので、SWELLにluminousを使うようにフラグを立ててあげてください。

SWELLの「投稿画像をクリックで拡大表示する機能」が動かない

以下を確認します。

• SWELL設定⇒SWELLの機能とすすみ『「投稿画像をクリックで拡大表示する機能」を停止する』がチェックされているか？
• 画像にリンク先が設定されていないか？
• shortcode展開された画像ではないか？

ショートコードで展開された画像にもSWELLの「投稿画像をクリックで拡大表示する機能」を適用したい

SWELLの画像判定ロジックがショートコード展開前の記事を対象にしているので、ショートコード展開された画像には適用できません。

ただし、この記事で紹介したカスタマイズをすれば対応できます。