WordPress

WordPressでjQueryを使用する際の読み込み方法を解説

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でコードが動かないときは以下の2パターンが想定されます。

  • wp_head()の前にjQueryのコードを書いている
  • セレクタ指定の前が$になっている

コードが間違っていないにも関わらず、WordPressで作ったページでjQueryのコードが読み込みされていなかった場合は2点を確認することで、解決する可能性が高いので、まずチェックすることをおすすめします。

まとめ

WordPressでjQueryを使用する際の読み込み方法を解説しました。WordPressは独自のルールも多く、外部ファイルを読み込んだり、CSSやjQueryなどのコードを使う際には動かなくて困ることが多々あります。

しかし、使い慣れてしまえばWordPressほど簡単にwebページを作れるCMSはありません。WordPressでjQueryを使う方法を覚えておくことをおすすめします。