ブログ

BLOG

CATEGORY

Jqueryが読まれないていないような挙動。

既存サイトの改修作業中に、Jqueryで動作している要素、例えば、スムーズスクロールやスマホのハンバーガーメニューが動かなくなる。

  1. 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' );
    ?>
  2. Jquery本体の読み込むコードをheader付近からfooterへ移動しても変わらない
  3. chromeの要素の検証のconsoleでは、中身が空のJSファイルの開始タグ($(function(){});)の所で既にエラーが発生
    どうもJquery本体が読み込まれていないような感じ
  4. 処理を書いているcommon.jsをソースで確認する限りではエラーは発生していない
  5. 処理を書いているcommon.jsなどの中身を完全に空にするとchromeの要素の検証のconsoleでのエラーは消える

最近やったこと

  1. CSSファイルの若干の調整
  2. WordPressテーマの一部修正
  3. サイト全体の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: の文字列を消します。