[WordPress] インライン CSS/JS をエンキューして出力する

テーマカスタマイザーから引っ張ってくるコンテンツでは、スタイル・スクリプトをインラインとして出力したい時があります。
そんな時に使える、wp_add_inline_style() / wp_add_inline_script() という関数の紹介です。これを使うことで適切にエンキューされたスタイル・スクリプトを出力できます。

使い方

基本的な使い方は wp_enqueue_style とほぼ変わりません。
wp_add_inline_style がスタイル用、
wp_add_inline_script がスクリプト用です。

一つ注意点は、$handle へは、既にキューに登録されているスクリプト / スタイルのハンドル名を入れなくてはなりません。
その指定したハンドルのスタイルがロードされた直後にインラインスタイルが出力されることになります。そのためハンドル名が変わった場合などには注意が必要です。

キューに登録されているスタイルとは違う位置で出力したい場合、wp_register_style を使って別のハンドル名を登録し、そのハンドルを使うことで可能になります。

例

function load_styles() {
  wp_enqueue_style( 'theme-style', get_template_directory_uri().'/style.css', array(), '1.0.0' );
  $color = get_theme_mod( 'color_link', '#00619f' );
  $inline_style = ".entry a { color: {$color}; }"
  wp_add_inline_style( 'theme-style', $inline_style );
}
add_action( 'wp_enqueue_scripts', 'load_styles' );

この例では、theme-style がロードされた直後に、インラインでスタイルが出力されます。
インラインのスタイル/スクリプトのコンテンツ (この例だと $inline_style 変数) を <style> タグで囲う必要はありません。そのままコンテンツのみ記述してください。

カテゴリー:Web制作WordPressテーマ開発