wp_add_inline_style() は、読み込む CSS(スタイルシート)のすぐあとに、短い CSS を足す関数です。プラグインやテーマの CSS を少しだけ上書きしたいときに、別の CSS のファイルを作らずに済みます。
書き方
wp_add_inline_style( string $handle, string $data ): bool
$handle:足す先の CSS の名前(ハンドル)。wp_enqueue_style()やwp_register_style()で登録した名前$data:足す CSS。<style>のタグは付けない- 戻り値:足せたら true。そのハンドルが登録されていなければ false
使い方の例
作業環境(WordPress 7.1.3)で試した結果を、コメントに書いています。
プラグインの CSS のあとに足す
Contact Form 7 の CSS(ハンドル contact-form-7)のあとに、ラジオボタンの直しを足す例です。wp_enqueue_scripts のフックの中で呼びます。
<?php
add_action( 'wp_enqueue_scripts', function () {
wp_add_inline_style( 'contact-form-7', '.wpcf7 input[type="radio"]{width:auto !important}' );
}, 20 );
プラグインが CSS を登録したあとに呼ぶため、優先度を 20 にしています(ふつうは 10)。
出てくる HTML
<?php
wp_register_style( 'my-css', 'https://example.com/x.css', array(), '1' );
wp_enqueue_style( 'my-css' );
wp_add_inline_style( 'my-css', '.d{color:red}' );
// 出てくる HTML
// <link rel='stylesheet' id='my-css-css' href='https://example.com/x.css' media='all' />
// <style id="my-css-inline-css"> .d{color:red} </style>
元の CSS の <link> のすぐあとに、id="ハンドル-inline-css" の <style> が出ます。あとに出るので、同じ強さのルールなら足した CSS が勝ちます。
CSS のファイルがなくても使える
足す先にちょうどよい CSS がないときは、中身のないハンドルを登録して、そこに足せます。
<?php
add_action( 'wp_enqueue_scripts', function () {
wp_register_style( 'my-inline', false ); // ファイルのないハンドル
wp_enqueue_style( 'my-inline' );
wp_add_inline_style( 'my-inline', '.a{color:red}' );
} );
// 出てくる HTML:<style id="my-inline-inline-css"> .a{color:red} </style>(<link> は出ない)
気をつけること
- 登録されていないハンドルに足すと false で、何も出ません(作業環境で確認した結果)。CSS を読み込まない設定にしたプラグイン(例:
WPCF7_LOAD_CSSを false にした Contact Form 7)では、ハンドルがないので足されません。 <style>のタグごと渡すと、タグは取り除かれて中身だけが出ました。タグは付けずに渡します。- 同じハンドルに何回か足すと、1 つの
<style>にまとめて出ます。 - JavaScript を足すときは
wp_add_inline_script()を使います。

