Q&A
念のため確認したい点がありますが、jquery-2.1.4.min.jsを追加する前も、
ページのソースコード上で3系のjQueryの読み込みは確認できているのでしょうか？
お世話になります。
WordPressのバージョンを5.6にアップデートしたところ、jQueryのバージョンも３系統になり、追加しているjQueryの機能が動かなくなってしまいました。
jQuery
1// ドロップダウンメニュー 2jQuery(function($) { 3 // #navi直下のli要素をマウスオーバー 4 $("#navi ul").children("li").hover(function(){ 5 // 下層メニューの表示を切り替える 6 $(this).children("ul").stop().slideToggle(100); 7 }); 8}); 9 10// トップへ戻るボタン 11jQuery(function($) { 12 var pagetop = $('.pagetop'); 13 $(window).scroll(function () { 14 if ($(this).scrollTop() > 100) {n 15 pagetop.fadeIn(); 16 } else { 17 pagetop.fadeOut(); 18 } 19 }); 20 pagetop.click(function () { 21 $('body, html').animate({ scrollTop: 0 }, 500); 22 return false; 23 }); 24});
Googleのコンソールでエラーを見たところ、
jQuery
1// トップへ戻るボタン 2jQuery(function($) { //Uncaught ReferenceError: jQuery is not defined
上記にはエラーが表示されています。
エラー内容：
style.js?ver=5.6.2:2 Uncaught ReferenceError: jQuery is not defined at style.js?ver=5.6.2:2
jQueryのバージョンを、jquery-2.1.4.min.jsをhead前に追加すると問題なく全て動きます。
</head>タグの前にjquery-2.1.4.min.jsを読み込んだあと、jQuery3系が読み込まれています。 ```HTML <script type='text/javascript' src='https://URL/wp-includes/js/jquery/jquery.min.js?ver=3.5.1' id='jquery-core-js'></script> <script type='text/javascript' src='https://URL/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script> </head> ```HTML
1<html lang="ja"> 2<head> 3<meta charset="utf-8"> 4 5<script src="<?php echo get_template_directory_uri() ?>/js/jquery-2.1.4.min.js" type="text/javaScript" charset="utf-8"></script> 6 7<?php wp_head(); ?> 8</head> 9<body>
ドロップダウンメニューとページトップへ戻るHTML。
HTML
1<body> 2<nav> 3 <div id="navi"> 4 <?php 5 $args = array( 6 'menu' => 'gnav',//メニュー名 7 'container' => false,//タグ削除 8 ); 9 wp_nav_menu($args); 10 ?> 11 </div> 12</nav> 13 14 <p class="pagetop"><a href="body">▲TOP</a></p> 15 16 </body>
CSS
1/* ドロップダウンメニュー 2-------------------------------------*/ 3#navi ul ul { 4 display: none; 5 position: absolute; 6 width: 250px; 7 z-index: 100; 8 background-color: #006ec8; 9} 10#navi ul ul a { 11 color: #fff; 12} 13 14@media screen and (max-width: 768px){ 15.header { 16 flex-direction: column; 17 margin-bottom: 0; 18} 19.logo { 20 margin-right: auto; 21} 22 23nav ul { 24 flex-flow: row wrap; 25 justify-content: space-between; 26} 27nav li { 28 flex: 0 0 50%; 29} 30 31.header li { 32 padding-top: 0; 33} 34} 35 36/*トップへ戻るボタン 37-------------------------------------*/ 38.pagetop { 39 display: none; 40 position: fixed; 41 bottom: 10px; 42 right: 25px; 43} 44.pagetop a { 45 display: block; 46 background-color: #001965; 47 text-align: center; 48 color: #fff; 49 font-size: 12px; 50 text-decoration: none; 51 padding: 10px 15px; 52} 53.pagetop a:hover { 54 display: block; 55 background-color: #001965; 56 text-align: center; 57 color: #fff; 58 font-size: 12px; 59 text-decoration: none; 60 padding:10px 15px; 61 -moz-opacity: 0.8; 62 opacity: 0.8; 63}
何かがjQuery3に対応していないのかと思いますが、どこがいけないのかが分かりません。
何が悪いのか分かりますでしょうか？
よろしくお願い致します。
【※2月27日 解決しました。追記です。】
jQueryのバージョンに問題はなく、読み込みの順番で動作していなかったのが原因でした。今後の参考までに記載致します。
functions.phpに下記コードを追記して、head直前に表示されるように追記していました。
PHP
1<?php 2//追加CSS JSファイル読み込み 3function theme_scripts() { 4 wp_enqueue_style( 'add-style', get_stylesheet_directory_uri().'/css/add.css' ); 5 wp_enqueue_style( 'style', get_stylesheet_uri()); 6 wp_enqueue_script( 'style-js', get_template_directory_uri().'/js/style.js'); 7} 8add_action( 'wp_enqueue_scripts', 'theme_scripts' ); 9?>
実際のHTMLの表示では、なぜかWordPress本体のjQueryが一番後に読み込まれていました。
同じ書き方をしている、同じWordPressバージョンの他のサイトでは先に読み込まれるので、謎です。
HTML
1<head> 2<script type='text/javascript' src='https://URL/wp-content/themes/テーマ名/js/style.js?ver=5.6.2' id='style-js-js'></script> 3<script type='text/javascript' src='https://URL/wp-includes/js/jquery/jquery.min.js?ver=3.5.1' id='jquery-core-js'></script> 4</head>
取り急ぎ、</head>直前に同じjQuery３系をダウンロードして直書きすることで解決しました。
これでしばらく様子を見てみます。
HTML
1<head> 2<script src="https://URL/wp-content/themes/テーマ名/js/jquery-3.5.1.min.js" type="text/javaScript" charset="utf-8"></script> 3<script type='text/javascript' src='https://URL/wp-content/themes/テーマ名/js/style.js?ver=5.6.2' id='style-js-js'></script> 4</head>
ありがとうございます！
</head>前にjquery-2.1.4.min.jsを追記すると、
ソース上はこれを読み込んだあとに、3系のjQueryが読み込まれています。
上記質問欄に追記しました。
ドロップダウンメニューとトップへ戻るボタンのコードは、どこに書かれていますか？
失礼しました。ドロップダウンメニューとトップへ戻るボタンは
<body>〜</body>タグ内に記載しています。
質問欄のHTMLに追記しました。
確認・追記ありがとうございます。追加で質問すみません。
// トップへ戻るボタン の中の
↓この行の最後についているnは、今回のエラーとは多分関係ないと思うのですが、実際には入っていないnでしょうか？
```
if ($(this).scrollTop() > 100) {n
```
ついている状態だと『 Uncaught ReferenceError: n is not defined』のエラーが出るかと思いまして。
大変失礼いたしました。
転記の際にうっかりnを入力してしまったようです。ありがとうございます。
質問のコードのみ抜粋して、もう一度ドロップダウンメニューとトップへ戻るタグを記載したところ、jQuery3系でも動きました。
どうやら原因は他にあるようですが、まだつかめておりません。
FacebookのタイムラインやYouTubeの埋め込みが原因かと思ったのですが、これも違うようです。
判明しましたら記載いたします。どうもお騒がせいたしました。
ありがとうございます！
古いjQueryをサポートしてくれるプラグインがあるのですね。これは知りませんでした。
あれこれ試して、ようやく原因が分かりました。jQueryのバージョンが原因ではございませんでした。jQueryの読み込みの順番が問題で動作していなかったです。お手数おかけしました。
これから記載致します。
回答1件
0
自己解決
すみません、自己解決しました。
jQueryのバージョンが原因ではなく、WordPress本体のjQueryより追記したコードが先に読み込まれているのが問題でした。全てjQuery3系でも動作しました。
functions.phpに読み込みのコードをまとめて記載しているのですが、なぜか一番後にWordPress本体のjQueryが読み込まれてしまうので、</head>直前にjQuery3系をダウンロードして直接読み込むことで解決しました。
どうもお騒がせ致しました。ご丁寧にコメントくださった皆様、どうもありがとうございます。
投稿2021/02/27 07:43
総合スコア18
スクリプトは wp_enqueue_script() で管理することをオススメします。依存関係をコントロールできますし、一元管理する方が未来の自分が把握しやすいです。
ご丁寧にありがとうございます。
そうですね、functions.phpに全てまとめるほうが後々何かエラーがあった時に混乱しなくて済みそうです。
一旦、WordPress本体のjQuery読み込みを止めてから、同じバージョンのjQueryを読み込んでみます。
あなたの回答
tips
プレビュー
