「wp_register_style」と「wp_enqueue_style」の使い方（使用方法の違いによる読み込み方の検証）

【結論】「wp_enqueue_style」だけを使えばよい！？

以下のようなことをやってみました。

1. 「wp_register_style」「wp_enqueue_style」をそれぞれ別のユーザー定義関数で作り、それぞれを「wp_enqueue_scripts」へフックさせて出力
2. 「wp_register_style」「wp_enqueue_style」を同じユーザー定義関数で作り、それぞれを「wp_enqueue_scripts」へフックさせて出力
3. 「wp_enqueue_style」だけをユーザー定義関数で作り、それを「wp_enqueue_scripts」へフックさせて出力

今までの私の認識としては、「登録」して「キューに入れる」というイメージだったので、1か2が妥当な線だと考えていたのですが、どのパターンでも「キューに入れる」ことで、処理順に応じてヘッダーの最後部へ出力されるという点は共通だったものの、振る舞いが若干異なることが分かりました。

まとめるとこんな結果になりました。

• 「wp_register_style」を使った場合には優先度の指定はできない(「wp_enqueue_style」のみ、または両方を1つのユーザー定義関数で使用した場合のみ優先度指定が可能)
• 優先度を「1」にしても、「wp-emoji-styles」の上までしか移動しない
• 依存性を指定しても原則反映されない
• 「wp_enqueue_style」のみで、優先度と依存するIDを指定した場合には、依存するIDごと移動する

スタイルシートによっては、〇〇というIDの直下へ出力させたいというケースや、優先度を「9999」などにしてヘッダーの最後に適用させたいという場合もあるので、それを問題なくできるだけ指示通りに対応させるには以下のようにするという結論に達しました。

• 基本的にwp_enqueue_styleのみを使えばいい
• 優先度と同時に依存関係は指定しない

なお、この検証はWordPress6.4.1で、テーマはTT3(Twenty Twenty-Three)の派生テーマ（テーマ名を変えたもの）にfunctions.phpを加えた状態のものを使い、プラグインはすべて停止して行いました。他の条件では違いがあるのかも知れません

よく「wp_register_styleを使うかどうかは好みで」みたいなことが書かれていますが、これは自身の中では正確ではなかったということが分かり、かつ、原則wp_register_scriptは必要ないという認識で結論付けました。

標準出力されるスタイルのID順

※インラインではなく直接出力されてる？

registerとenqueueのユーザー定義関数を分けて検証

優先順等何も指定しない

コード

function test_register_style_init(){
	wp_register_style('ha-test-style',get_theme_file_uri('/test-css.css'),array());
}
add_action('wp_enqueue_scripts','test_register_style_init');

function test_enqueue_style_init(){
	wp_enqueue_style('ha-test-style');
}
add_action('wp_enqueue_scripts','test_enqueue_style_init');

挿入された場所

予想通りenqueueされているもののうちの一番下へ挿入された

enqueue側に優先順を付けてみる

enqueue側に優先度1を付けて変化を見てみました。

コード

function test_register_style_init(){
	wp_register_style('ha-test-style',get_theme_file_uri('/test-css.css'),array());
}
add_action('wp_enqueue_scripts','test_register_style_init');

function test_enqueue_style_init(){
	wp_enqueue_style('ha-test-style');
}
add_action('wp_enqueue_scripts','test_enqueue_style_init',1);

挿入された場所

変化がない、この優先順は全く機能していない

優先順をなくし、enqueue側にarray()指定してみる

enqueue時のフック優先順は全く効いていないので、今度はenqueue側で「global-styles」への依存性を指定してみました

コード

function test_register_style_init(){
	wp_register_style('ha-test-style',get_theme_file_uri('/test-css.css'),array());
}
add_action('wp_enqueue_scripts','test_register_style_init');

function test_enqueue_style_init(){
	wp_enqueue_style('ha-test-style','',array('global-styles'));
}
add_action('wp_enqueue_scripts','test_enqueue_style_init');

挿入された場所

変化なし

優先順をなくし、register側にarray()指定してみる

enqueue時の依存性は全く効いていないので、今度はregister側で「global-styles」への依存性を指定してみました

コード

function test_register_style_init(){
	wp_register_style('ha-test-style',get_theme_file_uri('/test-css.css'),array('global-styles'));
}
add_action('wp_enqueue_scripts','test_register_style_init');

function test_enqueue_style_init(){
	wp_enqueue_style('ha-test-style');
}
add_action('wp_enqueue_scripts','test_enqueue_style_init');

挿入された場所

変化なし

register側に優先順を指定してみる

コード

function test_register_style_init(){
	wp_register_style('ha-test-style',get_theme_file_uri('/test-css.css'));
}
add_action('wp_enqueue_scripts','test_register_style_init',1);

function test_enqueue_style_init(){
	wp_enqueue_style('ha-test-style');
}
add_action('wp_enqueue_scripts','test_enqueue_style_init');

挿入された場所

変化なし

この結果から、wp_register_styleとwp_enqueue_styleを別のユーザー定義関数で処理した場合には、何をどうしてもenqueueされるものの最終へ追加されることが判明した。

registerとenqueueのユーザー定義関数をひとまとめにして検証

次に行ったのが、公式などに書かれているwp_register_styleとwp_enqueue_styleを同じユーザー定義関数の中で処理させた場合。

まずは基本的なコード

コード

function test_register_style_init(){
	wp_register_style('ha-test-style',get_theme_file_uri('/test-css.css'));
	wp_enqueue_style('ha-test-style');
}
add_action('wp_enqueue_scripts','test_register_style_init');

挿入された場所

予想通り、enqueueされるものの一番下へ挿入されました。

優先度を設けてみる

次にフックに優先度「1」を付けてみました。

コード

function test_register_style_init(){
	wp_register_style('ha-test-style',get_theme_file_uri('/test-css.css'));
	wp_enqueue_style('ha-test-style');
}
add_action('wp_enqueue_scripts','test_register_style_init',1);

挿入された場所

wp-emoji-stylesの上へ挿入されました（優先度1でもこれ以上上には上がりませんでした）

register側へ依存性を付加してみる

register側へ「global-styles」への依存性を指定してみた

コード

function test_register_style_init(){
	wp_register_style('ha-test-style',get_theme_file_uri('/test-css.css'),array('global-styles'));
	wp_enqueue_style('ha-test-style');
}
add_action('wp_enqueue_scripts','test_register_style_init');

挿入された場所

enqueueされるものの一番下へ挿入されました（依存関係は無視されました）

enqueue側へ依存性を付加してみる

register側へ「global-styles」への依存性を指定してみました

コード

function test_register_style_init(){
	wp_register_style('ha-test-style',get_theme_file_uri('/test-css.css'));
	wp_enqueue_style('ha-test-style','',array('global-styles'));
}
add_action('wp_enqueue_scripts','test_register_style_init');

挿入された場所

enqueueされるものの一番下へ挿入されました（変化なし）

wp_enqueue_styleのみしてみる

最後にregisterを使わずenqueueのみで使用

通常の挿入方法

コード

function test_register_style_init(){
	wp_enqueue_style('ha-test-style',get_theme_file_uri('/test-css.css'));
}
add_action('wp_enqueue_scripts','test_register_style_init');

挿入された場所

enqueueされるものの一番下へ挿入されました

優先度を設定

コード

function test_register_style_init(){
	wp_enqueue_style('ha-test-style',get_theme_file_uri('/test-css.css'));
}
add_action('wp_enqueue_scripts','test_register_style_init',1);

挿入された場所

wp-emoji-stylesの上へ挿入されました（優先度1でもここまでしか上に上がらないという結果になりました）

依存性を付加

「global-styles」への依存性を指定してみました

コード

function test_register_style_init(){
	wp_enqueue_style('ha-test-style',get_theme_file_uri('/test-css.css'),array('global-styles'));
}
add_action('wp_enqueue_scripts','test_register_style_init');

挿入された場所

enqueueされるものの一番下へ挿入されたままでした（つまり依存性が効いていない状態でした）

依存性と優先度の両方を付加

優先度を指定したまま「global-styles」への依存性を指定してみました。

コード

function test_register_style_init(){
	wp_enqueue_style('ha-test-style',get_theme_file_uri('/test-css.css'),array('global-styles'));
}
add_action('wp_enqueue_scripts','test_register_style_init',1);

挿入された場所

global-stylesごと先頭に移動してしまって、おかしなことになりました。この方法では標準の読み込み順自体が変わってしまうので不都合が出る可能性が高いことが分かりました。

「wp_register_style」を使うケースってある？

「wp_register_style」という関数があるのですから、何か使い道があるの？といろいろ考えてみましたが、以下の公式ページのコード例でも、同一ユーザー定義関数内で「wp_enqueue_style」とセットになっているものがほとんどなので、特に必要ないのでは？というのが個人的な結論です。

実体ファイルなしでスタイルコードをインライン出力したい場合には有効

あまり聞き馴染がないかもしれませんが、WordPress本体でも使われているスタイルのインライン出力。

例えばWordPress6.4.1で、ソース表示した冒頭にこんな出力があります。

．．．
<link rel='stylesheet' id='admin-bar-css' href='https://testsite.habone.biz/wp-includes/css/admin-bar.min.css?ver=6.4.1' media='all' />
<style id='admin-bar-inline-css'>

		@media screen { html { margin-top: 32px !important; } }
		@media screen and ( max-width: 782px ) { html { margin-top: 46px !important; } }
	
@media print { #wpadminbar { display:none; } }
</style>
<style id='wp-block-site-title-inline-css'>
.wp-block-site-title a{color:inherit}
.wp-block-site-title{font-size: var(--wp--preset--font-size--xx-large);font-weight: normal;line-height: 1.4;}
.wp-block-site-title a:where(:not(.wp-element-button)){text-decoration: none;}
.wp-block-site-title a:where(:not(.wp-element-button)):hover{text-decoration: underline;}
.wp-block-site-title a:where(:not(.wp-element-button)):focus{text-decoration: underline dashed;}
.wp-block-site-title a:where(:not(.wp-element-button)):active{color: var(--wp--preset--color--secondary);text-decoration: none;}
</style>
．．．

上の「admin-bar」というIDの方は、スタイルシート（実体ファイル）が読み込まれた後に「admin-bar-inline」とIDにInlineが付いた行の下に、生のスタイルコードが出力されています。

一方、その下の「wp-block-site-title-inline」の方は、生のスタイルコードは出力されているものの、「admin-bar」のように、スタイルシート（実体ファイル）の読み込みはありません。

この生のスタイルコードをそのまま出力するインラインスタイル出力の基本的なコード例としては、以下のような感じで、

function sample_inline_style_init(){

$css ="
/****** テストスタイルです *****/
body{
background:red;
}
";
	wp_add_inline_style('ha-test-style',$css);
}
add_action('wp_enqueue_scripts','sample_inline_style_init');

この場合、「ha-test-style」というIDを持つスタイルが登録され、出力されていれば、その下にインラインでスタイルコードが出力されるという仕組みになっています。

従って、「ha-test-style」を出力するためのユーザー定義関数を以下のようにしておいて、そこに対して上記のコードをその下に挿入すれば、スタイルシートの読み込みとインライン出力が同時に行われます。

function test_register_style_init(){
	wp_enqueue_style('ha-test-style',get_theme_file_uri('/test-css.css'));
}
add_action('wp_enqueue_scripts','test_register_style_init');

でもこれは、スタイルシートの実体がある場合で、スタイルシートは実際には存在しないけど、インラインスタイル出力はしたい（つまり上記「wp-block-site-title-inline」の形態）ときには、上のコードだとスタイルシートの実体がその場所にないためエラー（というかインライン出力されない）となります。

そこで、以下のようにすることで、実体はないけどスタイルシートがエンキューされているという状態にすることができ、「ha-test-style-inline」のみが出力されるという風にできるのです。

function test_register_style_init(){
	wp_register_style('ha-test-style',false);
	wp_enqueue_style('ha-test-style');

}
add_action('wp_enqueue_scripts','test_register_style_init');

以下がインラインスタイルだけを出力するコード例をまとめたものなので、自身のサイトのテーマにあるfunctions.phpへ追記して試してみてください。

/*** ha-test-style　ファイルはないけどエンキューされている状態にする ***/
function test_register_style_init(){
	wp_register_style('ha-test-style',false);
	wp_enqueue_style('ha-test-style');

}
add_action('wp_enqueue_scripts','test_register_style_init');

/*** ha-test-styleに対してインラインスタイルを出力 ***/
function sample_inline_style_init(){

$css ="
/****** テストスタイルです *****/
body{
background:red;
}
";
	wp_add_inline_style('ha-test-style',$css);
}
add_action('wp_enqueue_scripts','sample_inline_style_init');

bodyタグに対して赤色の背景色を指定していますので、コード追加後フロントエンドを表示させて、キャッシュのクリアを行えば背景は赤色になるはずです（ソース表示もさせてインライン出力がされているかを確認ください）。

ちなみに、「wp_register_style」の先頭をコメントアウト(//を付ける)して試してみると、ファイルのないものはエンキューできないということで、インラインスタイルも出力されません。

いろいろなケースを考えた結果、「wp_register_style」を使うケースってこれ位かな？というのが現在の私の中の回答です。（ほかにユースケースがあれば教えてほしいです．．）。

【番外編】「enqueue_block_assets」の場合のインライン出力は？

補足として、「wp_enqueue_scripts」がフロントエンドのみに作用するのに対し、ブロックエディターとフロントエンドに共通のスタイルを適用させる際に使用する「enqueue_block_assets」でも、同じ動きをします。

従って、スタイルの登録とエンキューで「enqueue_block_assets」を使っておけば、フロント・ブロックエディターへのインラインスタイル出力の準備は完了していて、「wp_add_inline_style」を使ってインライン出力させるコードを以下のように区別することもできます。

• フロントだけにインライン出力させる場合は「wp_add_inline_style」を用いる関数で「wp_enqueue_scripts」にフックさせる
• フロントとブロックエディターにインライン出力させる場合は「wp_add_inline_style」を用いる関数で「enqueue_block_assets」にフックさせる

何だか便利に使えそうですね。

さらに補足として、ブロックそのものに反映させる（ブロックは編集画面ではfigureタグで出力されている）場合は、「wp_add_inline_style」の対象スタイルIDに「wp-edit-blocks」を指定し、「init」にフックさせると反映されます。

．．ここまでくるとかなりマニアックです（笑）。