wp_add_inline_style():読み込む CSS のあとに短い CSS を足す(WordPress)

WordPress

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() を使います。

逆引きリファレンスの一覧へ