WordPressで読み込まれているjQueryのver.が固定で古いものになっておりFancyboxが動作しません。

Question

最近サーバー移行とテーマ変更をしたのですが、移行前から動作しなかったEasyFancyboxやResponsive LightboxのFancyboxが、変更後の現在も動作しません。
（なぜかResponsive LightboxのNivo Lightboxのみ正常に動作しております。）

検証としてローカルでEasyFancyboxを導入してテストしてみたところ、そちらは正常に動作しました。

ローカル、サーバー、両方でEasyFancyboxのみを有効化した状態でhead内の要素を確認してみると、サーバー側の方はどうやら固定でjQueryのv2.2.4が読み込まれているようでした。

【ローカル】

<link rel="dns-prefetch" href="//ajax.googleapis.com">
〜〜〜〜
<link rel="stylesheet" id="fancybox-css" href="https://local_example.com/wp-content/plugins/easy-fancybox/css/jquery.fancybox.1.3.23.min.css" type="text/css" media="screen">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【サーバー】

<link rel="dns-prefetch" href="//ajax.googleapis.com">
〜〜〜〜
<link rel="stylesheet" id="fancybox-css" href="https://example.com/wp-content/plugins/easy-fancybox/css/jquery.fancybox.1.3.23.min.css" type="text/css" media="screen">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

恐らくWordPressのjQueryではなく別に古いver.を読み込んでいると思われることが動作しない原因なのではないかと思っているのですが、当方初心者ゆえ修正の仕方が分かりません。

ちなみにChrome、Safari両方で検証すると以下のようなアドセンスのエラーやWarningが出ています。こちらも動作しない原因となるのでしょうか？（コンフリクトしているのでしょうか？）

ソース情報が足りていなかったら申し訳ございません。
他に必要なソースなどの情報がございましたら、ご提示いただいたら随時追記していきます。
最悪サイトアドレスを公開することも考えております…。
引き続き自分でも調べておりますが、様々な情報で混乱してきており…。どなたかご教授いただけますと幸いです。
よろしくお願いいたします。

【追記】
情報追加と修正依頼をいただきましたので、サイトのアドレスを開示させていただきます。
よろしくお願いいたします。
https://nicchu_media.com/

【2018.12.30追記】
フッターあたりにjQueryを読み込む$関数が記述されているのを確認しました。こちらがコンフリクトして動作しない原因となっているのでしょうか？
どこから記述されているのかと修正方法がまだ分からないので、引き続き調べてみます。

Comments

[退会済みユーザー]

最悪とか言わずとっとと開示した方が回答者も質問しなくて済むので楽だが？

[yk_yyy]

こういうのは質問板での開示はすべきかどうか迷っていたのですが、やはり開示したほうが良いのでしょうか。
その辺も良し悪しもまだ理解しきれておらず…すみません。開示しておきます。

[CHERRY]

> ちなみにChrome、Safari両方で検証すると以下のようなアドセンスのエラーやWarningが出ています。こちらも動作しない原因となるのでしょうか？（コンフリクトしているのでしょうか？）

全体が分からないので判断できませんが、Warning はともかく JavaScript のエラーは、影響している可能性があります。

[CHERRY]

お使いの WordPress のバージョンやお使いのテーマは何でしょうか？

[Lhankor_Mhy]

サイトのURLが間違っているかと思います。
こちらですか？
https://nicchu-media.com/

[yk_yyy]

アドレス記述ミス申し訳ありません。
最後に/有りです。

WordPressのバージョンは5.0.2、現在使用しているテーマはSANGO、旧テーマはSTORKです。

[KazuhiroHatano]

javascriptは処理つまづいたらそこで止まるけんね
コンソールのエラー見る感じやとshow_ads_impl.jsが
二回読み込まれてんじゃないか疑惑なんやけどね

[yk_yyy]

show_ads_impl.jsはアドセンスの読み込みファイルのことなのでしょうか？(違っていたら申し訳ないです)
一回アドセンス全部外してみようと思いますが、この感じだとアドセンスの作り直しも必要でしょうか？

[KazuhiroHatano]

一回だけ読み込めばいいだけのjsを２回読み込んじゃってるんじゃないかという疑惑
アドセンスの設置の仕方をどうやってるのかはわかんないけど
同じjsを読み込んでるscriptが複数いるなら一つだけ残してあとのscriptタグは削除

[yk_yyy]

なるほど…ありがとうございます。
アドセンスは基本Advanced adsで設置していて、スニペットコードをそのままカスタムHTMLで貼り付けているところもあります。
ただ、Advanced adsの前はAdSense managerを導入していたので、もしかするとそのデータなどがまだどこかに残ってしまっているのかもしれません。
一度アドセンス周りを見直してみます。
状況が変わり次第またこちらにてご相談させてください。

[yk_yyy]

Advanced adsとアドセンスコードを全て削除したらエラーなどは無事無くなったのですが、依然としてEasyFancyboxは動かないままです…。
こうなるとやはり読み込まれているjQueryの旧バージョンが濃厚でしょうか？

[yk_yyy]

プラグイン全て停止してみましたが、head内タグを確認してみたところ旧バージョンが記述されているままでした。
WordPress本体のjQueryはwp_head()で読み込まれているとの情報は得ていて、もしかするとEasyFancyboxが旧バージョンのjQueryでは動かない可能性も高く、ややこしいのでいっそ旧バージョンのタグを消したいところです…。
しかしどこで記述した(された？)のかも分からないため、削除、修正方法も分からず…。

[KazuhiroHatano]

素直にwp_deregister_scriptでwpのデフォルトのjqueryを外してるならまあ
検索すりゃすぐ見つかるんでしょうが、直でグローバル変数をいじくったりとか
素直にやってないやつも結構いるのですよね

そんな時はQuery Monitor
https://wordpress.org/plugins/query-monitor/
Hooks & Actionsの項目で、どこのタイミングでどこからどんな処理がされたかわかります

[yk_yyy]

導入して使い方などと一緒に見て該当しそうな箇所を見てみましたが肝心の調べ方が分かりませんでした…。すみません、もう少し勉強します。

改めてローカルとサーバーを見比べて見たのですが、気づけばローカルもv2.2.4になっていました。試しにローカルにアドセンスを貼り付けると、サーバーと同じエラーが出ており、けれどEasyFancyboxは動きました。この感じだとアドセンスとjQueryのバージョンは関係なさそうですかね…。
ややこしい話で申し訳ないです。

Answer 1

jQueryのバージョンは無関係のようです。1.12.4でも2.2.4でも動作しました。
また、JSに関するエラーも出ていないようなのでコンフリクトしているわけでもないようです。

試しに手元の環境でEasy FancyBoxを使用したところデフォルトの設定でフッターに吐き出される画像に関するコードは以下のようになっていました。

/* IMG */
var fb_IMG_select='a[href*=".jpg"]:not(.nolightbox,li.nolightbox>a),area[href*=".jpg"]:not(.nolightbox),a[href*=".jpeg"]:not(.nolightbox,li.nolightbox>a),area[href*=".jpeg"]:not(.nolightbox),a[href*=".png"]:not(.nolightbox,li.nolightbox>a),area[href*=".png"]:not(.nolightbox),a[href*=".webp"]:not(.nolightbox,li.nolightbox>a),area[href*=".webp"]:not(.nolightbox)';
jQuery(fb_IMG_select).addClass('fancybox image');
var fb_IMG_sections=jQuery('.gallery,.wp-block-gallery,.tiled-gallery');
fb_IMG_sections.each(function(){jQuery(this).find(fb_IMG_select).attr('rel','gallery-'+fb_IMG_sections.index(this));});
jQuery('a.fancybox,area.fancybox,li.fancybox a').each(function(){jQuery(this).fancybox(jQuery.extend({},fb_opts,{'transitionIn':'elastic','easingIn':'easeOutBack','transitionOut':'elastic','easingOut':'easeInBack','opacity':false,'hideOnContentClick':false,'titleShow':true,'titlePosition':'over','titleFromAlt':true,'showNavArrows':true,'enableKeyboardNav':true,'cyclic':false}))});};
jQuery('a.fancybox-close').on('click',function(e){e.preventDefault();jQuery.fancybox.close()});
};

しかし、貴方のサイトを確認すると画像に関するコードは以下だけでした。

/* IMG */
jQuery('a.fancybox,area.fancybox,li.fancybox a').each(function(){jQuery(this).fancybox(jQuery.extend({},fb_opts,{'transitionIn':'elastic','easingIn':'easeOutBack','transitionOut':'elastic','easingOut':'easeOutBack','opacity':true,'hideOnContentClick':true,'titleShow':false,'titlePosition':'over','titleFromAlt':false,'showNavArrows':true,'enableKeyboardNav':true,'cyclic':false}))});

原因は判りませんがEasy FancyBoxの設定を見直すなりプラグインをインストールし直すなりしてみてください。
また、WP Fastest Cacheを使用しているようなので試しにEasy FancyBoxが正常に動作するまで無効化してみてください。

Comments

[yk_yyy]

WP Fastest Cacheを停止して、念の為削除済みの競合しそうと思われるプラグインのデータベースと共にEasy Fancyboxのデータベースも削除してからEasyFancyboxを入れ直して設定したら無事動作するようになりました…！（少々展開時にカクつきますが）
フッターに記述されるコードもちゃんとjQuery(easy_fancybox_auto);までありました。WP Fastest Casheをその後有効化しても問題ありませんでした。
設定が正常に反映されていないままだったゆえに他のFancyboxも動作しなかったのでしょうか…。

$関数スクリプトは残ったままで結局どこから来ているのか特定できませんでしたが、コンフリクトはしていないとのことなので、とりあえずそちらは様子見でいこうと思います。
なんとか年内に解決できて心底ほっとしています…。
アドバイスいただき本当にありがとうございました！