WordpressでjQueryが動かない！問題なく動作させるために設定する対策方法 │ Triple Threat(トリプルスレッド)

こんばんわ。taisonです。
唐突ですが、

「WordPressでjQueryのライブラリを追加したい！」てこと、

結構ありませんか？

スライダー機能がしょぼいから後入れのライブラリで対応したい、
トップへ戻るボタンを追加したい、、などなど。
結構jQueryのコード・ライブラリを追加してサイト制作している方も多いと思います。

しかしWordpressでjQueryを使用するとき、ほとんどといっていい程

「動かない、、！」

とハマる可能性が高い！なぜか！
今日はその問題を解決するための記事を書きたいと思います。

もう悩む必要はありません！これでjQuery問題の全てを解決しましょう！

1. なぜ動かない？WordpressにおけるjQueryの罠
2. WordPressのjQueryにまつわる２つの問題
- 2.1. WordPressには自動生成されるデフォルトのjQueryが存在する
- 2.2. デフォルトのjQueryを使用する場合記法に気をつける必要がある
3. 上記をふまえてjQuery問題のベストプラクティス
4. 魔法の言葉wp_enqueue_script
5. jQueryの設置は色々試して改善していきましょう

なぜ動かない？WordpressにおけるjQueryの罠

おそらくこの記事を見ている方は、以下のような問題にブチあたっているのではないでしょうか？

WordPressテーマファイルheader.php<head>タグ内もしくはbodyの上にjQueryコードを書いたが動かない
バージョン問題？jQueryを設置し直したが動かない
単純にscriptコードを記入したが動かない

私も初めてWordpress上でjQueryライブラリを追加する時、上記のような問題に悩まされました。
なぜ上記のようなコトが起こるのか？というと、それはWordpressのシステム上の問題だったのです。

WordPressのjQueryにまつわる２つの問題

WordPressには自動生成されるデフォルトのjQueryが存在する

実はWordpressには初期状態でjQueryが含まれており、名前ですぐに呼び出しできる機能が備わっています。
そのためテーマの中ですでに呼び出しをされているパターンがかなり多く、上述した悩み事にぶち当たる可能性が高くなるのです。

自分でjQueryを設置したからjQueryを２つ読み込んだ状態になってしまい、衝突（コンフリクト）を起こして動作しなかった。ということですね。

デフォルトのjQueryを使用する場合記法に気をつける必要がある

WordPressデフォルトのjQueryを使用する場合、通常書いているようなjQueryコードの書き方にすると動作しません。例えば、


<script>
	$(function(){
		ここにコード
	});
</script>

上記のようなコードの書き方だと動作しません。なぜかというと、Wordpressは先ほど書いたような衝突を避けるため、頭の$文字（グローバルショートカット変数）が使えないようになっているのです。

そのためjQueryを使用したコードを記載したい場合、以下のように書き換える必要があります。


<script>
	jQuery(function($){ //頭の$をjQueryに差替え、ローカルに$を挿入
		ここにコード
	});
</script>

これによりこのコード内の中でのみショートカット変数が使えるようになり、衝突を回避するよー。というのが、Wordpressのご厚意なわけなんですが、、、

めんどくせえ。

そのまま書きてえ。いちいちWordpressの時だけ書き換えてたら頭の中がごっちゃごちゃになっちゃいますよ。

上記をふまえてjQuery問題のベストプラクティス

そのまま使えるようにしちゃいましょう。

いつものjQueryで書けたほうがなんだかシンプルで簡単じゃないですか。
というわけでサクっと自分仕様にjQueryを差替えちゃいましょう。

魔法の言葉wp_enqueue_script

これまたWordpressの初期機能です。
wordpressにはフックという機能追加や修正を行う便利なモノがありまして、
例えば今回の題材jQueryの呼び出しコードを追加する。なんてのも簡単に出来るようになっています。

ベストプラクティスを実践するためWordPressのデフォルトjQueryを読み込まないようにして、なおかつ任意のjQueryを呼び出す魔法の言葉は以下です。


//function.phpの中に記載する

function 半角英字で任意の関数名() {
	wp_deregister_script('jQuery');//いてつくはどうでデフォルトjQuery消す
  	wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );//後述します
}
add_action( 'wp_enqueue_scripts', '半角英字で任意の関数名' );//関数を実行

wp_deregisterとadd_actionの部分は上記に書いてあるとおりで、中段にあるwp_enqueue_scriptについて簡単に解説。

$handle	jQuery (識別名)
$src	https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js (挿入URL)
$deps	array() (引数を入れると読み込み順を制御できます) 例：jQueryライブラリをwp_enqueue_scriptで呼び出す際に引数（（）の中）にjQueryを記入する
$ver	1.12.4 (スクリプトのバージョン)
$in_footer	true (scriptの読み込み位置(trueで/body前、falseで/head前))