WordPressでjQueryを活用する方法：基本から実務例まで解説

CMS開発•
WordPressjQueryJavaScript

はじめに

WordPressにおけるjQueryの活用は、とてもシンプルに始められます。 WordPressは内部的にjQueryを同梱しているため、あらためて外部から読み込まなくても標準で利用できる環境が整っています。 しかし、実際にプラグインやテーマの開発を進めるなかで、どのタイミングや手順でスクリプトを読み込むのかがわからず混乱することがあるようです。 また、WordPressには独自の関数や仕組みが存在するので、それらを正しく理解しながらjQueryを扱わないと、不意にエラーが出たりバージョン競合を起こしたりしやすいのも事実です。 この記事では、jQueryをWordPressで使いたい皆さんがまず押さえておくべき基本的なポイントをまとめます。 併せて、noConflictモードの取り扱いや実務での具体的な例なども紹介するので、テーマカスタマイズやプラグイン開発を進める際の一助となるでしょう。 初心者の方でもわかるよう、難しい言い回しは極力避けて話を進めていきます。

この記事を読むとわかること

  • WordPressに標準で含まれるjQueryの基本的な使い方
  • スクリプトを正しく読み込むための手順
  • noConflictモードの仕組みと活用法
  • 実務で役立つjQuery活用例と具体的なコード
  • エラーを防ぐためのポイント

WordPressでjQueryを扱うメリット

WordPressでは最初からjQueryが用意されています。 そのため、新たにライブラリを追加する手間やバージョンを管理する苦労が少ない点が大きなメリットでしょう。 さらに、jQueryはDOM操作やアニメーション、Ajax処理などを簡潔に記述できるため、WordPressテーマやプラグインの機能追加でも活用しやすいです。 一方で、現在は純粋なJavaScript（Vanilla JS）の機能が充実してきたこともあり、jQueryを使わないケースが増えつつあります。 それでも既存のテーマやプラグイン、あるいは社内で蓄積されたリソースとの互換性を優先する場面では、jQueryが引き続き便利だと考えられます。 WordPress固有の「フック」や「アクション」を使う際には、jQueryを組み合わせてUIを調整するシーンも多いようです。 こうしたメリットを理解しておくと、jQueryを使うかどうかの判断材料として役立つのではないでしょうか。

jQueryを読み込む基本の方法

WordPressでjQueryを使う際には、単純に <script> タグを書く方法ではなく、wp_enqueue_scriptという専用の関数を使うのが基本です。 これはWordPressが持つ「依存関係」や「読み込み順序」の仕組みを利用するためであり、複数のスクリプトが衝突を起こさないようにする重要なステップです。

下記はテーマのfunctions.phpに記述して、jQueryを読み込みつつ自作のJavaScriptファイルを後から読み込む例です。

function my_custom_scripts() {
  // WordPress内蔵のjQueryを読み込む
  wp_enqueue_script('jquery');

  // 自作スクリプトをjQueryに依存する形で読み込む
  wp_enqueue_script(
    'my-custom-script',
    get_stylesheet_directory_uri() . '/js/my-script.js',
    array('jquery'),
    '',
    true
  );
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');

ここでポイントになるのは、wp_enqueue_scriptに依存するスクリプトのハンドル名（ここでは'jquery'）を正しく指定することです。 WordPressは、依存関係に応じてスクリプトを自動的に正しい順番で読み込むので、余計なトラブルが起きにくくなります。 一方で、<script src="...">のようにHTMLに直接書き込むと競合の原因になりがちです。 したがって、基本的にはWordPressの関数を活用しましょう。

WordPressには標準でjQueryが含まれていますが、テーマやプラグインによっては異なるバージョンを読み込んでしまうケースもあるようです。 複数のスクリプトが競合しないよう、依存関係を正しく指定して管理することが大切ですね。

noConflictモードとWordPress

WordPressでは、jQueryが他のライブラリと衝突しないようにnoConflictモードで動作するのがデフォルトです。 通常であれば、jQueryを使うときに「$」を使いたいところですが、WordPress環境下では「$」が使えない場合があります。 代わりに「jQuery」を利用するか、以下のようなコードでラップして「$」を使えるようにしましょう。

(function($){
  // ここで$をjQueryとして使用できる
  $(document).ready(function() {
    // 何かしらの処理
    $('.btn-open').on('click', function() {
      $('.menu').slideToggle();
    });
  });
})(jQuery);

このように即時関数を使うことで、関数内だけ「$」をjQueryとして扱えるようになります。 WordPress独自のセットアップの結果、グローバルには「$」が割り当てられないことが多いので、初心者はこの点で混乱するかもしれません。 しかし、実務でもよく使われる定番の書き方ですから、自然に習慣として身につけると良いでしょう。 複数のプラグインを使う場面でも衝突が起こりにくく、保守もしやすくなります。

プラグイン開発でのjQueryの組み込み

独自プラグインを作り、管理画面や投稿編集画面でjQueryを利用したいケースもあるのではないでしょうか。 たとえば、投稿編集画面にタブ形式のUIを追加したり、データをリアルタイムでチェックするアニメーション機能を組み込みたいときなどです。

プラグインでも基本的にやることは同じで、WordPress側が用意したアクションフックを使います。 以下のようにプラグインメインファイル（または別のPHPファイル）に記述すれば、管理画面用のスクリプトも正しいタイミングで読み込まれます。

function my_admin_scripts($hook_suffix) {
  // 特定の管理画面だけで読み込みたい場合には条件分岐も可能
  if ($hook_suffix === 'post.php' || $hook_suffix === 'post-new.php') {
    wp_enqueue_script('jquery');
    wp_enqueue_script(
      'my-plugin-script',
      plugin_dir_url(__FILE__) . 'js/my-plugin-script.js',
      array('jquery'),
      '',
      true
    );
  }
}
add_action('admin_enqueue_scripts', 'my_admin_scripts');

このようにadmin_enqueue_scriptsアクションを使うと、管理画面の特定ページだけでスクリプトを読み込むことが可能です。 投稿画面以外では必要ないスクリプトを読み込まないようにしておけば、動作が重くなるのを防げます。 現場では、必要に応じて細かく条件分岐を行い、不要なリソースを極力読み込まないよう配慮するとよいですね。

実務での具体的な利用シーン

WordPressにおけるjQueryの利用シーンは多岐にわたります。 よく見かけるシチュエーションとしては、フォームの動的制御やバナーのスライドアニメーション、タブ切り替え機能などが挙げられるでしょう。 たとえば、ユーザーがフォームの項目を入力するタイミングでバリデーションを行いたい場合にjQueryは手軽です。 イベントの監視や非同期通信（Ajax）もわかりやすい書式で記述できるので、フロントエンドの体験を手早く整えるのに役立ちます。

一方で、WordPressが発行するフック（do_action, apply_filters など）との連携をUIに落とし込む際にもjQueryが使われることがあります。 テーマやプラグインで処理した結果を画面上ですぐに反映し、ユーザーにわかりやすいビジュアルフィードバックを示したい場合などですね。 こうした動作をJavaScriptだけで書くと少しコード量が増えがちですが、jQueryなら短いコードで完結できる場面が多く、初心者にも理解しやすいと感じるかもしれません。 とはいえ、あまり機能を増やしすぎると複雑化してしまうので、最小限のコードで目的を達成する工夫も大切です。

よくあるエラーとトラブル対処

実務で意外と多いのが、jQueryのバージョン競合や読み込み順序に関するエラーです。 WordPress自体が同梱しているjQueryと、プラグインが別途読み込むjQueryが衝突すると、$関数が動作しなかったりエラーが大量に発生することがあります。 この場合は、プラグインやテーマから外部CDNなどを通じて読み込むjQueryを除外し、WordPress公式のjQueryだけを使用する設定に変えるのが一般的です。 たとえば、子テーマやプラグインのfunctions.phpで、余分に読み込まれているスクリプトをwp_deregister_scriptやwp_dequeue_scriptを使って解除することもできます。

また、JavaScriptが動かないときはブラウザの開発者ツールを使い、JavaScriptコンソールにエラーが出ていないかを確認すると早いでしょう。 スペルミスや変数のスコープ漏れなど、単純なミスで機能が動作しないケースも多いです。 WordPress特有のフックを正しく利用していないと、意図したタイミングでスクリプトが読み込まれないこともあるので注意が必要ですね。

特定のテーマやプラグインが独自にjQueryを読み込んでいる場合、一部のスクリプトが実行されなかったりイベントが無視されることがあります。 複数のライブラリを共存させる場合には、どれがいつ読み込まれるかを一度整理してから導入すると安全です。

パフォーマンスへの配慮

jQueryは扱いやすい反面、ファイルサイズや読み込みリソースが増える要因にもなり得ます。 WordPressテーマによっては、jQueryを含む多数のスクリプトを一挙に読み込むため、ページ読み込み速度が低下してしまうかもしれません。 特にスマートフォンやタブレットからのアクセスが多いサイトでは、表示速度の遅延がユーザー体験に大きく影響しやすいです。

そこで、たとえば以下のような配慮をすると良いですね。

  • 不要なプラグインは停止または削除する
  • 重複読み込みを避けるため、wp_enqueue_scriptで正しく依存関係を管理する
  • jQueryでしかできない処理かどうかを検討する（バニラJavaScriptで代替できる場合はそちらを検討する）

パフォーマンスの改善には多くの手法がありますが、jQueryの使い方を見直すだけでもサイトの速度に好影響を与えるケースはあります。 無暗にプラグインを導入してしまうと、バックエンドとフロントエンドの両方で管理が複雑化するため、コード量を必要最小限に抑えるのがおすすめでしょう。

まとめ

ここまで、WordPressでjQueryを使う基本的な方法と気をつけたいポイントを解説してきました。 WordPressには標準でjQueryが内蔵されているため、追加の設定なしで活用しやすい一方で、読み込みタイミングや依存関係に注意を払わないとバージョン競合や実行エラーが発生しやすいです。 テーマやプラグインを開発する際には、wp_enqueue_scriptで正しくjQueryを読み込み、さらにnoConflictモードへの理解を深めることで快適な開発を進められるでしょう。 また、パフォーマンスや複雑さを考慮して、必要な場面でのみjQueryを使う判断が必要になることもあります。 ぜひ、本記事の内容を参考に、目的や状況に応じてWordPressとjQueryを上手に組み合わせてみてください。

WordPressをマスターしよう

この記事で学んだWordPressの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

WordPressの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、WordPress テーマ開発講座」
CMS開発の新着記事をチェック

WordPressエンジニアとは？仕事内容・必要スキル・将来性まで徹底解説