ワードプレスでjQueryが動かないときに確認すること

今回は、wordpressでjQueryが動作しないときのチェックポイントと対処法を紹介します。

以前、テンプレートを作成していたところ記述が反映されず、悩みに悩んだことがありました。

・ライブラリは読み込めている
・記述位置は問題ない（ライブラリの読み込みより後に記述している）

にもかかわらず、動かない！ということがありましたので、その際の解決方法を解説します。

記述漏れがあった
記述のミスがあった
1. ワードプレスでは$(function(){}); は使えない！
2. どうしてwordpressで $(function(){}); は使えないのか？

記述漏れがあった

jQueryの冒頭には、以下の記述が必要です。
HTMLの読み込みが終わってからこの記述の中のjQueryを実行してね、という処理です。うっかり書き忘れていました。

jQuery(document).ready(function(){
//ここに内容
}

jQuery(document).ready(function(){

//ここに内容

}

記述のミスがあった

ワードプレスでは$(function(){}); は使えない！

実は、ワードプレスでは「$(function()」という記述は使えません！

$(function(){
  //ここに内容
});

$(function(){

//ここに内容

});

以下のような記述であればOKです。

jQuery(document).ready(function($){
  //ここに内容
});
 
jQuery().ready(function($){
  //ここに内容
});
 
jQuery(function($){
  //ここに内容
});

jQuery(document).ready(function($){

//ここに内容

});

jQuery().ready(function($){

//ここに内容

});

jQuery(function($){

//ここに内容

});

どうしてwordpressで $(function(){}); は使えないのか？

そもそも当然のように登場している「$」とは何者なのでしょうか。
簡単に言うと、$ = jQueryです。

「$」は、javascriptにおいて変数名・関数名に使用されます。
jQueryも同様で、「$」という変数の中にjQueryが入っています。「$」がjQueryの機能を使えるようにしてくれているわけです。

では、ワードプレスの場合、なぜ「$」が使えないのか？？
それは、$ = jQueryとならず、「$」の中に他のjsが入っている可能性があるからです。

そのため、ワードプレスでは、「$」がどのライブラリ・jsの変数名となるか困らないように、「wp_head()」から出力されるjQueryは「$」とイコール関係にされていません。
初めから定義されていないから、いくら $(function(){}); と書いてもjQueryの機能は使えない。つまり「動かない！」となるわけですね。勉強になりました。

参考にさせていただきました。
https://cunelwork.co.jp/blog/web/wordpress%E3%81%A7%E3%81%AE%E3%83%80%E3%83%A1%E3%81%AAjquery%E9%96%A2%E6%95%B0%E3%81%AE%E5%9B%B2%E3%81%BF%E6%96%B94%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3/
https://qumeru.com/magazine/601