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

0

テーマカスタマイザーから引っ張ってくるコンテンツでは、スタイル・スクリプトをインラインとして出力したい時があります。
ただ、WordPress のテーマガイドラインによると、すべてのスタイル・スクリプトは正しくエンキューされている必要があり、wp_head へのフックで直接吐き出すのは認められていません。

そこで使えるのが 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 がロードされた直後に、インラインでスタイルが出力されます。
インラインのコンテンツ内 (この例だと $color 変数) を <style> タグで囲う必要はありません。そのままコンテンツのみ記述してください。

ミルコン@管理人

しがない学生の WordPress デベロッパー。最近は WordPress テーマの作成や翻訳などやってます。フロントが好き。Twitter: @mirucons

スポンサーリンク

シェアする

コメントを残す

メールアドレスが公開されることはありません。

スパム対策の為、日本語が含まれない投稿は無視されますのでご注意ください。