WordPress:wp_register_styleとwp_enqueue_styleの違いを把握する

以前の記事でwp_register_script関数とwp_enqueue_script関数の違いについて解説しました。

WordPress:wp_register_scriptとwp_enqueue_scriptの違いを把握する

似たような機能でwp_register_style関数とwp_enqueue_style関数があります。
WordPressでstyleタグを出力するとき、使用することが推奨されています。

しかしこの二つの関数は構文が似ていて違いがよくわかりません。
いったいどんな違いがあるのでしょうか。

各関数の構文

まずはwp_register_styleとwp_enqueue_styleの構文を確認してみます。

wp_register_styleの構文

wp_register_styleは次のようになっています。

wp_register_styleの構文

wp_register_style($handle, $src, $deps, $ver, $media)

引数名	内容	省略	規定値
$handle	登録するスタイル情報の名前。重複しない任意の文字列。	必須	-
$src	cssファイルのパス。	必須	-
$deps	cssファイルが依存している$handleの値を要素に持つ配列。	省略可能	array()
$ver	cssファイルのパスにバージョンとして付加される文字列。	省略可能	false(付加しない)
$media	media属性	省略可能	'all'

wp_enqueue_styleの構文

次はwp_enqueue_styleの構文を確認してみます。

wp_enqueue_styleの構文

wp_enqueue_style($handle, $src, $deps, $ver, $media)

引数名	内容	省略	規定値
$handle	登録するスタイル情報の名前。重複しない任意の文字列。	必須	-
$src	cssファイルのパス。	必須	-
$deps	cssファイルが依存している$handleの値を要素に持つ配列。	省略可能	array()
$ver	cssファイルのパスにバージョンとして付加される文字列。	省略可能	false(付加しない)
$media	media属性	省略可能	'all'

構文が同じ

二つの関数を並べてみるます。

wp_register_style($handle, $src, $deps, $ver, $media)
wp_enqueue_style($handle, $src, $deps, $ver, $media)

緑色の箇所が、異なる部分です。
関数名が違うだけで、受け取る引数の数と内容が同じです。

これでは、二つの関数の違いがよくわからないという疑問が出てくるのも仕方がないですね。

wp_register_styleとwp_enqueue_styleの違い

二つの関数名で特徴的な部分はregisterとenqueueです。
registerは「登録」、enqueueは「キューに入れる」という意味を持っています。

ここで「キュー」とは、styleタグとして出力する前に、cssファイルのパスなどを保存しておくデータ領域を指します。

キューはwp_head()でstyleタグが出力するときに確認されます。
その際、$depsで指定した依存関係を考慮しながらタグが生成されます。

「登録」も「キューに登録」というイメージを持つかもしれませんが、ここでは、キューに入れる候補をキューとは別のデータ領域に保存しています。

つまりwp_register_style関数を実行しただけではstyleタグとして出力されません。
出力するには、次のコードのように同じ$handleに対してwp_enqueue_style関数を実行して、「登録」されている情報を「キューに入れる」必要があります。

wp_register_style( 'a1', '/css/a1.css' );
wp_enqueue_style( 'a1' );

AFFS Simple Code Viewer

Copy

実行すると、headタグ内に次のstyleタグが出力されます。

WordPressの作法としては、「登録」してから「キューに入れる」のが正しいです。
その点からいうと、上のコードは非常に分かりやすいですね。

しかし僕たちを混乱させるのが、次のコードのように、wp_enqueue_styleだけでもstyleタグを出力できる点ですね。

wp_enqueue_style( 'a1', '/css/a1.css' );

AFFS Simple Code Viewer

Copy

「wp_register_styleいらないじゃん！」と思いますね。

使い分ける基準があるのでしょうか。

wp_register_styleとwp_enqueue_styleの使い分け

キューを使ったstyleタグの出力は、次の二つの方法があります。

wp_register_styleで「登録」して、wp_enqueue_styleで「キューに入れる」
wp_enqueue_styleで直接「キューに入れる」

どちらでもいい

二つの方法の使い分けですが、「好きなほうを使えばいい」が正解です。
それというのも、wp_enqueue_style関数を実行したとき、wp_register_style関数で「登録」されていないハンドルが指定された場合、wp_register_style関数と同じロジックで「登録」されるからです。

つまり、上記の二つの方法は全く同じ結果になります。
あとは、関数を2回呼び出すのをムダととるかどうかで、これはプログラマー側の判断次第です。