WordPressでjQueryを利用する際の書き方と注意点

WordPressでjqueryのスクリプトを扱う際に、「うまく動かない」「$ is not function...」のようなエラーがで困っているという人も多いのではないでしょうか。

WordPressでjqueryを扱う際にはいくつかの注意願があります。

本記事では、WordPressでjqueryを使う際の注意点や書き方について解説していきます。

WordPressのjQueryを使う際の注意点

ここでは、WordPressでjQueryを使う際に動かなくなる原因になりやすいものについて解説していきます。

【注意点1】WordPressでjqueryを記述する場合は$を使わない

標準のjQueryとWordPressのjQueryで書き方は基本的には同じですが、 $(ドルマーク)の代わりにjQueryと記述することが大きな特徴です。

■標準のjQueryの書き方の例※WordPressでは基本的にエラーで動作しない

$(function(){ 
      $('xx')....;
});

$(function(){

$('xx')....;

});

■WordPressのjQueryの書き方の例

jQuery(function() {
      jQuery('xx')....;
});

jQuery(function() {

jQuery('xx')....;

});

WordPressでは初期状態では内包されているjQueryライブラリを利用するように動作しています。

上記のjqueryファイルにはnoConflictという関数が含まれていて、$が使えないようになっています（WordPressで使っている他のライブラリとの衝突(同じ名前の関数を使ってしまうことで動作が不安定になる)を避けるため）。

"$"を使うとエラーで動かない場合が多い

"$"を使ってしまうことが、一番多いjQueryが動かなくなる原因です。下記は$を使ってエラーが起きている画面です。 $ is not function...というエラーが発生しています。

繰り返しになりますが、WordPressのjqueryを利用する場合$の代わりに「jQuery」と記述する必要があります。

ネット上に記載のあるスクリプトでもWordPressを想定していない場合"$"を使っているものも多いため、WordPressに組み込む場合は$をjQueryに修正する必要があります。

■(動作不可)"$"を使って動かないスクリプト

$(function () {
    $('.sample').css('color', 'red');
    $('#sample').css('color', 'white');
});

$(function () {

$('.sample').css('color', 'red');

$('#sample').css('color', 'white');

});

■(動作可能)$をjQueryに置き換えたスクリプト

jQuery(function () {
    jQuery('.sample').css('color', 'red');
    jQuery('#sample').css('color', 'white');
});

jQuery(function () {

jQuery('.sample').css('color', 'red');

jQuery('#sample').css('color', 'white');

});

なお、単純に"$"を全て"jQuery"に変える以外にも、"jQuery(function($){"と"});"でコードを囲むという方法もあります。以下に例を記載しますので参考にしてください。

■(動作可能)"jQuery(function($){"と"});"でコードを囲んだスクリプト

jQuery(function ($) {
    $('.sample').css('color', 'red');
    $('#sample').css('color', 'white');
});

jQuery(function ($) {

$('.sample').css('color', 'red');

$('#sample').css('color', 'white');

});

【注意点2】jqueryのスクリプトを読み込む位置はjqueryライブラリを読み込んだ後にする

2つ目の注意点は、jqueryのコードを読み込む位置はjqueryライブラリを読み込んだ後にするです。

WordPressではWordPressに内包されているjqueryライブラリがwp_headという関数で読み込まれています。そのため、jqueryスクリプトは、jqueryライブラリの後に読み込むように制御する必要があります。

■WordPress表示画面のソースコード jqueryライブラリが読み込まれている

functions.phpでjqueryスクリプトを読み込む

WordPressではfunctions.phpでjQueryを読み込むやり方が一般的です。

function my_script(){ 
    // 独自スクリプトの読み込み
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0', true );
}
//アクションフックの指定
add_action('wp_enqueue_scripts', 'my_script');

function my_script(){

// 独自スクリプトの読み込み

wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0', true );

}

//アクションフックの指定

add_action('wp_enqueue_scripts', 'my_script');

get_template_directory_uri はテーマフォルダまでのパスを返す関数です。 WordPressでパスを記載する時によく使いますので、覚えておくと便利です。

上記の引数の意味は下記のとおりです。

function my_script(){ 
    // 独自スクリプトの読み込み
    wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
}
//アクションフックの指定
add_action('wp_enqueue_scripts', 'my_script');

function my_script(){

// 独自スクリプトの読み込み

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

}

//アクションフックの指定

add_action('wp_enqueue_scripts', 'my_script');

読み込み関数の引数を解説します。

$handle・・・スクリプトを区別するための任意の名称(必須)
$src ・・・スクリプトのパス(必須)
$deps ・・・スクリプトの読み込み順を配列で指定(依存関係がある場合に指定)
$ver ・・・スクリプトのバージョン指定
$in_footer ・・・スクリプトの読み込み位置を指定。指定方法はtrueでbodyタグの終了直前、falseでheadタグの終了直前。デフォルトはfalse。

※下記のようにheader.phpなどで直接記述しても動作はしますが、細かい動作制御・一元管理のため、上記のようにwp_enqueue_script(xxxx)で読み込むことが一般的です。

■単純にwp_head()の後に独自のjqueryのスクリプトを読み込んだ例

【注意点3】2重でjqueryライブラリを読み込ませない

前述の通り、とくに何もしていなくても、通常はWordPressに内包されているjqueryが読み込まれています。

それに気づかずに、標準のjqueryを読み込ませると2種類のjqueryライブラリが読み込まれてしまい、スクリプトが正常に動作しなくなる場合があります。

■気づかずに2重でjqueryライブラリを読み込んでいる例

function my_script_init(){ 
    // 標準のjQueryをCDNで読み込み
    wp_enqueue_script( 'jQuery_cdn', '//code.jQuery.com/jQuery-3.5.1.min.js');
}
add_action('wp_enqueue_scripts', 'my_script_init');

function my_script_init(){

// 標準のjQueryをCDNで読み込み

wp_enqueue_script( 'jQuery_cdn', '//code.jQuery.com/jQuery-3.5.1.min.js');

}

add_action('wp_enqueue_scripts', 'my_script_init');

独自テーマを使っている際に起こりやすいので、重複して読み込んでいないか確認してみてください。

そのほかの原因はconsole.logで確認する

上記以外の原因を確認した上でスクリプトが動かない場合は、ブラウザの検証画面から確認する方法もあります。

スクリプトが動かないファイルを開いているブラウザで"F12"を押すと、検証画面を開くことが出来ます。

そこに"コンソール"と呼ばれるウインドウがあるのでそこで、起きているエラーを確認することが出来ます。以下に、"$"を使ってエラーが起きた場合の状態を記載していますので、参考にしてください。

(補足)WordPressのjQueryを使わないようにする方法

WordPressのjqueryを使わないようにする方法もあります。

ただし、WordPressで内包しているjqueryを利用する前提のプラグインやテーマもあるため、動作上不具合が起こる可能性もあるのであまり推奨はされていません。

あえてWordPress内包のjqueryライブラリを利用せず独自にjqueryライブラリを読み込みたい場合、以下のコードをfunctions.phpに記載いただければ、 WordPressのjQueryの読み込みを止め、標準のjQueryを読み込むことが出来ます。

function my_script_init(){ 
    // WordPressのjQueryを読み込まない
    wp_deregister_script('jQuery');
    // 標準のjQueryをCDNで読み込み
    wp_enqueue_script( 'jQuery_cdn', '//code.jQuery.com/jQuery-3.5.1.min.js');
}
add_action('wp_enqueue_scripts', 'my_script_init');