wp_register_styleとwp_enqueue_styleの使い方とその違いとは

WordPressのfunctions.phpでよく使うwp_register_style()とwp_enqueue_style()は、CSSをページに表示するときにセットする関数です。WordPressプラグインを使う場合やテーマのfunctions.phpに書いておけるおくことで子テーマなどのCSSファイルの管理に使用します。

wp_register_styleとは

wp_register_style($handle, $src, $deps, $ver, $media);

引数	型	説明	デフォルト	必須
$handle	string	登録する識別名	None	○
$src	string	登録するCSSのパス	None	○
$deps	array	CSSの依存先	array()
$ver	string or boolean	パラメータの付与	false
$media	string	<link>タグのmedia属性	all

$handleは登録させるフック名で、あらかじめWordPressで登録されているフック以外の好きな名前を決めれます
$srcはCSSのパスを書きます。この２つはwp_register_style()において必ず書かないといけない必須項目です
$depsはどのCSSの後に登録するCSSを読みこませるかを決めれます。CSSフレームワーク等で登録するCSSを後ろに持ってきたい場合は、依存元のCSSの$handle名を書いておくとそのCSSの後に登録されます
$verは、読み込ませるCSSのパスにパラメータを付与できます。なにも書かないとWordPressのバージョン番号がパラメータに付与され、なにかパラメータを書いておくとそのパラメータが呼び込まれます。パラメータを付与させたくない場合は、NULLを書くことでパラメータが付与されません
$mediaは、<link>タグのmedia属性を指定できます。media属性に何が指定できるかは、コチラやコチラ(英語)をご覧ください

wp_enqueue_styleとは

wp_enqueue_style($handle, $src, $deps, $ver, $media);

引数	型	説明	デフォルト	必須
$handle	string	登録する識別名	None	○
$src	string	登録するCSSのパス	None	○
$deps	array	CSSの依存先	array()
$ver	string or boolean	パラメータの付与	false
$media	string	<link>タグのmedia属性	all

$handleは登録させるフック名で、あらかじめWordPressで登録されているフック以外の好きな名前を決めれます
$srcはCSSのパスを書きます
$depsはどのCSSの後に登録するCSSを読みこませるかを決めれます。CSSフレームワーク等で登録するCSSを後ろに持ってきたい場合は、依存元のCSSの$handle名を書いておくとそのCSSの後に登録されます
$verは、読み込ませるCSSのパスにパラメータを付与できます。なにも書かないとWordPressのバージョン番号がパラメータに付与され、なにかパラメータを書いておくとそのパラメータが呼び込まれます。パラメータを付与させたくない場合は、NULLを書くことでパラメータが付与されません
$mediaは、<link>タグのmedia属性を指定できます。media属性に何が指定できるかは、コチラやコチラ(英語)をご覧ください

wp_register_styleとwp_enqueue_styleの違い

これまで見ていただいてほぼ同じように見えるwp_register_style()とwp_enqueue_style()ですが、この違いは、WordPressのページ読み込み時にCSSファイルを登録するのかそれとも読み込むのかの違いがあります。wp_register_style()ではページを表示するときに使用したCSSファイルは現れないので、例えばwp_register_style()でCSSファイルの登録のみをしておいて特定のタイミングでwp_enqueue_style()を使ってページ表示時にCSSファイルを読み込むといったプラグイン開発を行うさいにありそうな場合や、wp_register_style()を使わずにfunctions.phpにwp_eneueue_style()のみを使ってCSSファイルを読み込むといったテーマ開発でよくありそうな場合で使い分けを行います。

wp_register_styleとwp_enqueue_styleのコードサンプル

wp_register_style()とwp_enqueue_style()の使用例でstyle.cssを読み込む使い方です。

function add_style() {
    wp_register_style('main', get_template_directory()."style.css", array(), NULL);
    wp_enqueue_style('main');
}

add_action('wp_enqueue_scripts', 'add_style'); /* 実際のフック */

2行目のwp_register_style()でmainというフック名でstyle.cssを登録し3行目のwp_enqueue_style()でmainフックを読み込ませています。wp_enqueue_style()は、wp_enqueue_script()のCSS版といった感じでwp_enqueue_style()にwp_register_style()の引数を書けばwp_enqueue_style()のみで動きます。ただwp_enqueue_script()と同じように$handleのみが必須なので注意が必要です。

まとめ

今回はWordPressのテーマやプラグインでCSSの登録を行うwp_register_style()とwp_enqueue_style()を紹介しました。WordPressでCSSの登録を行うと同様な形でJavascriptの登録を行うwp_register_scriptとwp_enqueue_scriptの使い方とその違いとはもあるのでこちらも見てあなたのテーマ開発に生かしてください。