jQueryは、手軽に使えるJavaScriptライブラリなので、Web制作で幅広く利用されていますよね。ただし、WordPressでjQueryを使う際には、少し注意が必要です。
当記事では、WordPressでjQueryを扱う時によくある以下の問題について解説していきます。
- WordPressではjQueryをどうやって読み込むの？
- なぜjQueryが動かないの？
WordPressでjQueryを読み込む方法
まず、知っておきたいのが、WordPress本体に「jQuery」が組み込まれていることです。本来、jQueryを利用するには、専用のファイルを自分で用意して読み込む必要があります。
WordPressでは自動で内蔵のjQueryを読み込むため、その手間が必要ないんですよね。今回は、以下の2つの方法をそれぞれご紹介します。
- WordPressのjQueryを利用する方法
- 独自のjQueryを利用する方法（非推奨）
なお、JavaScriptファイルを読み込む方法が分からない方は、以下で解説してますので、こちらを参考に実装してください。
Webサイトに何かしら動きをつけたい時にJavaScriptが必要になります。しかし、WordPress開発に慣れていないと、JavaScriptをどう読み込むべきか分からないですよね。 当記事では、WordPressでJavaScriptを外部ファイルとして読み込む基本的な方法をご紹介します...
WordPressのjQueryを利用する方法
WordPressにデフォルトで備わっているjQueryを利用する方法です。この場合、「wp_enqueue_script()」を使って何かしらのjsファイルを読み込んでいれば、jQueryが自動的に読み込まれます。
特に読み込み作業がないため非常に楽ですが、「$」をそのまま利用できない点にご注意ください。
例えば、以下をjsファイルに書いても「Uncaught TypeError: $ is not a function…」とconsoleにエラーが表示されてうまく動作しません。
// NG例
$(function() {
$('.selector').addClass('active');
});
WordPressでは他のライブラリとの衝突を避けるため、jQueryファイル内で「noConflict()」が実行されています。（$を使えなくするメソッド）
そのため、以下のように「$」を「jQuery」に書き換える必要があります。これで正常に動作しますが、「$」が使えないので非常に不便です。
// OK例
jQuery(function() {
jQuery('.selector').addClass('active');
});そこで、「$」を使いたい方は、以下のように書き換えてみてください。
// OK例（$を使えるのでオススメ）
jQuery(function($) {
$('.selector').addClass('active');
});この書き方であれば、「jQuery(function($) {〜})」の中でのみ「$」を使えるようになります。この方法が最も書きやすいと思いますので、ぜひ試してみてください。
独自のjQueryを利用する方法（非推奨）
自分で用意したjQueryを利用する方法については、正直あまりオススメしません。というのも、独自のjQueryを使うためには、WordPressのjQueryを無効化して新たに読み込む必要があるからです。
WordPressでは、テーマ以外にもプラグインによって様々な機能を拡張できます。もちろん、WordPress内蔵のjQueryを使う前提としたプラグインも存在するため、これらが正常に動作しなくなる可能性があるんですね。
どうしても自分で用意したい方は、以下の書き方で読み込んでみてください。（functions.phpに記載）
/* 独自のjQueryを読み込む */
add_action( 'wp_enqueue_scripts', function(){
// デフォルトのjQueryの読み込みを無効化
wp_deregister_script( 'jquery' );
// 好きなjQueryを読み込み
wp_enqueue_script( 'my_jquery', '読み込むjQueryのパス', );
} );jQueryがうまく動かない時は？
まずは、さきほど紹介した以下2つの対策を行っているかご確認ください。
| WordPressのjQueryを利用 | 「$」を使っていないか？→「jQuery」に書き換える |
| 独自のjQueryを利用 | jQueryを2重読み込みしていないか？→ソースコードで確認する（不要な読み込みをなくす） |
ここまで対策して正常に動作しない場合は、自分のコードを書いたjsファイルがjQueryの後に読み込まれているかご確認ください。（jQueryよりも先にコードが読み込まれると動作しません。）
「wp_enqueue_script()」で読み込んでいる場合は、第三引数にスクリプトの依存関係「array(‘jquery’)」を指定してください。こちらを利用することで、jQueryの後に読み込ませることができます。
/* jQueryでコードを書いたファイル（my-script.js）を読み込む場合 */
add_action( 'wp_enqueue_scripts', function(){
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/my-script.js', array( 'jquery' ) );
} );consoleにエラー「Uncaught ReferenceError: jQuery is not defined」が表示される場合は、こちらを疑ってください。
まとめ
今回は、WordPressでjQueryを読み込む方法と注意点について解説しました。普段からjQueryを使っている人ほど、これらの問題に陥りやすいかもしれませんね。
なお、テーマのカスタマイズなどで、少しだけJavaScriptを使いたい方は、管理画面上でも実行可能です。以下にその方法をご紹介してますので、ぜひ参考にしてください。
WordPressの記事上でJavaScriptを使うには少し工夫が必要です。そのままJavaScriptのコードを書いても動作しないからです。 原因はWordPressのエディターの自動改行機能により、文中に挿入された<script>～</script> 内に含まれる...
コメント