wp_enqueue_style() の使い方｜説明・引数・注意点

説明

基本構文

wp_enqueue_style( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, string $media = 'all' ): void

引数

• $handle：スタイルの識別名
• $src：CSSファイルのURL
• $deps：先に読み込むスタイルのハンドル
• $ver：バージョン（キャッシュ対策）
• $media：メディア指定（all など）

戻り値

戻り値はありません。

使い方（サンプル）

function my_enqueue_styles() {
	wp_enqueue_style( 'my-style', get_stylesheet_uri(), array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );

注意点

• 必ず wp_enqueue_scripts フック（管理画面なら admin_enqueue_scripts）の中で呼びます。
• $ver に filemtime() の値を渡すと、更新時にキャッシュが自動で切り替わります。
• 同じハンドルを二重に登録しても、1回しか出力されません。

実務での使いどころ

• テーマやプラグインのCSSを読み込むとき。wp_enqueue_scripts フックの中で呼ぶ。
• 特定のページだけで、CSSを読み込むとき（is_page() などの条件分岐の中で呼ぶ）。
• 他のスタイルシートに依存するCSSを、正しい順序で読み込むとき（$deps）。

よくあるミスと対処

• header.php に <link> を直接書いている。依存関係の管理ができず、同じCSSが二重に読み込まれることもある。
• バージョン（第4引数）を指定していない。省略するとWordPress本体のバージョンが付くため、CSSを更新しても、ブラウザのキャッシュが残ることがある。
• 子テーマのCSSを、親テーマより先に読み込み、上書きが効かない。依存（$deps）に、親テーマのハンドルを指定する。
• wp_enqueue_scripts フックを使わずに、直接呼び出している。

NG例

wp_enqueue_style( 'my-style', get_theme_file_uri( '/css/main.css' ) ); // フックの外で呼んでいる

OK例

add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style( 'my-style', get_theme_file_uri( '/css/main.css' ), array(), '1.0.0' );
} );

使い分け早見表

関連項目

wp_register_style()、wp_enqueue_script()、wp_add_inline_style()

公式リファレンス：wp_enqueue_style() | Function | WordPress Developer Resources