WordPressをバックグラウンドで支えているのは数々のPHPプログラムですが、より見やすくより使いやすいサイトにするためにはJavaScriptの存在が必須になってきます。
そして「Write less, Do more」というキャッチフレーズを掲げている「jQuery」は、HTML要素の操作やアニメーションの作成においてかなり有用なJavaScriptのライブラリで、多くのWordPressサイトで利用されています。
そんなjQueryはライブラリなのでサイトに読み込まないと使えないわけですが、その読み込み方を間違っている方が非常に多いように感じますので、今回間違っている事例をいくつかあげつつ、正しいjQueryの読み込み方を紹介していきたいと思います。
jQueryはオワコン？
今更jQueryの記事を作ってるのかよと思った方は少なくないはずです。 それもそのはず、jQueryが一番最初に登場したのは2006年で、そこから長きに渡って愛されつつどんどんアップデートされていて、2018年以降は大きなアップデートはもうされず、完全に過去の技術になってしまっている感が否めない。
しかしながらjQueryは現在でも多くのサイトで愛用されており、日本ではおよそ7割のサイトが利用しているという情報があります。（引用元：https://feb19.jp/blog/20220904_jqueryreactvue）
また、WordPressに関していえばデフォルトでjQueryもインストールされていて（デフォルトで読み込まれるようになっているわけではないが）
WordPressフォルダの一つである「wp-include」の中に格納されていたりします。そして現在でも割と多くのプラグインがjQueryを使っており、使っている意識が無くてもほとんどのWordPressサイトで読み込まれているといっても過言ではないでしょう。
そのため、自分では頑張って生のJavaScriptだけで記述して軽量化を図っているつもりでも、実際はjQueryが裏で読み込まれているため必死こいて生のJSを使う意味はあまりないという状況になっている人が多いように感じます。
そのようにどうせ読み込まれているのであれば活用してしまった方がむしろソースコードが少なくなって済むので、ジャンジャン使って良いと思います。 それに、他のフレームワークやライブラリに比べてDOMの操作が直感でできたり、アニメーションが圧倒的に優秀だったりするので、jQueryはまだまだ使える技術かと思います。
なお、ここではあくまでもWordPressにおいての話であって、WPを使わずに1からWebアプリケーションを作ろうってなった時は、やはりNuxt.jsやNext.jsなどのフレームワークを利用するのが最近のセオリーにはなっていますね。
jQueryの誤った読み込み方
もちろん正しい読み込み方というのもこの後説明しますが、実に間違った読み込み方をしている人が多いように思えるので、その事例をいくつか紹介していきたいと思います。
scriptタグでの読み込み
<script type="text/javascript" src="~/jquery.js"></script>例えば投稿のテンプレートやヘッダーなどにこのような記述をして読み込んでいるパターン。外部JSファイルを読み込む方法として最も一般的な方法なのですが、WordPressにおいてはこの方法はあまり推奨されていません。
というのも、先ほど説明した通り、プラグインやテーマなどによって既にjQueryが読み込まれている可能性があるので、その上にこの技術をしてしまうと二重で読み込んでいることになって無駄に動作が重たくなってしまったり、プラグインの動作に支障をきたしてしまう可能性があります。
jQueryがもともと読み込まれていないサイトで、本当に一部のページでだけ読み込みたいとき等には有効かもしれませんが、基本的にこのようにして読み込むのは避けましょう。
他のハンドルネームで読み込み
WordPressでは直接HTMLにscriptタグを書いてJSファイルを読み込むことは非推奨とされていて、その代わりにWordPressの「enqueue_script」という関数を使ってスクリプトを読み込むことが推奨されています。 この関数を使うときにはURLと共にスクリプトのハンドルネームという一意の名前を記述するのですが、ハンドルネームがあることで重複して同じスクリプトがenqueueされていたとしても一回だけ読み込むようにWordPressが調節してくれるようになります。
そしてjQueryのハンドルネームはデフォルトで決まっていて、シンプルに「jquery」という名前です。
これを無視して他のハンドルネーム（例えばjquery-js）でenqueueしてしまうと結局重複読み込みにつながってしまうので意味がありません。
下のように、一度デフォルトのjqueryを削除して、自分で用意したjqueryを読み込ませるという手法もあるのですが、これはこれでjqueryバージョンの違いなどからプラグインの動作不良などを引き起こしてしまったりするので非推奨とされています。
function custom_script() {
wp_deregister_script('jquery');
wp_enqueue_script('jquery-js', '//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js' );
}
add_action('wp_print_scripts', 'custom_script');$で読み込み
これはjQueryを読み込んだ後、実際にコーディングするときの話になるのですが、jQueryオブジェクトを作るときに「$」を使うのはやめましょう。
$(function(){
//楽だが、やめた方が良い
});
jQuery(function(){
//適切
});基本的にjQueryでは「jQuery == $」であり、jQueryと記述しないといけないところはすべて$で置き換えることができるのですが、WordPressにおいては競合を起こさないようにデフォルトで$で呼び出せないようになっています。
これを知らないと$で読み込もうとしたときにjQueryが使えなくて、まだ読み込まれていないのかと勘違いして重複でjQueryを読み込んでしまうことになりかねません。
そのため、WordPress環境でjQueryを使うときは横着せずに、しっかりと「jQuery()」のように記述するように心がけましょう。
正しい読み込み方
さて、正しい読み込み方ですが、以下の記述をfunction.php等に書くだけです。
//jQuery読み込み
function loading_jquery() {
wp_enqueue_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'loading_jquery' );こうすることでWordPressに標準で組み込まれているjQueryを呼び出すことができます。 WordPress標準のjQueryは基本的に最新バージョンのjQueryとなっているので脆弱性等を気にする必要はあまりないでしょう。 なお、以前のバージョンのjQueryじゃないとうまく動作しない古いブラウザ等もあるわけですが、正直現在そういったブラウザのサポートを考える必要はないと思います。ほとんどのブラウザでしっかり最新版のjQueryが動作すると思っていただいて大丈夫かと思います。