WPでjsの追加cssの読み込みはwp_head()から

jqueryスクリプトやCSSって機能追加のたびに読みこみますよね。
だいたいheadの部分はテーマファイルのheader.phpにあるんですが、ここに直に

<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/jquery.bxslider.js"></script>

って書いてっちゃうのは、ちょっとphpファイル汚れるし、せっかくのWPの機能使ってない感じでちょっとかっちょ悪いかな～なんて思うので、jsやcssを追加するときは、wp_head()から表示されるようにしてみましょう。

function.phpを見てみる

大体どんなテーマを使っても、function.phpってファイルが含まれているはずです。
基本的にはこのファイル内でjsやcssを読み込む設定を行うのがよいと思います。

で、大体funtion.phpのコード内には、wp_head()で出力されるjs・cssをまとめて書いてある部分があるはずです。
↓こんな感じです。

function kurubusi_bootstrap_sass_01_scripts() {
	wp_enqueue_style( 'kurubusi_bootstrap_sass_01-style', get_stylesheet_uri() );
	wp_enqueue_script( 'kurubusi_bootstrap_sass_01-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
	wp_enqueue_script( 'kurubusi_bootstrap_sass_01-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
}
add_action( 'wp_enqueue_scripts', 'kurubusi_bootstrap_sass_01_scripts' );

ちょっと、これを一から説明していくとアクションフックだのの説明とか長くなっちゃいますので簡単に言いますと、この関数の中に読み込みたいjsとcssを真似して書けば、header.phpのwp_head()で出力されるようになるので、そのほうがかっちょいいですよーというお話です。
例えば下記のようにしていましょう。

function kurubusi_bootstrap_sass_01_scripts() {
	wp_enqueue_style( 'kurubusi_bootstrap_sass_01-style', get_stylesheet_uri() );
	wp_enqueue_script( 'kurubusi_bootstrap_sass_01-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
	wp_enqueue_script( 'kurubusi_bootstrap_sass_01-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
	
	//jquery.bxsliderの必要ファイルの読み込み
	wp_enqueue_style( 'bxslider_css', get_template_directory_uri() . '/css/jquery.bxslider.css', '4.1.2' );
	wp_enqueue_script( 'easing_js', get_template_directory_uri() . '/js/jquery.easing.js', array('jquery'), '1.3' );
	wp_enqueue_script( 'bxslider_js', get_template_directory_uri() . '/js/jquery.bxslider.js', array('jquery.easing.js'), '4.1.2' );
	
}
add_action( 'wp_enqueue_scripts', 'kurubusi_bootstrap_sass_01_scripts' );

上の例ではjquery.bxslider.jsに必要なファイルを追加してみました。

wp_enqueue_scriptsのアクションフックにkurubusi_bootstrap_sass_01_scriptsという関数を引っ掛けて、そこでjsとcssを追加しています。

追加するコードはこんな感じ

wp_enqueue_style( '一意の名前', 'cssファイルまでのパス ', 'バージョン（省略可）' );
wp_enqueue_script( '  一意の名前', 'jsファイルまでのパス', 依存関係（このファイルを読み込む前に読んでおいて欲しいファイルの一意の名前を配列で）, 'バージョン（省略可）' );

とにかく、テーマファイルのfunction.phpの中にある

add_action( 'wp_enqueue_scripts', '関数名' );

を見つけてその中に例のように読み込みたいjsやcssを書いていけばwp_head()で出力されるようになる！ということです。。。
わかりづらいかな・・・

function.phpを見てみる

著者