画像をクリックしたときに、別ページへの遷移(移動)ではなく、ポップアップで画像を表示したいシチュエーションってありますよね。
こうした画像のレスポンシブなポップアップ(拡大表示)はJavaScriptのライブラリ Lightbox やFancyBox を使うと実現できます。
↓こんな感じ(PCのみ)
WordPressでは、こうした機能をかんたんに設置できるプラグインが配布されていて、初心者でもワンクリックで使えます。
しかし、WordPressの有料テーマTHOR (トール)を使っている場合、相性の都合により簡単に設置できないことがあります。
今回の記事では、THORでも画像ポップアップを導入する方法を解説しています。とはいえ体系的な方法ではないので、参考にできそうなところをつまみ食いしていただければ幸いです。
注意:以下の方法は JavaScript のプログラミングを理解されている方にはオススメしません。多少冗長な作業が入るためです。ご自身の力でWordPressに手を加えられる人で、THORでの導入に問題が生じてしまったときは、プラグインを使わずに直接 Lightbox(またはFancybox)を導入されたほうがいいでしょう。
結論
- THORテーマが独自に読み込むjQueryを読み込まないように変更
- WordPress本体に同梱されているjQueryを読み込まないように変更
実行環境
WordPress 5.8
WPテーマTHOR 2.3.4
プラグイン wp-jquery-lightbox 1.4.8.3
導入の流れ
ここではLightBoxを導入する流れで説明しています。とはいえ、FancyBoxの場合も同様になります。
- まず、プラグイン「wp-jquery-lightbox」を導入します。有効化して、画像のリンクをクリックしたときにLightbox(画像のポップアップ)が機能していればOKです。作業は完了。以下を読む必要はありません。
- 有効にしても、いくらプラグイン設定を見直しても、画像リンクに何ら変化がないとき(普通に別のページに遷移するとき)はjQuery関連のエラーが出ているかもしれません。
Chromeをお使いなら、F12キーなどでデベロッパーツールを開きコンソールタブを開くと、
「jQuery .lightbox … is not a function」
みたいなエラーが出ていませんか?
上記エラーが出ている場合はTHORテーマが読み込む jQueryとWordPress本体に搭載されているjQueryがバッティングし、悪さをしています。
下記の対応をすれば、この状況をとりあえず回避できるはずです。
THORテーマが独自に読み込むjQueryを読み込まないように変更
サーバーにあるWordPressの設定ファイルを編集します。
[[サイトのディレクトリ]]/wp-content/themes/the-thor/inc/parts/wp_head.php
を開き、以下の記述をコメントアウト(行の先頭に // を挿入)します。
//jQuery本体(WP同封ではなく、CDNを利用)
echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>'."\n";
※ 先頭に // を入れてコメントにする。
//jQuery本体(WP同封ではなく、CDNを利用)
// echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>'."\n";
これにより、THORテーマが独自に読み込もうとするjQueryを抑止し、読まれないにします。
WordPress本体に同梱されているjQueryを読み込まないように変更
以下のファイルを編集します。
[[サイトのディレクトリ]]/wp-content/themes/the-thor-child/functions.php
※上記とフォルダが違うので注意
下記コードを最後尾に追加。(分かる方は状況に合わせて記述を修正してください)
//不要jqueryの解除
function del_scripts() {
//WordPress 本体の jQuery を登録解除
wp_deregister_script('jquery');
//jQuery を CDN から読み込む
wp_enqueue_script( 'jquery',
'//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js',
array(),
'1.12.4',
false
);
}
add_action('wp_enqueue_scripts', 'del_scripts');
これら2つの修正により、ページを開いたときに読み込まれるjQueryがwp_enqueue_scriptsにより指定したバージョン1.12.4に一本化されるため、上記のエラーは解消されるはず。
ページを再読込してlightboxが正常に動作したら、作業完了です。お疲れさまでした。
追記
もし、上記対応をしてもコンソールに
「jQuery .lightbox … is not a function」
みたいな表示があるときは、jQueryの読み込み前にlightboxが呼ばれているためにエラーとなっている可能性があります。
jQuery .lightbox … is not a functionの原因
jQueryは原則的にjQueryを利用するライブラリよりも前に(事前に)読み込まれている必要があります。
(ざっくり簡単に表現すると、LightboxプラグインやTHORテーマ、WordPressバージョンの相性による影響です)
ここでは、初心者でもできるようにプラグインを使って(無理やり)読み込み順を修正してみましょう。
Autoptimizeを使ったJSの読み込み順の変更
プラグイン Autoptimize はJavaScriptやCSSの読み込みを最適化しSEOに最適化したサイトづくりに役立つものです。ですが今回のように、JavaScriptの読み込み順を最適化してページの表示速度を上げるという使い方もできます。
Autoptimize では以下のように設定します。
[JavaScript オプション]
JavaScript コードの最適化 :チェック
連結しないで遅延:チェック
Autoptimize からスクリプトを除外:jquery.min.js
最後に「変更の保存とキャッシュの削除」を忘れずに押下しましょう。
以上で設定は完了です。ページを再読込してLightboxが正常に動作したら作業完了です。
今回参考にしたページ・資料
関数リファレンス/wp enqueue script - WordPress Codex 日本語版
https://muryoblog.cinemarev.net/entry/thor-pagespeed.html
https://www.webdesignleaves.com/pr/wp/wp_func_style_script.html