Webページに動きをつけるためにはjQueryを使います。jQueryはJavaScriptのライブラリで、簡単なコードでDOM操作を行うことができます。WordPressもjQueryを使用することができます。ランディングページやコーポレートサイトを作る場合には、動きをつけたいことがたくさんあると思います。
WordPressでjQueryを使用するにはWordPressに内蔵されたjQueryを使うか、自分で読み込んだものを使うかの2通りがあります。本記事ではWordPressでjQueryを使用する際の読み込み方法について解説します。
動かないときの注目ポイントやHTMLファイルで読み込むときの違いも解説しています。
WordPressでjQueryの読み込み方法
WordPressはjQueryを内蔵している
WordPressでは初めからjQueryがデフォルトで用意されています。とはいえ、無条件に使えるわけではなくて、header.phpにWordPressを利用するためのコードを書く必要があります。jQueryの読み込みコードは以下です。
<?php wp_enqueue_script(“jquery”); ?><?php wp_head(); ?>WordPressに内蔵されているWordPressを使う場合、WordPress用の使用になっているので、使い勝手が少し違います。
バージョンの指定があった場合
Web制作の案件で客先よりjQueryのバージョンを指定される場合があります。そんなときにはjQueryのCDNを使いましょう。header.phpで以下のコードを書きましょう。書く位置はwp_head()の前です。(WordPressのjQueryを削除する必要があるため）
<?php
wp_deregister_script(‘jquery’); /WordPressのjQueryを削除
wp_enqueue_script(‘jquery’, ‘読み込むjQueryのsrc’, array(), ‘バージョン’); /jQueryの読み込み
?>第二引数にはjQueryをCDNで読み込む際のjsファイルを記述します。下記のコードの太字部分です。
<script><src="https://code.jquery.com/jquery-3.6.0.js"></script>jQueryのコードの書く位置
jQueryのコードを書く位置はwp_head();より後ろに書きましょう。おすすめの位置はfooter.phpの</body>の前です。wp_head();でWordPressを読み込んでいるので、前に書いてしまうとコードが動かないので気をつけましょう。
HTMLでの読み込みとの違い
CDNのコードを直接書き込まない
WordPressでは<HEAD>タグ内または</body>の前に公式ページにあるCDNのコードをそのままコピー、ペーストしてもうまく動かないことがあります。HTMLでは<HEAD>または<body>に公式ページのCDNのコードを直接書けば、動きます。
WordPressでjQueryを使う場合は必ず専用のphpのコードを記述する必要があります。ちなみに、CSSも同様で、<style>に直接書いたり、<link rel = “stylesheet” href=”style.css>で読み込もうとしても読み込みません。
href =”<?php echo get_stylesheet_uri(); ?>”という専用のコードが必要となります。CSSについても一緒に覚えておくことをおすすめします。
＄が使用できない
HTMLで使うときの基本構文は以下の通りです。
$(“セレクタ”).メソッド();
WordPressにおいて上の基本構文ではコードは動きません。WordPressで動かすためには、以下の構文になります。
jQuery(“セレクタ”).メソッド();$がjQueryになります。ここでQは大文字であることに気をつけて下さい。WordPress独特の表現になるので、注意してください。もし、$を使いたい場合はセレクタごと変数に代入すれば可能です。
しかし、代入するならば、もっとシンプルな変数を設定する方が、開発効率が上がるので、あまりおすすめしません。
WordPressでjQueryのコードが動かない
WordPressでコードが動かないときは以下の２パターンが想定されます。
- wp_head()の前にjQueryのコードを書いている
- セレクタ指定の前が$になっている
コードが間違っていないにも関わらず、WordPressで作ったページでjQueryのコードが読み込みされていなかった場合は２点を確認することで、解決する可能性が高いので、まずチェックすることをおすすめします。
まとめ
WordPressでjQueryを使用する際の読み込み方法を解説しました。WordPressは独自のルールも多く、外部ファイルを読み込んだり、CSSやjQueryなどのコードを使う際には動かなくて困ることが多々あります。
しかし、使い慣れてしまえばWordPressほど簡単にwebページを作れるCMSはありません。WordPressでjQueryを使う方法を覚えておくことをおすすめします。
