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

標準出力されるスタイルの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ごと先頭に移動してしまって、おかしなことになりました。この方法では標準の読み込み順自体が変わってしまうので不都合が出る可能性が高いことが分かりました。