WordPressでjQueryが動作しない場合【jQuery/WordPress】

jQueryについておさらい

jQueryはJavaScriptのライブラリの1つです。
JavaScriptでは複雑になるスクリプトをjQueryを使うことで簡単に記述できるようになります。

jQueryを使うためにはまずライブラリ本体を読み込む必要があり、ダウンロードしたものを読み込む方法とウェブ上に公開されているものを読み込む方法があります。

ライブラリ読み込み後はjQueryで書かれたスクリプトが動作するようになります。
スクリプトはHTMLに直接記述するか、拡張子 “.js” の外部ファイルを用意する方法があります。

jQueryが動かない原因と確認箇所

Check 1. スクリプトは$ではなくjQueryで書き始める

WordPressでは他のライブラリとの衝突を防ぐための仕様により$(function() {で書き始めると動作しません。

// この書き方では動かない
$(function() {
	$("#pagetop a").click(function () {
		$("html, body").animate({ scrollTop: 0 }, 400);
		$("html, body").animate({ scrollLeft: 0 }, 400);
	});
});

$をjQueryに書き換えることで動くようになります。

// $を書き換えると動く
jQuery(function() {
	jQuery("#pagetop a").click(function () {
		jQuery("html, body").animate({ scrollTop: 0 }, 400);
		jQuery("html, body").animate({ scrollLeft: 0 }, 400);
	});
});

上記のソースは書き換える箇所が多いですが、書き始めをjQuery(function($) {とするとその内側では$が使えるためソースが簡潔になります。

// 書き出し部分だけの変更で動く
jQuery(function($) {
	$("#pagetop a").click(function () {
		$("html, body").animate({ scrollTop: 0 }, 400);
		$("html, body").animate({ scrollLeft: 0 }, 400);
	});
});

Check 2. ライブラリを重複して読み込んでしまっている

WordPressではwp_head()関数が必要に応じてソースコードを出力します。header.php等のテンプレートファイルに以下のように直接記述してしまっている場合、wp_head()が出力したものと重複してしまうことがあり、スクリプトやプラグインが動かない原因となることがあります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/my-script.js"></script>

ライブラリの読み込みはテンプレートファイルに直接書かず、WordPressの仕様に沿った方法でjQueryを読み込むことで重複を防ぐことができます。

WordPressでのスクリプトの読み込みはfunctions.phpの設定で行います。
設定方法は後述の「WordPressにおけるjQueryの読み込み方」を参照してください。

WordPressにおけるjQueryの読み込み方

WordPressが自動的にライブラリ（jQuery）を読み込む条件

WordPressでは次の場合に自動的にライブラリを読み込みます。

• wp_enqueue_script()で正しくスクリプトを読み込んでいる。
• jQueryを使うプラグインを有効化している。

<script src='example.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0' id='jquery-core-js'></script>

どちらかに該当する場合、上記のようなソースコードをWordPressが自動的に書き出します。どちらも該当しない場合は自動的にライブラリが読み込まれることはありません。

外部 jsファイルを読み込む場合

外部ファイルのスクリプトを読み込む場合次のようにwp_enqueue_script()を使って読み込みます。
その際3番目の引数にarray( 'jquery' )を指定します。

functions.php

/** スクリプトとライブラリ読み込み */
function add_theme_js() {
	wp_enqueue_script( 'theme-script', get_theme_file_uri( '/js/my-script.js' ), array( 'jquery' ), wp_get_theme()->get( 'Version' ), false );
}
add_action( 'wp_enqueue_scripts', 'add_theme_js' );

上記のように記述した場合、wp_head()によってライブラリ（jquery.min.js）とスクリプト（my-script.js）が次のように読み込まれます。

出力結果

<script src='http://example.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0' id='jquery-core-js'></script>
<script src='http://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script>
<script src='http://example.com/wp-content/themes/sample-theme/js/my-script.js?ver=6.1' id='theme-script-js'></script>

外部 jsファイルは全く使わない場合

あまり出番が無さそうですが、外部jsファイルを1つも読み込まずインラインでスクリプトを記述する場合の書き方です。

functions.php

/** ライブラリのみ読み込み */
wp_enqueue_script( 'jquery' );

wp_head()によってライブラリの読み込みのみが行われます。

出力結果

<script src='http://example.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0' id='jquery-core-js'></script>
<script src='http://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script>

参考リンク
WordPress Codex – wp_enqueue_script()

まとめ

WordPressでjQueryが動かない主な原因

• スクリプトの書き始め
• ライブラリの読み込み方が適切でない
• ライブラリの重複やバージョン違い

WordPressの仕様に沿ってjQueryを読み込むことでトラブルの原因を減らすことができますが、内蔵されているライブラリのバージョンに対応していないスクリプトを使っている場合はスクリプトの見直しが必要です。

最後まで読んでいただきありがとうございました。

---