あなたはそんな悩みを持ってこの記事にたどり着いたのではないでしょうか？「サイトで紹介されていたコードをそのまま貼り付けているだけなのになんで動かないのだろう・・・」
もしWordPressでjQueryを使ったことがない人なら、原因がなかなかわかりませんよね。そんなあなたに朗報です。
その悩みは、実はあっさり解決できるかもしれません。WordPressでjQueryが動かない理由は単純なケースがほとんどで、簡単に解決できることが多いのです。
ここでは、その原因ついて説明しています。また、正しい使用方法や、自分好みのjQueryプラグインを使う手順も解説。
この記事を読めば、jQueryを使いこなして、より魅力的なサイトを作ることができるようになりますよ。それではここから、WordPressでjQueryが動かない原因や使い方の説明を進めていきます。皆さんのお役に立てば嬉しいです。
WordPressでjQueryを使う2つの方法
WordPressでjQueryを使う方法は、大きく2つあります。
WordPressに含まれているjQueryを使う
実は、WordPressにはjQueryがデフォルトで用意されています。
ですので、特に理由がない限りは、このWordPress標準のjQueryを使うのが望ましいでしょう。
ただし、標準のjQueryとはやや異なり、WordPress用にカスタマイズされていますので注意が必要です。
WordPressのjQueryは使わず自分で読み込む
WordPressで用意されているjQueryとは別のバージョンを使いたい場合があるかもしれません。
そんなときは、WordPressのjQueryではなく、使いたいjQueryを自分で読み込むことも可能です。
後述するとおり、jQueryの読み込みはそんなに難しい作業ではありません。
WordPressでjQueryが動かない原因
冒頭で書いたとおり、「jQueryが何故か動かない！」という悩みを抱えている人がたくさんいます。
その原因の大半が、先ほど言った、WordPress用にカスタマイズされた部分を考慮せずに実行しているというものです。
一般的に、標準のjQueryでは下のようにコードを書きます。
先頭に「$」をつけるのですが、実はWordPressで用意されているjQueryでは、「$」を使うと動かないようになっています。
なぜ使えないようになっているかと言うと、ほかの機能との衝突を避けるためです。
jQueryはJavascriptと呼ばれる言語のライブラリーの一つなのですが、WordPressでは他のライブラリーも使用しています。
その中に、jQueryと同じように「$」を使うものがあるのです。
どちらも「$」を使ってしまうと、衝突が発生し、うまく動作しなくなるため、jQuery側では「$」を使えないように、「noConflict」という関数が実行されている、というのがこの事象のカラクリです。
「$」を使わずに、WordPressで用意されているjQueryを動かす方法については、このあと説明していきます。
WordPressに含まれているjQueryを使う方法
それではここから、WordPressに含まれているjQueryを使う方法をご紹介します。
jQueryの読み込み
jQueryを使うには、jQueryファイルを読み込んでおく必要があります。
しかし、WordPressでは最初から読み込んでくれているため、ここではその作業をする必要はありません。
jQueryコードの書き方
次はjQueryコードの書き方です。
「2. WordPressでjQueryが動かない原因」で説明したとおり、WordPressに含まれているjQueryでは、「$」が使えないようになっています。
その代わりに、下の2パターンのどちらかでコードを記述すれば動きます。
1つ目は、「$」を「jQuery」という文字に置き換えるパターン。
例えば、下のようなコードを書くとします。
$(function() {
$('#test').text();
$('.test').remove('.sample');
});
</script>
これをWordPressで動かす場合は、「$」を「jQuery」に変えて下のように書きます。
jQuery(function() {
jQuery('#test').text();
jQuery('.test').remove('.sample');
});
</script>
単純に、「$」を全て「jQuery」に置き換えるだけなので、とても簡単ですね。
もう1つの方法は、「jQuery(function($){ });」でコードを囲むという書き方です。
先ほど例であげたコードを「jQuery(function($){ });」で囲むと、次のようになります。
jQuery(function($){
$('#test').text();
$('.test').remove('.sample');
});
</script>
「jQuery(function($){ });」の中は、普通のjQueryの書き方（「$」を使った書き方）でOKです。
一つ目に紹介した、「$」を全部「jQuery」に置き換える方法は少し手間ですし、文字が増えるのでコードがゴチャゴチャしてしまいます。
でも、この「jQuery(function($){ });」で囲む方法は、コードがとてもシンプルになりますし、また、標準のjQueryコードをそのまま流用できるので、とてもラクな方法です。
WordPressのjQueryを使わない方法（独自で設定する方法）
場合によっては、WordPressで用意されているjQueryを使わず、自分で指定したバージョンのjQueryを使いたいシチュエーションがあるかもしれません。
また、jQueryプラグインを導入したい場合もあるでしょう。
ここではその方法について説明します。
jQueryの読み込み
自分で指定した任意のjQueryを読み込む方法です。
今回は、ダウンロード版ではなく、CDN経由で読み込む流れをご説明します。
jQueryを使うには、読み込むためのコードを記述しないといけないのですが、書き込むファイルは、「header.php」になります。
header.phpはとても重要なファイルですので、万が一、何か不具合が発生したときに対応できるよう、まずはheader.phpのバックアップを取っておきましょう。
FTPなどで接続し、退避しておいてください。
バックアップが完了したら、header.phpの中に、下記のコードを、「<?php wp_head(); ?>」より前に記述します。
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', array(), '3.3.1');
?>
1文目の「wp_deregister_script(‘jquery’);」は、WordPressで用意されているjQueryを読み込まない、という命令になります。
そして2文目の「wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', array(), ‘3.3.1’);」が、自分で指定するjQueryを読み込むための1文です。
今回は3.3.1を読み込んだ例をあげていますが、ご自身が使いたいバージョンのURLに書き換えて使ってくださいね。
jQueryプラグインの導入方法
スライダーやアニメーションなど、jQueryプラグインを使いたい場合がありますよね。
そんなときはこちらの方法で読み込みます。
作業対象のファイルは、「4.1. jQueryの読み込み」と同じく、「header.php」です。
まずは作業前にheader.phpのバックアップを取ってください。
バックアップができたら、下記のコードを、header.phpの中に書き込みます。
「jQueryプラグインファイル」というのは、「〇〇.js」という形式のファイルのことです。
また、このコードを書く場所は、jQuery本体を読み込んだ場所より下、かつ、「<?php wp_head(); ?>」より前になります。
まとめ
今回は、WordPressでjQueryを使う際にエラーになる原因、そしてjQueryの正しい使い方についてご紹介しました。
jQueryを使うと、サイトがウンとレベルアップします。
ぜひ今回の記事を参考にしながら、jQueryを活用してくださいね。
