WordPressのjQuery使用に関して、いろいろと試してみた。[wp_headの出力][wp_enqueue_script]などなど

とても便利な wp_enqueue_script

WordPressにはjQueryがインストールされています。
また、jQueryプラグインや自作スクリプトなどを使う際には、wp_enqueue_scriptを上手に使うととても便利。
バージョンや依存ファイルなどを、きちんとあるべき順番で内に書き出しくれます。（<footer>内や</body>直前に書き出すこともできます。）

wp_enqueue_script:WordPress私的マニュアル

↓書き方はこんな感じ。header.phpでもfunctions.phpでも、どちらに記述してもいいですが、ボクはfunctions.phpにまとめて記述する派です。

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

パラメーター「$handle」には、任意の名前を指定できそう。でも、すでにインストール済みのスクリプトなどに割り振られているハンドル名とかぶらないようにしないといけませんね。
パラメーター「$src」はスクリプトファイルのパス情報を入れます。インストール済みのスクリプトならば、このパラメーター省略してハンドル名だけを指定すればOKのようです。
パラメーター「$deps」は関連するスクリプトのハンドル名を配列（array()）で指定します。配列形式なので複数指定が可能です。これを指定すると、依存関係を整理して適切な順番で書き出してくれるみたいです。
パラメーター「$ver」は、スクリプトのバージョン情報を入れることができます。同じライブラリの違うバージョンなどが重複しないようにできそう。（試してません。）
パラメーター「$in_footer」を「true」にすると、wp_footerに出力してくれます。（通常はwp_headに書き出してくれます。）

例えば、このブログでも使っているjquery.dump.jsなどを追加する場合は以下のような感じ。

wp_enqueue_script("jqeury", get_bloginfo("template_url")."/js/jquery.dump.js", array("jquery"));

ただ、Wordpress同梱のjQueryが便利だといっても、以下の点が気になります。

WordPress同梱のjQueryの悩みどころ

同梱のjQueryが最新バージョンとは限らない（また、古いバージョンを指定したいときにも困る）
「$」関数が使えない

CDN(コンテンツデリバリーネットワーク)のjQeuryを使う

WordPressに同梱されているjQueryのバージョンは、使用しているWordpressがリリースされた時点での最新版になります。最新バージョンではないかもしれませんし、もし古いバージョンでしか動かないjQueryスクリプトを使っているとすると、そっちの方が問題ですね。いずれにしても、GoogleなどのCDNからソースが提供されているんですから、そちらを使えるようにしてみます。

CDNとは、ファイルサイズの大きいデジタルコンテンツをネットワーク経由で配信するために最適化されたネットワークのことです。（参照：CDNとは – 意味/解説/説明/定義： IT用語辞典）

CDNのjQueryでは「$」が使えるようになる

CDNのjQueryに変えると、任意のバージョンを使えること以外に、もうひとつのメリット（？）があります。それは「$」関数が使えるようになること。メリットといえるかどうかは、使う人の使い方次第ですが。
Wordpress同梱のjQueryでは「$」関数が標準では使えません。それは同じ「$」を使う他のJavascriptライブラリが存在するからです。それらとjQueryを一緒に読み込んだ場合、「$」を使うと衝突（コンフリクト）を起こして正常に動作しません。私も最初は知らずに「$」を使い「あれ？jQueryが動かない？」という落とし穴にハマったクチです。

WordPress内のjQuery本体ファイルの最終行を見ると、

jQuery.noConflict();

と記述されています。この1行で「$」を無効にしています。そのまま読めばわかりますが、コンフリクトしないためです。

jQueryの「$」関数は、もともと省略関数名のようなもので、「jQuery」のエイリアスです。なので、Wordpress（の初期状態）でjQueryスクリプトを書く場合には、「$」のかわりに「jQuery」と書かなければなりません。

$ === jQuery
$はjQueryのエイリアスです。
【Wordpressの初期状態では…】
$(‘div’).css(‘color’,’red’);//動きません。
jQuery(‘div’).css(‘color’,’red’);//動きます。

CDNなどで利用できるオリジナルのjQueryにはこの1行がありませんので、そちらにjQueryを切り替えれば「$」が使えるようになります。が、当然他ライブラリとのコンフリクトが起こる可能性があるので、十分に注意しなければなりません。

「$」で済むところを「jQuery」と書かなければいけないのはちょっと面倒ですし、どこかからソースをコピペしたいときにもいちいち置換しなければなりません。それから詳細は未確認ですが、プラグインなどによっては「$」が許可されていないとダメなものもあるようです。「$」が使えるに越したことはないです。

ということで、自動で読み込まれるようになっているjQueryをCDNに変更。

function change_jquery() {
	if( !is_admin() ){
		wp_deregister_script('jquery');
		wp_enqueue_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', array(), '1.10.2');
	}
}
add_action('init', 'change_jquery');

wp_deregister_scriptで、ハンドル名（識別名）「jquery」の登録を解除します。そしてwp_enqueue_scriptで新たに「jquery」にCDNのjQueryを登録すると、デフォルトで読み込まれるjQueryが変更されます。（wp_register_scriptを使った方が正しいのでしょうかねえ…）

管理画面のjQueryバージョンは変わらないようにする

2行目の「if( !is_admin() ){...}」は、”管理画面は除外”という意味になります。管理画面は同梱されているjQueryのバージョンで最適化されているので、変えない方が”吉”のようです。

WordPress同梱のjQueryでも「$」を使う方法はある

実際にはnoConflict()付きのjQueryでも「$」が使えるようにすることはできます。

(function($){
	$(function(){
		//実行処理
	});
})(jQuery);

とか

jQuery(document).ready(function($){
  // 実行処理
});

などと書けば「$」関数でスクリプトが記述できます。

↓こちらが非常に参考になりました。（正直これ読めば、今書いているこの記事は要らない…。）

WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 – かちびと.net

管理画面での確認（どこが変わるの？）

管理画面のが読み込むjQueryに関して、自分なりにいろいろと実験をしてみました。というのは最初、上記方法でさまざまなバージョンに変えてみたのですが、管理画面のHTMLソースのjQueryを読み込んでいる部分を調べても、同梱されたjQuery（最終行にjQuery.noConflict();の記述があるもの）しか確認できなかったので…。

実験環境

WordPress 3.7
テーマ：Twenty Thirteen

読み込むjQueryを古いものに変更（バージョン1.4.4）。

//jQueryのバージョンを1.4.4にしてみる
funcition change_jquery(){
	wp_deregister_script('jquery');
	wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');
}
add_action('init','change_jquery');

ちなみに、管理画面ページのHTMLソースで読み込まれているjQueryをチェック。

jQueryなどを読み込んでいる部分。（load-scripts.phpによって関連スクリプトをひとつにまとめて読み込んでいます。）

↓読み込まれているファイルの中身を確認すると、1行目にjQueryのバージョンがしっかりと表示されています。Wordpress3.7では1.10.2です。ここでは変更が反映されていません。

↓jQueryの最終行にあたる部分をみると、しっかり「jQUery.noConflict();」の記述が。Wordpress内のjQueryが読み込まれています。

管理画面メニューの「外観>カスタマイズ」のカラーピッカーが、バージョンを変えると正常に動かなくなるようなので、そこで確認。

WordPress3.7 管理画面「外観->カスタマイズ」のカラーピッカー

すると皆様のご指摘通り、「外観>カスタマイズ」のヘッダーテキストにて、正常ならばカラーピッカーで選んだ色に合わせて、右のプレビュー画面の見出しテキストの色も変わるはずが、変わらないですね。あきらかに、jQueryのバージョンが影響している様子。しかしHTMLソースのhead要素を見ても、読み込まれているjQueryは同梱のバージョン1.10.2です。が、よく見ると、プレビュー画面の中身はiframeによって表示されていて、その中のページが参照しているのがバージョン1.4.4。見つけました。ここに反映されているようです。

↓Chromeの「要素を検証」で「Resources」を確認します。

↓ちなみに読み込むjQueryを変更しない初期設定のままの場合。

なるほど。管理画面全般に適用されるわけではないんですね。

フックするアクションによって出力が異なる

いろいろと試しているときに気づいたんですが、以下のようにwp_headアクションにフックさせた場合、表側ページでも管理画面では何も変化が起こりませんでしたので、システム的に管理されているものについては、wp_headアクションではなく、initやtemplate_redirectなどにフックさせることになるのでしょうか。（仕様がよくわからん）
wp_deregister_scriptが、wp_headアクションで使えないのかな？そんな気がする。wp_headの役割を考えたらその方が自然か。

//wp_headにフックしてもjQueryバージョンは変わりませんでした
funcition change_jquery(){
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');
}
add_action('wp_head','change_jquery');

jQueryバージョンが変わるのは、以下のアクションにフックさせたときでした。

//管理画面のjQueryバージョンが変わるアクション
add_action('after_setup_theme','change_jquery');
add_action('init','change_jquery');
add_action('template_redirect','change_jquery');

ちなみに、いくつかのスクリプトを様々なアクションにフックさせて読み込んだ結果、アクションの優先順位は以下の通りでした。

アクションの優先度

after_setup_theme
init
template_redirect
wp_head

また、任意のスクリプトファイルの読み込みを試した結果、!is_admin(){...}があろうがなかろうが、カラーピッカーの管理画面（つまりiframeで読み込んだページ）に、すべて読み込まれました。

とにかくまだまだ勉強が必要なWordpressでした。