jQueryが動かない時の対処:WordPress

 

ぼくのブログは、10個ほどプラグインを導入しています。

複数のプラグインが干渉しjQueryや他のスクリプトが正常に動作ませんでした。

 

僕の場合は「CrayonSyntaxSettings is not defined」がコンソールに表示され、

jQueryがうまく動作しませんでした。

 

今回は試行錯誤してうまく動作したのでその対処方法を記事にします。

 


CrayonSyntaxSettings is not definedの対処


 


ソースコード投稿する際に必要なプラグイン「Crayon Syntax Highlighter」を利用しています。


付属しているjQueryと干渉し、うまく動作しませんでした。


 


メニューの設定から


Crayon→ その他 → Load scripts in the page footer using wp_footer() to improve loading performance.


にチェック


 


Crayon Syntax Highlighter,jquery,問題


 


Crayonが利用するスクリプトをwp_footer()で導入することにより、


正常にjQueryがロードされエラーが解決できました


 


最適化プラグインとの干渉


 


最適化プラグイン「WP Minify」や「Autoptimize」を利用しています。


java scriptの最適化時、スクリプトが干渉し動作しませんでした。


最適化のチェックを外しうまく動作することを確認できています。


 


※チェックを外す際は一気に外すのはオススメしません。


疑われるプラグインのチェックを一つづつ外し、原因を探ることをオススメします。


 


jQueryの$の干渉


 


無名関数を利用することによって、他で定義されている$との干渉が避けることができます。


jQueryを利用時にはお試しあれ。


(function($) { //無名関数の利用
  $(function() { //DOMが読み込まれてから実行
  // 処理を記述
  });
})(jQuery);


 


スクリプトのロードはwp_head()より下に


 


各スクリプトのロードはwp_head()の下に記述してください。


wp_head()より上に配置されているとうまくロードされません。


 


jQueryの有効化


 


そもそもjQueryが有効になってない場合があります。


function.phpに下記を導入してください。


initの関数にフックされ、WordPress付属のjQueryが動作します。


 

function load_script(){

  wp_enqueue_script(‘jquery’);

}

add_action(‘init’, ‘load_script’);


 


最後に


 


WordPressでブログを運用している方は必ずjQueryやスクリプトのロードに悩まされます。


ロードタイミングを変えるなどして、一つずつ問題に対処すればきっと解決できます。


問題の解決になれば嬉しいです。


 


今日もブログ読んで頂きありがとうございます。


comments powered by Disqus