目次 [ close ]
  1. はじめに
  2. WordPress標準のjQueryとは？
  3. 標準のjQueryを無効化する方法
  4. CDNからjQueryを読み込む方法
  5. さいごに

はじめに

WordPressはデフォルトでjQueryを読み込んでいますが、CDN版とは仕様が異なる場合があり、自分のコーディング環境に合わないこともあります。
この記事では、WordPressに標準で含まれるjQueryを無効化し、指定したCDN版のjQueryを読み込む方法をご紹介します。

WordPress標準のjQueryとは？

WordPressでは、wp_enqueue_script()という関数によってjQueryなどのスクリプトが読み込まれています。テーマやプラグインによっては、ヘッダーやフッターで以下のようにjQueryが自動的に挿入されます。

ただし、このjQueryはWordPressの互換性を保つために少し古めのバージョンであることが多く、最新のjQueryで開発したいときには不都合なこともあります。

標準のjQueryを無効化する方法

WordPressでは、テーマやプラグインを通じて自動的にjQueryが読み込まれています。
これを無効にするには、functions.php に以下のコードを追加します。

// WPのjQueryを止める
function stop_jquery() {
    if(!is_admin()) {
        wp_deregister_script('jquery');
    }
}
add_action('init', 'stop_jquery');
🔍 解説
  • wp_deregister_script('jquery')
    　→ WordPressに登録されているjQueryの読み込みを無効化します。
  • if (!is_admin())
    　→ 全てのjQueryを止めてしまうと、管理画面でエラーが発生する可能性があるため、フロントエンド側のみを対象に無効化しています。
  • add_action('init', ...)
    　→ 'init' はスクリプトやスタイルの登録が始まる前のタイミングです。早い段階でjQueryを無効化したい場合に適しています。

CDNからjQueryを読み込む方法

WordPress標準のjQueryを無効化したら、代わりに自分でjQueryを読み込む必要があります。
通常通り <head> や <body> の最後など、jQuery CDNを必要な場所に記述してください。

HTMLに以下のようなコードを記述すれば、最新のjQuery（この例ではバージョン3.7.1）を読み込むことができます。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
💡 補足
  • WordPressテーマ内で使う場合は、header.php や footer.php に直接書く方法もあります。
  • もしくは、WordPressの functions.php に wp_enqueue_script を使って動的に読み込むこともできます（後述）。

さいごに

今回は、WordPressの標準jQueryを無効化し、自分で指定したCDN版のjQueryを読み込む方法をご紹介しました。

WordPressでは便利な仕組みが最初から用意されていますが、開発スタイルや必要なバージョンによっては、自分でコントロールしたい場面もあります。
そんなときに今回の方法を活用すれば、普段の開発フローに近い形でjQueryを扱えるようになります。

ただし、プラグインやテーマによってはjQueryに依存しているものもあるため、切り替え後に不具合がないかの確認も忘れずに行いましょう。