WordPressにフックでCSS、JavaScriptを読み込む方法

WordPressでカスタマイズをしていると、子テーマや自作プラグインなどを用いて、オリジナルのCSSやJavaScripsを読み込みたいことがあると思います。

ただ、直接headタグが書かれているPHPファイルにタグを挿入してしまうと、コードが煩雑になりメンテナンス性が落ちるのでオススメできません。

そこでオススメなのが、WordPressのフックという機能でCSS、JavaScriptを読み込むことです。
フックを使うとWordPressのシステムによって細かい部分まで制御ができるので、ぜひ覚えてみると良いと思います。

wp_enqueue_scriptsについて

まずフックを使うにはadd_actionに第一引数として’wp_enqueue_scripts’を、第二引数としてコールバック関数を与えます。
そしてコールバック関数の中身に読み込むCSS、JavaScriptを登録するコードを記述していきます。

add_action( 'wp_enqueue_scripts', function() {
	// 読み込むCSS、JavaScriptを登録するコード
} );

CSSを読み込むwp_enqueue_style

CSSを読み込むにはwp_enqueue_styleを使います。

add_action( 'wp_enqueue_scripts', function() {
	wp_enqueue_style(
		'mycss' // スタイルシートのハンドルとして使われる名称
		'path/to/css' // スタイルシートのパス
		[ 'other' ] // 他スタイルシートとの依存関係
		'version' // スタイルシートのバージョン
	)
} );

第五引数にはスタイルシートのメディアを指定することができますが、初期値が’all’なので個人的には第四引数まで入れれば基本的には十分だと思います。

JavaScriptを読み込むwp_enqueue_script

一方、JavaScriptを読み込むにはwp_enqueue_scriptを使います。

add_action( 'wp_enqueue_scripts', function() {
	wp_enqueue_script(
		'mycss' // スクリプトのハンドルとして使われる名称
		'path/to/js' // スクリプトのパス
		[ 'other' ] // 他スクリプトとの依存関係
		'version', // スクリプトのバージョン
		false // スクリプトの設置場所（headかbody）をコントロール
	);
} );

ほぼwp_enqueue_styleと一緒ですが、第五引数が少し違います。
第五引数はbooleanの指定によって、falseならhead、trueならbodyへスクリプトを配置することができます。

オススメの設定

また個人的にオススメの設定として、バージョンを指定する部分にfilemtimeを使うことです。

filemtime( '/path/to/file' )

これによりCSSやJavaScriptのファイルを更新したときのみパスが変わるので、開発中にキャッシュをいちいち消す手間がなくなります。