ワードプレスでjQueryが読み込めないとき

ホームページの修正をしていたら、急にslickが読み込めなくなった！なぜ？

ワードプレスでjQueryが動作しないとき

どうも、ワードプレスに同梱されている、jQueryと競合してしまったようです。

ワードプレス同梱のjQueryを消すとき

ワードプレス同梱のjQueryの消し方。

<?php wp_deregister_script( 'jquery' ); ?> 

<?php wp_head(); ?> 

<?php wp_deregister_script( 'jquery' ); ?> 

<?php wp_deregister_script(‘jquery’); ?>　これを　<?php wp_head(); ?>　より前に書くと、ワードプレス同梱のjQueryを読み込みません。

でも今まで、普通に読み込めてたのに、なぜ急に読み込めなくなったのだろう？

そういえば作業していたとき、<?php wp_head(); ?>　がうまく読み込まれてなかったので、修正しました！きっとそれが原因です。

ワードプレス同梱のjQueryを読み込むとき

逆に、ワードプレス同梱のjQueryを読み込むときは、<?php wp_enqueue_script(‘jquery’); ?>　を　<?php wp_head(); ?>　の前に書きます。

<?php wp_enqueue_script( 'jquery' ); ?>
<?php wp_head(); ?>

参考サイト　https://goodsan.jp/wp/wordpressjquery/

jQueryのコードを調整する

jQueryのコードも、そのままでは読み込まないため、少し調整する必要があります。

コード全体を　　jQuery(function($){ 　}); で囲みます。

$(function() {　で囲っている部分を　jQuery(function() {　に書き換えます。

jQuery(function($){
    var $nav   = $('#navArea');
    var $btn   = $('.toggle_btn');
    var $mask  = $('#mask');
    var open   = 'open'; // class
    // menu open close
    $btn.on( 'click', function() {
      if ( ! $nav.hasClass( open ) ) {
        $nav.addClass( open );
      } else {
        $nav.removeClass( open );
      }
    });
    // mask close
    $mask.on('click', function() {
      $nav.removeClass( open );
    });
  });

参考サイト　https://briarpatch.co.jp/wp-jquery　

その他の要因

そのほか、動作しなかったとき。私の場合　<?php wp_footer(); ?>　の記述を忘れてたときも、動作しませんでした。scriptのコードもそこに書いてるので、動作しないのは当たり前ですね・・

あと管理画面バーも　<?php wp_footer(); ?>　の記述がないと、表示されないようです。もしバーが出てないときは、確認した方がよさそうです。

まとめ

jQueryが動作しないときの、確認事項。

headタグ内に、同梱のjQueryを読み込むか、読み込まないかのコードを書く。

jQueryのコードを書き換えて調整する。

footerがちゃんと読み込まれてるか確認する。