多くの人がjavascriptをネットで公開しているのですが、jQueryを使ったJavascriptをWordpressでそのまま適用すると$がエラーになって動かないことが多いです。
そもそも、検証ツールのコンソールを使わないとJavascriptのエラーがあるのかどうかもわからないので、初心者は動かなくて悩むのではないか、とおもいます。
最近、jQuery離れが進んでおりますが、個人的にはjQueryで開発スピードが上がるのであれば、デメリットよりもメリットの方が大きいと思っています。jQueryだからダメとかダサいというのはちょっと違うのではと思っています。
この記事ではWordpressでjQueryのスクリプトを使う時に$のエラーを回避する時の方法をまとめておきたいと思います。
WordPressでは、$はjQueryのショートカットではない
WordPressには、Compatibility modeというのがあって、$をjQueryのショートカットとして使えないようになっています。
対処方法１：$をjQueryに置き換える
これは一番単純な方法ですが、ソースコードが汚くなってしまうので、出来れば避けたい方法です。そもそも、そうしたくないからjQueryを$に置き換えているわけですから。
/* Regular jQuery */
$('.hideable').on('click', function() {
$(this).hide();
})
/* Compatibility Mode */
jQuery('.hideable').on('click', function() {
jQuery(this).hide();
})対処方法２：jQuery Stealth Modeを使う
対策としては、こちらが本命になるとおもいます。
jQueryのスクリプト全体を囲むことで、$をそのまま使うことができるようになります。
どちらを使っても同じ効果が得られますが、無名関数の方が見た目はスッキリします。
無名の即時関数で囲む
もともと、jQueryのスクリプトに、$(document).ready(function(){が無い場合、この方法がおススメです。
(function($) {
$('.hideable').on('click', function() {
$(this).hide();
})
})( jQuery );document-ready functionで囲む
もともと、jQueryのスクリプトに、$(document).ready(function(){がある場合、書き換えれば済むので、この方法がおススメです。
これは画像などを除いて、HTML=DOMの読み込みが終わったらfunction()の中の処理(=なにかしらの処理)を実行するという意味です。
jQuery(document).ready(function( $ ) {
$('.hideable').on('click', function() {
$(this).hide();
})
});対処方法３：“No Conflict” Modeを使う
$の代わりに使う記号を指定することで、jQueryと書かなくても$の様な記号を使うことができます。
自分でスクリプトを書く場合には、使える方法だと思います。
この方法で、既にあるスクリプトの$を置き換えてエラーを回避するというのはjQueryに置き換えても同じなので、あまりよい方法ではないかなと思います。
var $j = jQuery.noConflict();対処方法4：$を使えるようにする
WordPressに同梱されているjQueryを使用しているための制限なので、CDNなど他のjQueryを読み込むことで、$を使えるようになります。
まとめ
Bootstrap5ではjQueryは使われなくなるようですが、ちょっとしたスクリプトを書くときや、jQueryのプラグインを使うのは、今後もしばらく無くならないと思いますので、WordpressでjQueryが動かない時には、上記の方法で対処できると思います。
