WordPressテーマTHORでjQuery Lightboxが正常に動作しないときの対処

2021年9月12日

画像をクリックしたときに、別ページへの遷移（移動）ではなく、ポップアップで画像を表示したいシチュエーションってありますよね。

こうした画像のレスポンシブなポップアップ（拡大表示）は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');

これら２つの修正により、ページを開いたときに読み込まれるjQueryがwp_enqueue_scriptsにより指定したバージョン1.12.4に一本化されるため、上記のエラーは解消されるはず。

ページを再読込してlightboxが正常に動作したら、作業完了です。お疲れさまでした。