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

jQueryによるスクリプトが動かない原因は様々で、WordPress特有のものもいくつかあります。
今回はスクリプトの実装方法を確認しつつ、デフォルトで備えているjQueryを使い、WordPressの仕様に沿った方法での解決を試みます。

jQueryについておさらい

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

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

倉庫番
倉庫番

WordPressでは基本的に内蔵されているライブラリを使うことになります。

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

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

スクリプトは$ではなく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);
	});
});

$(function() {jQuery(document).ready(function () {が省略されたものです。
$jQueryに書き換えることはこの部分だけ省略せずに書くということになります。

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

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では次の場合に自動的にライブラリを読み込みます。

  • 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におけるjQueryの読み込み方

通常jQueryを使用する際は

  1. ライブラリの読み込み
  2. スクリプト読み込み・実行(外部ファイル or インライン)

という形になりますが、WordPressではheader.php等のテンプレートファイルに直接書くのではなくfunctions.phpで設定することでwp_head()が適切にソースコードを書き出します。

外部 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>

wp_enqueue_script()でjQueryによるスクリプトを読み込む場合は3番目の引数にarray( 'jquery' )を指定します。これによりスクリプトを実行するために必要なライブラリを読み込むソースコード(上記出力結果の1~2行目)がwp_head()によって出力されます。

外部jsファイルを複数読み込む場合もその都度array( 'jquery' )を指定しますがライブラリが何度も読み込まれることはありません。

外部 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>

前述の「外部 jsファイルを読み込む場合」の方法で1つでも読み込んでいる場合はこの記述は必要ありません。

参考リンク
WordPress Codex – wp_enqueue_script()

まとめ

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

  • スクリプトの書き始め
  • ライブラリの重複やバージョン違い

スクリプトの見直しが必要な場合も

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

タイトルとURLをコピーしました