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 登録する識別名 None
$src 登録するCSSのパス None
$deps CSSの依存性 × array()
$ver パラメータの付与 × false
$media <link>タグのmedia属性 × all
  • $handleは登録させるフック名で、あらかじめWordPressで登録されているフック以外の好きな名前を決めれます
  • $srcはCSSのパスを書きます。この2つは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 登録する識別名 None
$src 登録するCSSのパス × None
$deps CSSの依存性 × array()
$ver パラメータの付与 × false
$media <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を読み込む使い方です。

register cssfunction 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の使い方とその違いとはもあるのでこちらも見てあなたのテーマ開発に生かしてください。

+1 Pocket はてブ!
© 2012 - 2018 SAMURAI PROJECT Proudly powered by WordPress