ヘッダーではなくfunctions.phpでスクリプト、スタイルファイルを読み込ませる

WordPress jQuery JavaScript

(久しぶりだとテーマのつくり方を忘れてしまう)
WordPressでテーマを作るとき、JavaScriptやCSSのファイル読み込みは、headタグ内で

<script src="<?php bloginfo('template_url');?>/js/hoge.js" type="text/javascript"></script>

とか
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url');?>/css/hage.css" />

てな具合にやるのがHTML/CSSコーダーにとっては分かりやすい。
ところがWordPressで推奨されているのはfunctions.phpで読み込ませること。プラグインも含めてスクリプトファイルの重複や依存関係も考慮したうえで出力させることができる。

読み込み方法

functions.phpに、テーマ独自の関数を作り、その中で読み込ませ、add_actionで動作させる。add_actionのwp_enqueue_scriptsはスクリプトだけではなくスタイルシートの呼び出しまでやってくれる。
シンプルになるのは以下のような形。

function theme_name_scripts() {
	wp_enqueue_style( 'style', get_stylesheet_uri() );
	wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/hage.css' );
	wp_enqueue_script( 'jquery');
	wp_enqueue_script( 'hoge', get_template_directory_uri() . '/js/hoge.js');
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

ただ、これはかなり省略しまくっている。
よりきめ細かく設定するなら以下のようになる。

wp_enqueue_script()の設定

wp_enqueue_script( '固有名', 'URI', array('依存ファイル'), 'バージョン', true/false );

固有名

読み込むjsファイルを識別するための名前。ファイル名と同じなら判別しやすいが、デフォルトスクリプトの名前と衝突しないようにすることが必要。
ちなみにjQueryの読み込みが
wp_enqueue_script( 'jquery');
だけで事足りるのはデフォルトスクリプトとして登録されているから。

URI

ファイルの場所を示すURL。テーマフォルダにjsフォルダを作っていて、それに入っているファイルであれば

get_template_directory_uri().'/js/hoge.js'

というように書く。get_template_directory_uri()を使っているのが重要で、これを面倒くさがってhttp://example.com/wp-content/theme/...なんて書くとリンク切れのリスクを抱え込むことになる。外部リンクでない限り、get_template_directory_uri()関数を使うのがベスト。
ちなみにiPhoneはhead内にリンク切れがあると、サイトをめちゃくちゃにぶっ壊して表示することがあるので十分注意する必要がある。

array('依存ファイル')

例えばjQueryに依存しているときは、'jquery'をこの3番目の引数に入れる。一つだけならarray()を使わなくても認識してくれるが、ここはちゃんと書いた方がいいだろう。
複数入れるのなら、array('A','B','C')とコンマ区切りで羅列する。

バージョン

なにも書かなければWordPressのバージョンが勝手に付与される。1.0とでも入れておくか、nullを指定する。

true/false

ページの末尾で読み込ませるならtrue、head内で読み込ませるならfalseにする。
デフォルトではfalseになっている。

jQuery依存ファイルをラップする方法

ラップしたいプログラムを

jQuery(function($){
});
又は
(function($){
})(jQuery);

で囲む。
これが何をやっているのかというと、「即時関数」というやつでラップし、引数に$を指定することで、外部の$と関数内の$を切り離し、即時関数内で自由に使えるようにしている、というもの。「この先の"$"はここでしか使わないよー、他の関数の$とは別物だよー」という宣言ですね。

wp_enqueue_styleの設定

wp_enqueue_style( '固有名', 'URI', array('優先関係'), 'バージョン', 'メディア' );

固有名

JavaScriptファイルの読み込み同様、cssファイルに付ける固有名。

URI

必須となるstyle.cssを読み込ませる場合は、

get_stylesheet_uri()

そのほかのCSSファイルを読み込ませる場合は、例えばテンプレートフォルダにcssという小フォルダを作っていて、そこに入れているCSSファイルを読み込ませたい場合は

get_template_directory_uri().'/css/hage.css'

と書く。

array('優先関係')

CSSの優先順を決める。JavaScriptの時と同様、array()で先に読み込ませたいCSSの固有名を列挙する。

バージョン

これも何もしなければWordPressのバージョンが表示される。自分で作ったものなら適当に1.0とでも入れておくか、nullを指定する。

メディア

そのCSSを適用するメディアを指定する。デフォルトはallで、すべてに適用される。そのほかのメディアは、
braille：点字スクリーン
embossed：点字プリンター
handheld：ハンドヘルドデバイス。現在はメディアクエリでの振り分けでカバーしていることが多い。
print：プリンター
screen：パソコンディスプレー
speech：音声読み上げソフト、スクリーンリーダー
tv：テレビモニター。ハイビジョン時代になってパソコンモニターとの差は無くなっているので使う機会はほとんどないだろう。

まとめ

実際に動作を確認したのが次のようなコード

function ki_script() {
	wp_enqueue_style('ki-style', get_stylesheet_uri(), array(), null, 'all');	
	wp_enqueue_script( 'jquery' );
	wp_enqueue_script( 'kcss', get_template_directory_uri().'/js/kcss.js', array('jquery'), null, false);
	wp_enqueue_script( 'togglemenu', get_template_directory_uri().'/js/togglemenu.js', array('jquery'), null, false);
}
add_action('wp_enqueue_scripts','ki_script');