質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
FancyBox

FancyBoxはウェブページ上の画像、HTMLコンテンツ、マルチメディアにズーム機能を加えてくれるツールです。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3310閲覧

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

yk_yyy

総合スコア13

FancyBox

FancyBoxはウェブページ上の画像、HTMLコンテンツ、マルチメディアにズーム機能を加えてくれるツールです。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2018/12/26 08:33

編集2018/12/30 12:49

最近サーバー移行とテーマ変更をしたのですが、移行前から動作しなかった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が出ています。こちらも動作しない原因となるのでしょうか?(コンフリクトしているのでしょうか?)
Chrome側
Safari側
Safari側

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/12/26 11:12

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

2018/12/26 17:50

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

2018/12/27 03:32

> ちなみにChrome、Safari両方で検証すると以下のようなアドセンスのエラーやWarningが出ています。こちらも動作しない原因となるのでしょうか?(コンフリクトしているのでしょうか?) 全体が分からないので判断できませんが、Warning はともかく JavaScript のエラーは、影響している可能性があります。
CHERRY

2018/12/27 04:33

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

2018/12/27 04:51

アドレス記述ミス申し訳ありません。 最後に/有りです。 WordPressのバージョンは5.0.2、現在使用しているテーマはSANGO、旧テーマはSTORKです。
KazuhiroHatano

2018/12/28 03:37

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

2018/12/28 03:44

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

2018/12/28 03:57

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

2018/12/28 04:39

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

2018/12/28 10:21

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

2018/12/28 10:38

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

2018/12/28 10:54

素直にwp_deregister_scriptでwpのデフォルトのjqueryを外してるならまあ 検索すりゃすぐ見つかるんでしょうが、直でグローバル変数をいじくったりとか 素直にやってないやつも結構いるのですよね そんな時はQuery Monitor https://wordpress.org/plugins/query-monitor/ Hooks & Actionsの項目で、どこのタイミングでどこからどんな処理がされたかわかります
yk_yyy

2018/12/28 16:13

導入して使い方などと一緒に見て該当しそうな箇所を見てみましたが肝心の調べ方が分かりませんでした…。すみません、もう少し勉強します。 改めてローカルとサーバーを見比べて見たのですが、気づけばローカルもv2.2.4になっていました。試しにローカルにアドセンスを貼り付けると、サーバーと同じエラーが出ており、けれどEasyFancyboxは動きました。この感じだとアドセンスとjQueryのバージョンは関係なさそうですかね…。 ややこしい話で申し訳ないです。
guest

回答1

0

ベストアンサー

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が正常に動作するまで無効化してみてください。

投稿2018/12/30 16:28

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yk_yyy

2018/12/31 07:34

WP Fastest Cacheを停止して、念の為削除済みの競合しそうと思われるプラグインのデータベースと共にEasy Fancyboxのデータベースも削除してからEasyFancyboxを入れ直して設定したら無事動作するようになりました…!(少々展開時にカクつきますが) フッターに記述されるコードもちゃんとjQuery(easy_fancybox_auto);までありました。WP Fastest Casheをその後有効化しても問題ありませんでした。 設定が正常に反映されていないままだったゆえに他のFancyboxも動作しなかったのでしょうか…。 $関数スクリプトは残ったままで結局どこから来ているのか特定できませんでしたが、コンフリクトはしていないとのことなので、とりあえずそちらは様子見でいこうと思います。 なんとか年内に解決できて心底ほっとしています…。 アドバイスいただき本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問