wp_add_inline_style() の使い方|説明・引数・注意点

説明

wp_add_inline_style() は、登録済みのスタイルに、インラインCSSを追加する関数です。

基本構文

wp_add_inline_style( string $handle, string $data ): bool

引数

  • $handle:対象のスタイル識別名
  • $data:追加するCSS(style タグは不要)

戻り値

成功すれば true。

使い方(サンプル)

wp_add_inline_style( 'my-style', 'body { background: #f5f5f5; }' );

注意点

  • 対象のスタイルが登録されていないと追加できません。
  • テーマカスタマイザーで設定した色を出力する、といった用途に向いています。

実務での使いどころ

  • PHPで決まる値(テーマのカスタマイザーの色など)を、CSSとして出力するとき。
  • 特定のスタイルシートの後に、上書きのCSSを追加するとき。

よくあるミスと対処

  • <style> タグを含めて渡している。タグを渡すと、警告が出て、タグが取り除かれる。CSSのコードだけを渡す。
  • 対象のハンドルが、登録されていない。登録されていないと、追加されない。
  • 値を、検証せずに、CSSへ埋め込んでいる。色なら sanitize_hex_color() などで、検証する。

NG例

wp_add_inline_style( 'my-style', '<style>body{color:red}</style>' ); // 警告が出て、タグが取り除かれる

OK例

wp_add_inline_style( 'my-style', 'body{color:' . sanitize_hex_color( $color ) . '}' );

使い分け早見表

関数 役割
wp_add_inline_style() インラインのCSSを追加する
wp_add_inline_script() インラインのJavaScriptを追加する
wp_enqueue_style() スタイルシートを読み込む

関連項目

wp_enqueue_style()、wp_add_inline_script()

公式リファレンス:wp_add_inline_style() | Function | WordPress Developer Resources

コメント

タイトルとURLをコピーしました