通常、プラグインで独自のスタイルを追加するときは、以下のようにして、別ファイルとして作ったスタイルシートファイルを登録・読み込ませますね。

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】プラグインで、いろいろな機能を有効化したのがこの状態です。

もう外部CSSを読み込ませる必要なし?wp_add_inline_styleが超便利!|Twenty Twenty-Two (TT2)のカスタマイズ情報

もう一度書きますが、これでも全く問題はありません、ハイ(笑)。

ただ、これをもう少し効率よくできないかなぁと訪ね当たったのが、今回紹介する「wp_add_inline_style」というWordPressの組み込み関数です。

あまり使われているケースがないようですけど、WordPressの3.3.0から導入されている関数なんですね。

この関数を使うと何ができるかというと、既存のスタイルシートの後ろにインライン(HTML上にコード展開した状態)でスタイルコードを出力できるんです。

例えば、こんな感じです。

もう外部CSSを読み込ませる必要なし?wp_add_inline_styleが超便利!|Twenty Twenty-Two (TT2)のカスタマイズ情報

上の行に「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」の紹介と使い方でした。

こんな便利な関数がなぜあまり紹介されていないのか...個人的にはとても疑問でしたので、自身の備忘録も兼ね紹介しました。


最後に、これを応用すると、プラグインの設定画面でoptionsテーブルに保存したデータを呼び出した後、それを含めたスタイルコードを生成してフロントエンド、バックエンド、ブロックエディタへも適用させることができます。