【簡単2STEP】WordPressでjQueryが動かない時の原因と対処方法を紹介します

 

こんにちは、たつき（@tatsuuu_227）です。

https://twitter.com/tatsuuu_227/status/1314115785166483456

先日、HTMLファイルからWordPressに移行（WordPress化）するにあたって、起きた以下の問題がおきました。

この記事では、この2つの解決方法とその他に覚えておいた方が良い事を紹介していきます。

案件でWordPress化していて表示されなかったら、とても焦りますよね

僕もとても焦ったので、そうなってしまう人の参考になれば幸いです

この記事を書いている僕は、毎日Web制作の学習をしつつ有益だと思う情報を発信してまとめています。

それでは、本題にいきます↓

WordPress移行時の正しいjQuery記述方法

僕が実際に案件でWordPressに移行作業をしていた時に、HTMLファイルだと正常に動いていた

jQueryが突然うごかなくなった時の原因と対処方法を紹介していきます

まず、本題のjQueryを動かすようにするとは関係ないことをまとめました↓

これらは記述方法としては正しいですが、今回のjQuery反映させる事とは関係ないです

また、前提としてパスの記述方法は合っていますか？

間違っている書き方

<script src="./js/script.js"></script>

正しい書き方

<script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>

<?php echo get_template_directory_uri(); ?>を使ってパスの指定をしていない場合はまずは、

その修正をしましょう！

＄をjQueryにする

WordPress化前

$(function(){

　　　jQueryのコード記述

  });

 

WordPress化後

先頭の「＄」を「jQuery」に書き直して（）内に「＄」を書く

中身の「＄」は変更しなくて大丈夫です！

jQuery(function($){

　　　jQueryのコード記述
　　　＄使ってOK

  });

 

Bootstrapの読み込みよりもあとにしましょう

もしBootstrapを使っている場合は、Bootstrapのファイルを読み込んでいる位置よりもあとにしましょう

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>

Bootstrapを読み込んでから、jQueryのCDNを読み込むようにします。

jQueryはこれで解決できましたか？

これで、jQueryの正しい記述方法になりました！

おまけ（WordPressのjQueryを読み込ませない方法）

jQueryが表示されない原因とは関係ありませんがおまけとして、紹介します

WordPressにはもともと備え付けのjQueryが読み込まれています

でも、自分で読み込む位置をしていたい時や他のJavascriptライブラリとのコンフリクトを避けるためにjQueryを読み込みたくないケースもあります。

そんな時はWordPressのjQueryを読み込ませない方法があります

functions.phpの一番下に以下のコードを記述します

function my_delete_local_jquery() {
　　wp_deregister_script('jquery');
}

add_action( 'wp_enqueue_scripts', 'my_delete_local_jquery' );

これで、備え付けのjQueryを読み込ませないことができます

まとめ

最後まで読んでいただきありがとうございます

今回は、WordPress化したら急に動かなくなったjQueryの対処方法をまとめていきました

この2つの修正だけで、jQueryが動くようになるはずです。

 

Twitterでは毎日の学習過程を記録・発信しているのでよかったらフォローすると喜びます

たつき（@tatsuuu_227）