WordPressでテーマを作る場合、Javascriptや外部CSSを使うことも多いと思いますが、テーマのheader.phpに直接書くのではなく、functions.phpから一括で管理する方法です。
WordPressでは、キューに追加されたJavascriptやCSSを wp_head() や wp_footer() の位置で、自動的に適切な順番で出力してくれます。特にjQueryなどのライブラリやjQueryプラグインを使用する場合は、複数のjsファイルに依存関係が発生し、読み込む順番が決まってくる場合があります。こういう時でも、一括管理していればあとあとで変更が楽になります。こんな感じ。
/**
* スクリプトとスタイルをキューに入れる
*/
function my_scripts() {
// 管理画面では読み込まない
if ( !is_admin() ) {
// スタイルシートディレクトリーを取得する。この方法だと子テーマでもそのまま使える
$dir = get_stylesheet_directory_uri();
// テーマのjsディレクトリーのmy-script.jsをキューに入れる。
// さらに、jQueryに依存するのでjQueryの後で入れるように指定した場合。
wp_enqueue_script( 'my-script', $dir.'/js/my-script.js', array('jquery'));
// jQueryをGoogleがホストするものに差し替える
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' );
// Google Maps APIを読み込む
// 豆: 第3引数にNULLを入れると末尾に余計な ?var=xxx が付かない
wp_enqueue_script( 'google-maps-api', 'http://maps.google.com/maps/api/js?sensor=false', array(), NULL );
// テーマのjsディレクトリーのmy-map.jsをキューに入れる。
// jQueryとGoogle Maps APIの両方に依存するので、配列で両方を指定した場合。
wp_enqueue_script( 'my-map', $dir.'/js/my-map.js', array('jquery','google-maps-api'));
// <head>タグ内ではなく</body>直前にスクリプトを出したい場合は、第4引数にtrue
wp_enqueue_script( 'my-footer', $dir.'/js/my-footer.js', array(), false, true );
// 特定のページでスクリプトを出したい場合
if ( is_front_page() ) {
wp_enqueue_script( 'my-top', $dir.'/js/my-top.js' );
}
// 不要なスクリプトをキューから外す（親テーマやプラグインで要らないのがあったとき等）
wp_dequeue_script( 'parent-script' );
// スタイルシートも基本同じように使えます。
wp_enqueue_style( 'my-css', $dir.'/css/my-css.css' );
// 不要なスタイルをキューから外す（親テーマやプラグインで要らないのがあったとき等）
wp_dequeue_style( 'parent-style' );
}
}
add_action( 'wp_enqueue_scripts', 'my_scripts', 50 );
