• HOME
  • WordPress
  • 「WordPress」jQueryの読み込み方と動かないときの対処法
  • WordPress
  • jQuery
  • WordPress
  • カスタマイズ
  • 初心者

「WordPress」jQueryの読み込み方と動かないときの対処法

「WordPress」jQueryの読み込み方と動かないときの対処法

本記事ではWordPressでjQueryを使用する際の読み込み方法や、jQueryがうまく動かないときの対処法について解説します。

jQueryはJavaScriptのライブラリで、簡単なコードでDOM操作やアニメーションを行うことができます。また、これから説明するコードを記述すれば簡単にWordPressでjQueryを使用することができます。

WordPressでjQueryを読み込む方法

まず、WordPressでjQueryを読み込む方法は2つあります。

  1. WordPressに内蔵されたjQueryを使う
  2. 自分で用意したjQueryをWordPressで読み込む

上記を順番に説明していき、2つの読み込み方の違いや、jQueryを読み込んだのにうまくスクリプトが動かないときの注目ポイントを見ていきます。

一番簡単にWordPressでjQueryを読み込む方法

実際に解説をする前に、忙しい方むけに一番簡単な方法を紹介します。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="<?php echo get_template_directory_uri(); ?>/assets/javascripts/main.js"></script>

ひとまずこれで動きます！

header.phpのheadタグ内に上記のscriptを記載すればいいのですが、WordPressにはJavaScriptを読み込む方法が定義されているので、今回はそちらを紹介していきます。

ちなみに、/assets/javascripts/main.jsはYoshi-logbookで使用しているテーマのファイルパスなので、ここは各々で設定したファイルパスを指定すれば大丈夫です。get_template_directory_uri()の読み込みは、テーマフォルダ直下から始まります。

それでは早速みていきましょう。

WordPressはjQueryを内蔵している

WordPressでは、jQueryを初めから内蔵しています。とはいえ、無条件にjQueryを使えるわけではなくて、WordPressで使用するためのコードを書く必要があります。

functions.phpへ以下のコードを記載します。

<?php
function init_scripts()
{
  wp_enqueue_script("jquery");
}
add_action('wp_enqueue_scripts', 'init_scripts');

もしfunctions.phpに何も記載していない場合は<?phpを忘れずに記載します。

そうすると、head内でjQueryが読み込まれています。ブラウザから検証ツールで確認してみましょう。（ローカル環境で確認しているので、srcがlocalhostになっています）

<script type="text/javascript" src="http://localhost:8000/wp-includes/js/jquery/jquery.min.js?ver=3.6.0" id="jquery-core-js"></script>
<script type="text/javascript" src="http://localhost:8000/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2" id="jquery-migrate-js"></script>

この場合、2つのファイルが読み込まれています。

  • jquery-core-js
  • jquery-migrate-js

jquery-core-jsはjQuery本体で、jquery-migrate-jsはWordPress用にカスタムされたjQueryプラグインの様なものです。自動で読み込まれる様になっているので、2つ読み込まれて大丈夫です。

これで、WordPressでjQueryを使用できる様になりました。

自分で用意したjQueryを使いたい場合

WordPressに内蔵されているjQueryは、WordPressのバージョンによって内容が異なります。

具体的には以下の通りです。

  • WordPress 5.6の場合はjQuery 3系
  • それ以前のWordPressの場合はjQuery1系

jQuery1系の場合はIE8以下にも対応していますが、その分ファイルサイズが大きいです。そのため、古いブラウザ対応が必要でない場合はjQuery3系の方がパフォーマンスに優れています。

バージョンの指定があった場合

jQueryのバージョンを指定がある場合には、jQueryの公式サイトからダウンロードしてきたファイルを使用して読み込みましょう。

その場合は管理画面以外で反映させる様にします。管理画面ではWordPress内蔵のjQueryでないとバグが起きてしまうためです。

functions.phpへ書き込んだ内容を変更しましょう。

function init_scripts()
{
  // 管理画面以外
  if (!is_admin()) {
    // 標準jQueryを除外
    wp_deregister_script('jquery');
    // ダウンロードしてきたjQueryを読み込む
    wp_enqueue_script(
      'jquery-min',
      get_template_directory_uri() . '/assets/javascripts/jquery-3.6.0.min.js'
    );
  }
}
add_action('wp_enqueue_scripts', 'init_scripts');

ちなみに、CDNを利用しても大丈夫です。その場合は以下の様になります。

function init_scripts()
{
  // 管理画面以外
  if (!is_admin()) {
    // 標準jQueryを除外
    wp_deregister_script('jquery');
    // ダウンロードしてきたjQueryを読み込む
    wp_enqueue_script(
      'jquery-min',
      "https://code.jquery.com/jquery-3.6.0.js"
    );
  }
}
add_action('wp_enqueue_scripts', 'init_scripts');

第2引数へ渡しているファイルパスを変更しました。今回はjQuery公式から引っ張ってきていますが、お好みのCDNがある場合はそちらを使用してください。

jQueryを読み込む際のカスタマイズ方法を紹介

WordPressではwp_enqueue_scriptの引数を設定してあげる事で、jQuery読み込みのカスタマイズをする事ができます。

  • JavaScriptファイルの読み込み順を指定したいとき
  • タイムスタンプを付けたいとき
  • body直下でjQueryを読み込みたいとき

その場合は以下の様になります。

function init_scripts()
{
  // 管理画面以外
  if (!is_admin()) {
    // 標準jQueryを除外
    wp_deregister_script('jquery');
    // ダウンロードしてきたjQueryを読み込む
    wp_enqueue_script(
      'jquery-min',
      get_template_directory_uri() . '/assets/javascripts/jquery-3.6.0.min.js',
      NULL,
      gmdate('Ymd/Hi', filemtime(get_theme_file_path('/assets/javascripts/jquery-3.6.0.min.js'))),
      true
    );
  }
}
add_action('wp_enqueue_scripts', 'init_scripts');

wp_enqueue_scriptの引数を説明します。

第3引数へNULL,と設定することで、読み込み順番を指定してないことを表しています。もし他にSlickなどjQueryを必要としたプラグインがある場合はarray('jquery-min'),を設定して先にjQuery本体を読み込みましょう。

function init_scripts()
{
  // 管理画面以外
  if (!is_admin()) {
    // 標準jQueryを除外
    wp_deregister_script('jquery');
    // ダウンロードしてきたjQueryを読み込む
    wp_enqueue_script(
      'jquery-min',
      get_template_directory_uri() . '/assets/javascripts/jquery-3.6.0.min.js',
      NULL,
      gmdate('Ymd/Hi', filemtime(get_theme_file_path('/assets/javascripts/jquery-3.6.0.min.js'))),
      true
    );
    wp_enqueue_script(
      'slick',
      get_template_directory_uri() . '/assets/javascripts/slick/slick.min.js',
      array('jquery-min'),
      date('YmdGis', filemtime(get_theme_file_path('/assets/javascripts/slick/slick.min.js'))),
      true
    );
  }
}
add_action('wp_enqueue_scripts', 'init_scripts');

第4引数へgmdate('Ymd/Hi', filemtime(get_theme_file_path('/assets/javascripts/jquery-3.6.0.min.js'))),と設定することで、ファイル名末尾へタイムスタンプを付与させます。これにより、ファイル更新があった場合でもブラウザキャッシュによる古いファイル読み込みが無くなります。

第5引数へtrueと設定することで、body閉じタグ直前でファイルを読み込ませる事ができます。

上記で紹介したやり方で、WordPressでjQueryを読み込んで、カスタマイズをする事ができます。

WordPressでjQueryが動かない場合

WordPress内蔵のjQueryは＄が使用できない

WordPressでjQueryを読み込んだはずなのに、jQueryが動かないときはこちらを参考にしてみてください。

下記の基本構文で$を使用する場合、WordPress内蔵のjQueryを使用した場合は動きません。

$("セレクタ").メソッド();

WordPressで動かすためには、以下の構文になります。

jQuery("セレクタ").メソッド();

$がjQueryになります。ここでQが大文字であることに気をつけて下さい。

もし、$を使いたい場合はWordPress内蔵のjQueryを使用せずに、自分で用意したjQueryを読み込ませて使用する必要があります。

コードが間違っていないにも関わらず、WordPressで作ったページでjQueryがうまく動かなかった場合は、$がjQueryになっているかを確認することで解決する可能性が高いです。

まずチェックすることをおすすめします。

まとめ

WordPressでjQueryを使用する際の読み込み方法と、jQueryがうまく動かないときの対処法を解説しました。

WordPressには独自のルールも多く、外部ファイルを読み込む際のWordPress関数を使用したり、jQueryが思う様に動かなくて困ることが多々あります。

しかし、WordPresを使い慣れてしまえばこれほど簡単にWebサイトを作れるCMSはありません。WordPressでWebサイトを作成する方はjQueryを読み込む方法を覚えておきましょう。