Jqueryが読まれないていないような挙動。
2021.07.13 Tue
既存サイトの改修作業中に、Jqueryで動作している要素、例えば、スムーズスクロールやスマホのハンバーガーメニューが動かなくなる。
- Jquery本体を読み込む記述はちゃんと書かれている(古めのライブラリなのは一旦無視で)
<?php
wp_deregister_script( 'jquery' );
wp_enqueue_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', array(), '1.11.0' );
?> - Jquery本体の読み込むコードをheader付近からfooterへ移動しても変わらない
- chromeの要素の検証のconsoleでは、中身が空のJSファイルの開始タグ($(function(){});)の所で既にエラーが発生
どうもJquery本体が読み込まれていないような感じ - 処理を書いているcommon.jsをソースで確認する限りではエラーは発生していない
- 処理を書いているcommon.jsなどの中身を完全に空にするとchromeの要素の検証のconsoleでのエラーは消える
最近やったこと
- CSSファイルの若干の調整
- WordPressテーマの一部修正
- サイト全体のSSL化
原因
サイト全体のSSL化を行ったのに、Jqueryの本体の読み込みタグを下記のようにしていたことが要因
<?php
wp_deregister_script( 'jquery' );
wp_enqueue_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', array(), '1.11.0' );
?>
これを下記にようにすることで動くようになった。
<?php
wp_deregister_script( 'jquery' );
wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', array(), '1.11.0' );
?>
SSLサイトとそうでないサイト、どちらでも動くように、http: または https: の文字列を消します。