通常、プラグインで独自のスタイルを追加するときは、以下のようにして、別ファイルとして作ったスタイルシートファイルを登録・読み込ませますね。
function sample_enqueue_plugin__style_init(){
//スタイルシートの登録
wp_register_style( 'sample-style', plugin_dir_url( __FILE__ ) .'/style.css', array(),null, 'all' );
//スタイルシートの読み込み
wp_enqueue_style('sample-style');
}
add_action('wp_enqueue_scripts','sample_enqueue_plugin__style_init');ちなみにフロントエンド用なら上記の記述のようにwp_enqueue_scriptsを使い、管理画面用なら以下のようにadmin_enqueue_scriptsを使います
add_action('admin_enqueue_scripts','sample_enqueue_plugin__style_init');さらに、ブロックエディタへ適用したいなら、以下のようにenqueue_block_editor_assetsにすれば大抵はOKです。
大抵．．としたのは、適用されない（ifarmeにきちんと出力されない）場合があるからです
add_action('enqueue_block_editor_assets', 'sample_enqueue_plugin__style_init');もちろん全部のアクションフックを列記すれば、同じスタイルシートをフロントエンド・バックエンド・エディタへと反映できるんです。
そして、より効率よく必要な機能のスタイルだけを読み込ませようとすると、その分だけスタイルシートを用意して、機能有効化と同時に上記のコードで登録・読み込みをさせるということになるわけです。
もちろんこれでもそれほど表示の処理に負担がかかるわけではないでしょうから問題ないのですが、ヘッダー内にスタイルシートへのリンクがずらっと並ぶ状況になります。
ちなみに私が作成した【Hima Art Utility】プラグインで、いろいろな機能を有効化したのがこの状態です。
もう一度書きますが、これでも全く問題はありません、ハイ（笑）。
ただ、これをもう少し効率よくできないかなぁと訪ね当たったのが、今回紹介する「wp_add_inline_style」というWordPressの組み込み関数です。
あまり使われているケースがないようですけど、WordPressの3.3.0から導入されている関数なんですね。
この関数を使うと何ができるかというと、既存のスタイルシートの後ろにインライン（HTML上にコード展開した状態）でスタイルコードを出力できるんです。
例えば、こんな感じです。
上の行に「frontend-bg-style」というidのCSSが読み込まれてて、その下に、「frontend-bg-style-inline」というIDでインラインでスタイルコードが出力されてますね。
これが今回紹介する「wp_add_inline_style」関数の機能です。
個人的見解ですけど、これがあれば、自作プラグインで1つだけスタイルシートをエンキュー（読み込み）させておいて、あとはすべて「wp_add_inline_style」していく、つまり読み込むのは1つのスタイルシートで済んで便利～♪♪ですよね。
wp_add_inline_style関数の使い方
公式にも書いてありますが、この関数は、既にエンキュー（読み込み）済のスタイルシートにインラインでデザインコードを追加するものですので、まずは、プラグインフォルダ内に1つスタイルシートを作り、それをWordPressへ登録・読み込みさせる必要があります。
具体的なコードは以下です（プラグインフォルダ直下にstyle.cssというファイルを作成したものとします）。
/***** プラグインスタイルの読み込み *****/
function sample_enqueue_plugin_frontend_style(){
//スタイルシートの登録
wp_register_style( 'sample-frontend-style', plugin_dir_url( __FILE__ ) .'/style.css', array(),null, 'all' );
//スタイルシートの読み込み
wp_enqueue_style('sample-frontend-style');
}
add_action('wp_enqueue_scripts','sample_enqueue_plugin_frontend_style');追加したら、トップページなどを表示後、HTMLソースを表示させて、IDが「sample-frontend-style」になっているスタイルシートが読み込まれているか確認してください
これで前準備は完了です。
あとは、以下のようにして、PHPへ書いたコードを「wp_add_inline_style」で上書きしていけばOK、もう別のスタイルシートを作って読み込ませる必要はありません。
function sample_inline_style_init(){
$custom_css = '
ここにスタイルコードを記述
}
';
//sample-frontend-styleにインラインでスタイルコードを追加
wp_add_inline_style( 'sample-frontend-style', $custom_css );
}
}
add_action('wp_enqueue_scripts','sample_inline_style_init');複数追加する場合は、ユーザー定義関数名（上の例ではsample_inline_style_init）を変更すれば、いくつでも追加できます。
テーマでも使えます
これはプラグインだけでなく、テーマ（子テーマ）でももちろん使えます。子テーマではもともとスタイルシートが読み込まれていますから、HTMLソースから子テーマ用のCSSファイルのIDを調べて、以下のコードの赤字部分を合わせればOKです。
function sample_inline_style_init(){
$custom_css = '
ここにスタイルコードを記述
}
';
//sample-frontend-styleにインラインでスタイルコードを追加
wp_add_inline_style( 'sample-frontend-style', $custom_css );
}
}
add_action('wp_enqueue_scripts','sample_inline_style_init');以上、便利なWordPress組み込み関数「wp_add_inline_style」の紹介と使い方でした。
こんな便利な関数がなぜあまり紹介されていないのか．．．個人的にはとても疑問でしたので、自身の備忘録も兼ね紹介しました。
「wp_add_inline_style」のメリット・デメリット
すごく便利な「wp_add_inline_style」ですが、メリットとデメリットがあります。
「wp_add_inline_style」のメリット
通常CSSファイルにはPHPで指定した値や変数をそのまま格納することができませんが、「wp_add_inline_style」を使うことで、同じPHPファイル（コード）の中で値のやり取りができるので、PHPの変数を使った値をデザインに渡して出力することが可能になります。
例えば、プラグインの設定画面でoptionsテーブルに保存したデータを呼び出した後、それを含めたスタイルコードを生成してフロントエンド、バックエンド、ブロックエディタへも適用させるといった場合に重宝します。
「wp_add_inline_style」のデメリット
「wp_add_inline_style」のデメリットは、通常のenqueueとは違うので、遅延処理を自動化する際の対象から外れてしまうことです。ただ、CSSの場合、無理に遅延処理を行うと逆に悪影響が起こることが多いので、さして必要性はないでしょうから、デメリットとは言えないかも知れませんね。
wp_add_inline_scriptもある、ただ注意点も
ここまでスタイルコードをインライン出力する「wp_add_inline_style」を紹介してきましたが、スクリプトをインライン出力する「wp_add_inline_script」という関数もあります。
基本的な使い方は同じです。
1点注意事項として、サイトの表示高速化行う目的のプラグインを使ったり、独自に設定したりして、外部スクリプトの読み込み時に「async」や「defer」属性を付加して遅延読み込みしている場合があります。
何も除外等をせずに行った場合、WordPress標準で読み込まれるjQueryも遅延読み込みされるため、jQueryを「wp_add_inline_script」で出力すると、読み込み順の問題で動作しないことがあります。
いろいろ調べましたが、「wp_add_inline_script」（「wp_add_inline_style」も）で出力する場合に「async」や「defer」属性を付加することはできないようなので（自動・手動とも）、jQueryは従前通りファイルに保存したものをenqueueするか、echoで出力するかした方がいいでしょう。
