CSSをHTMLソースに直接出力する、wp_add_inline_style()の使い方

WordPressでは、通常はスタイルコードを書いたスタイルシートファイルを読み込んで（登録とエンキューをして）適用させるのが普通ですね。

でも、wp_add_inline_style()関数を使うと、HTML上に直接スタイルコードを出力できるんです。

これが威力を発揮するのは、PHPからスタイルを出力するため、プラグインの設定画面などで指定した値を変数として渡してスタイルコードにして出力できること。通常の.css形式のファイルではできないので、結構重宝します。

ちなみにこのページをHTMLソース表示してもうらと、本サイトで配布しているHima Art Utilityプラグインのインラインスタイルが以下のように出力されていて、これもwp_add_inline_style()関数で出力しているので、確認してみてください。

wp_add_inline_style()を使う利点は、必要な場合に同じスタイルをブロック側にも適用させやすいこと。これについては主旨から外れるので、文末の「補足：ブロックエディター側にも同じスタイルを反映させる方法」で紹介していますので興味のある方はご覧ください。

wp_add_inline_style()でスタイルコードを出力する前準備

wp_add_inline_style()は予めエンキュー（HTML上にスタイルシートファイルへの参照をリンク出力する）したスタイルシートのハンドル名に対して、インラインで（直接）スタイルコードを出力させるための関数です。

従ってこれを使用するには、インライン出力するスタイルシートのハンドル名を指定する必要があります。

ハンドル名は以下の3つの方法のいずれかで作成するなり、今出力されているものを利用するなりすればいいでしょう。

既に出力されているスタイルのハンドル名を調べる

WordPressはテーマを通じて表示されていますので、必ずそのテーマ用のスタイルシートが読み込まれていますから、そのハンドル名を調べます。

サイトの何かのページを表示させ、ソース表示させると、以下のようなスタイルシートへのリンクを見つけます。

<link rel='stylesheet' id='hatt3-for-custom-css' href='URL' media='all' />

この場合、「id='hatt3-for-custom-css'」がハンドル名を示していて、最後の「-css」を除く、「hatt3-for-custom」というのがハンドル名になります。

WordPress本体が出力するスタイルシートへのリンクも多数ありますが、読み込み順序の問題などでwp_add_inline_style()でのスタイル出力がうまく行かない場合があるので、有効化しているテーマのスタイルシートリンクのハンドル名を使用することをおすすめします

ファイルありのスタイルシートを登録してエンキューする方法

以下がテーマフォルダの中に「for-inline-style.css」というファイルを作り、そのスタイルシードを登録してエンキューするためのサンプルコードです。有効化しているテーマのfunctions.phpへ追記した後、ソース表示をすると「sample-frontend-style-css」というハンドル名のスタイルシートリンクが出力されているのを確認してください。

/***** インラインスタイルを使用するためのスタイルシートファイルの読み込み *****/
function  pwcn_enqueue_theme_frontend_style(){
//スタイルシートの登録
wp_register_style( 'sample-frontend-style', get_theme_file_uri('/for-inline-style.css'), array(),null, 'all' );

//スタイルシートの読み込み
wp_enqueue_style('sample-frontend-style');
}
add_action('wp_enqueue_scripts',' pwcn_enqueue_theme_frontend_style');

この方法の利点は、「for-inline-style.css」というファイルにスタイルコードを追加しても反映されますし、後述するインラインスタイルを出力しても適用されるようになる点です。

スタイルシートの実体が必要ない（スタイルシートへコードを書くことがない）という場合は、次項の方法がおすすめです。

実体のないスタイルシートを登録してエンキューする方法

インラインスタイルの出力のみに使用するので実体ファイルと読み込みは不要という場合は以下のコードで登録とエンキューをしておくこともできます。

/* インラインスタイル出力用のスタイルエンキュー */
function pwcn_enqueue_theme_frontend_style(){
//スタイルシートの登録
wp_register_style( 'sample-frontend-style', false, array(),null, 'all' );

//スタイルシートの読み込み
wp_enqueue_style('sample-frontend-style');
}
add_action('wp_enqueue_scripts','pwcn_enqueue_theme_frontend_style');

先ほどのファイルありの場合と異なるのは、第二引数のファイルの指定を「false」にしていることです。

この方法では実際のスタイルシートは存在しないので、インラインスタイルで出力したもののみが適用されます。

インラインスタイルの出力方法

さて、インラインでスタイルコードを出力するハンドル名を確定する前準備が完了したら、そのハンドルに対して以下のようなコードを使ってスタイルを出力していきます。

function pwcn_inline_style_init(){
$custom_css = '
ここにスタイルコードを記述
';

//sample-frontend-styleにインラインでスタイルコードを追加
	wp_add_inline_style( 'sample-frontend-style', $custom_css );
}
add_action('wp_enqueue_scripts','pwcn_inline_style_init');

「ここにスタイルコードを記述」の部分に適用させたいスタイルを記述していけばOKです

例えば「ここにスタイルコードを記述」の部分に「body{background:#000!important;}」などを書いて背景が黒色になるかを確認したりすると適用されているかどうかの確認がしやすいですね

このwp_add_inline_style(第一引数,第二引数)は、第一引数に「どのハンドルに」、第二引数は「どのコードを」スタイルコードとして出力するかを指定します

複数のインラインスタイルを出力したいときは

先ほど書いたようにwp_add_inline_style()関数は、「どのハンドルに」「どのスタイルを」出力するかを決めてスタイルコードを出力させるための関数なので、先ほどのコードのユーザー定義関数名を例えば以下のように変えて追加すれば、別のインラインスタイルをいくらでも出力させることができます。

function pwcn_another_inline_style_init(){
$custom_css = '
ここにスタイルコードを記述
';

//sample-frontend-styleにインラインでスタイルコードを追加
	wp_add_inline_style( 'sample-frontend-style', $custom_css );
}
add_action('wp_enqueue_scripts','pwcn_another_inline_style_init');

要素を変数で渡して出力する方法

冒頭で変数も渡せるという話をしましたので補足として。

例えばテーマの設定画面に独自の背景色を「bg-color」という設定名で保存している場合に、インラインスタイルを使ってスタイルを適用させたい場合には以下のように記述します。

function pwcn_inline_style_init_theme_sample(){
$bg_color = get_theme_mod( 'bg-color','#fff' ):

$custom_css = '
body{
background:'.$bg_color.';
}
';

//sample-frontend-styleにインラインでスタイルコードを追加
	wp_add_inline_style( 'sample-frontend-style', $custom_css );
}
add_action('wp_enqueue_scripts','pwcn_inline_style_init_theme_sample');

テーマ設定画面での設定項目追加の方法は主旨から外れるので割愛しますが、このコードが適用されると、テーマの「bg-color」という設定名で保存されている色をサイトの背景色としてスタイル出力し、もしも設定がなかったら白色（#fff）を指定するスタイルを出力できるようになります。

これは通常のスタイルシートファイルでは使えない芸当ですから、wp_add_inline_style()関数の真骨頂と言えるでしょう。

---

以上、wp_add_inline_style()の使い方でした。

今まで変数値をスタイルに含めて出力する場合には、PHP側で作ったものをスタイルシートの中にコードとして追加するような措置をするという手法が主流でしたが、wp_add_inline_style()を使えば簡単にできますね。

表示速度に影響出るのでは？ということも言われることがあります。このページではソースを確認してもらえば分かる通り、実にたくさんのコードをインラインで出力していますがどうでしょう？表示速度に影響ありそうですか？

私見としてはPHPでCSSに変換して出力するよりもサーバーで処理する負荷が下がってより高速に表示されるような気がするのですがいかがでしょう？

．．というようなことに興味を持ちつつwp_add_inline_style()を使って見てくださいね。便利ですよ！

補足：ブロックエディター側にも同じスタイルを反映させる方法

最後に補足として、フロントエンド（表示画面側）に出力したインラインスタイルをブロックエディター側にも反映させるためのコード例を紹介します。詳細は割愛しますが、これまで紹介したコードと見比べていただければわかるでしょう。

function pwcn_inline_style_with_blocks_init(){
$custom_css = '
ここにスタイルコードを記述
';

//sample-frontend-styleにインラインでスタイルコードを追加
	wp_add_inline_style( 'sample-frontend-style', $custom_css );
//ブロックエディターにインラインでスタイルコードを追加
	wp_add_inline_style( 'wp-edit-blocks', $custom_css );
}
add_action( 'init', 'pwcn_inline_style_with_blocks_init');
add_action('wp_enqueue_scripts','pwcn_inline_style_init');