wordpressでjqueryが動かない場合の覚書。jQuery.noConflict();が原因
wordpressでjqueryが動作しない問題があったので覚書。
症状は、
wordpressでjqueryを使って開閉トグルを設置しようとしてました。
以下のスクリプトをテンプレートに記述しました。
<script>
$(function() {
$("#slide_btn").click(function(){
$(this).toggleClass("active");
$("#slide_box").slideToggle("fast");
});
});
</script>開閉トグルはこちらの記事を参考にしました。
jQueryを使った開閉式スライドトグル＆フェードトグル（slideToggle, fadeToggle） | Diglog
wordpressではすでにjqueryはヘッダで読み込まれているので、上記スクリプトとhtml,cssの編集を行えば動作するはずです。
ですが、動作してくれませんでした。
バージョンの問題かなと思いましたが、それも解決できていました。
あとは、読み込み順が問題かなと思い、スクリプトの上に直書きしても動作しません。
その時点で読み込まれていたjquery
https://hogehoge.jp/wp-includes/js/jquery/jquery.js?ver=1.12.3バージョン1.12.3が読み込まれています。
jqueryのものと一旦比べてみました。
https://code.jquery.com/jquery-1.12.3.min.jsすると、一番下の行だけ違いました。
jQuery.noConflict();wordpressには、これが追記されています。
これを削除してアップロードすると動作しました。これが原因です。
wordpressのjqueryはコアファイルになるので、バージョンアップデートで上書き変更されてしまう可能性があるので、この行を削除していてもんまた動作しない状況になってしまいます。
対処法
スクリプトを以下の書き方に変更することで動きました。jqueryに変更はなしです。
<script>
(function( $ ) {
$(function() {
$("#slide_btn").click(function(){
$(this).toggleClass("active");
$("#slide_box").slideToggle("fast");
});
});
})(jQuery);
</script>(function( $ ) {
/ ここでは、$関数はjQueryオブジェクトとして動作する
})(jQuery);
で囲むことで、内包する部分にだけ$が使える。