WordPressテーマでCSSを読み込む正しい方法（wp_enqueue_style完全ガイド）

WordPressテーマでCSSを読み込むときは、HTMLに直接<link>タグを書き足すのではなく、WordPressが用意している仕組み（enqueue）を使うのが基本です。正しい方法を採用すると、読み込み順の管理、キャッシュ対策、プラグインとの干渉回避、ブロックエディタとの整合などが安定します。

あわせて、テーマの必須ファイルや基本構造を先に押さえておくと理解が早くなります。関連記事として「WordPressテーマの基本構造と必須ファイル一覧」も参照すると迷いにくいです。

結論：CSSはfunctions.phpでwp_enqueue_style()を使って読み込む

WordPressの推奨手順は次のとおりです。

• CSSファイルをテーマ内に配置する（例：/assets/css/）
• functions.phpでwp_enqueue_style()を呼ぶ
• wp_enqueue_scriptsフックに登録する

functions.phpの役割や書き方の基礎は「functions.phpの使い方｜初心者が最初に書くべき5つのコード」も併読すると理解がつながります。

なぜ「enqueue」で読み込む必要があるのか

読み込み順と依存関係を安全に管理できる

WordPressは、テーマ・子テーマ・プラグインがそれぞれCSSを追加します。enqueueを使うと、ハンドル名（識別子）と依存関係をもとに、衝突しにくい順序で管理できます。

キャッシュ対策（更新が反映されない問題）を防げる

CSSの更新が反映されない原因の多くはブラウザキャッシュです。enqueueではver（バージョン）を付けてキャッシュを更新できます。

ブロックエディタや画面ごとの読み分けに対応しやすい

フロントだけでなく、エディタ側にもCSSを当てたい場合があります。enqueueを理解していると、目的別に正しく分けられます。

正しい基本形：テーマのCSSを読み込むコード

まずはstyle.cssを読み込む（最小構成）

WordPressテーマの基本CSSとしてstyle.cssを読み込む例です。

<?php
// functions.php

function theme_enqueue_styles() {
	$handle = 'theme-style';

	wp_enqueue_style(
		$handle,
		get_stylesheet_uri(), // style.css
		array(),              // 依存関係
		wp_get_theme()->get( 'Version' ) // キャッシュ対策
	);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

style.css自体の役割（テーマ情報ヘッダーや基本CSSの位置づけ）を整理したい場合は「style.cssの書き方基礎」も参考になります。

実務でよくある構成：assets/css配下のCSSを読み込む

多くのテーマでは、CSSをassets/css/にまとめます。たとえばassets/css/main.cssを読み込む例です。

<?php
// functions.php

function theme_enqueue_assets() {
	$handle  = 'theme-main';
	$css_uri = get_theme_file_uri( '/assets/css/main.css' );
	$css_ver = filemtime( get_theme_file_path( '/assets/css/main.css' ) ); // 更新時刻でキャッシュ更新

	wp_enqueue_style(
		$handle,
		$css_uri,
		array(),
		$css_ver
	);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_assets' );

filemtime()を使うと、更新のたびに確実に反映される

filemtime()はファイルの更新時刻をバージョンとして付ける方法です。開発中に「直したのに反映されない」が起きにくくなります。
一方で、運用方針によってはテーマバージョン固定（wp_get_theme()->get('Version')）のほうが扱いやすい場合もあります。

get_stylesheet_uri()とget_template_directory_uri()の違い

CSS読み込みで混乱しやすいのが「子テーマ」との関係です。

子テーマ対応の基本

• 子テーマのstyle.cssを指す：get_stylesheet_uri()
• 親テーマのディレクトリを指す：get_template_directory_uri()

「子テーマ側のCSSを読みたいのか」「親テーマ側のCSSを読みたいのか」で使い分けます。子テーマ運用を想定する場合は、get_theme_file_uri()（親子を自動で解決）も便利です。

依存関係（dependencies）を使って読み込み順を安定させる

CSSの読み込み順が崩れると、意図しない上書きが起きます。依存関係配列を使うと、先に読みたいCSSを指定できます。

wp_enqueue_style(
	'theme-base',
	get_theme_file_uri( '/assets/css/base.css' ),
	array(),
	$css_ver_base
);

wp_enqueue_style(
	'theme-main',
	get_theme_file_uri( '/assets/css/main.css' ),
	array( 'theme-base' ), // baseの後にmain
	$css_ver_main
);

読み込み場所はここ：wp_enqueue_scriptsとadmin_enqueue_scripts

フロント（サイト表示側）

フロントのCSSはwp_enqueue_scriptsに登録します。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_assets' );

管理画面（ダッシュボード側）

管理画面専用CSSはadmin_enqueue_scriptsを使います。

function theme_admin_styles( $hook ) {
	wp_enqueue_style(
		'theme-admin',
		get_theme_file_uri( '/assets/css/admin.css' ),
		array(),
		filemtime( get_theme_file_path( '/assets/css/admin.css' ) )
	);
}
add_action( 'admin_enqueue_scripts', 'theme_admin_styles' );

ブロックエディタにCSSを当てる方法（Editor Styles）

「フロントでは整っているのに、エディタ上では見た目が違う」というズレはよく起きます。ブロックエディタにCSSを反映したい場合、Editor Stylesを設定します。

方法1：add_theme_support('editor-styles') + add_editor_style()

function theme_editor_styles() {
	add_theme_support( 'editor-styles' );
	add_editor_style( 'assets/css/editor.css' );
}
add_action( 'after_setup_theme', 'theme_editor_styles' );

ブロックエディタ対応の考え方（テーマ機能の追加や対応範囲）をまとめた記事として「自作テーマにブロックエディタ対応を追加する方法」も合わせて読むと整理しやすいです。

画面ごとにCSSを読み分ける（必要なときだけ読み込む）

パフォーマンス面では「必要なページだけCSSを読み込む」設計も有効です。

function theme_enqueue_conditional() {
	// 全ページ共通
	wp_enqueue_style(
		'theme-main',
		get_theme_file_uri( '/assets/css/main.css' ),
		array(),
		filemtime( get_theme_file_path( '/assets/css/main.css' ) )
	);

	// 固定ページのみ
	if ( is_page() ) {
		wp_enqueue_style(
			'theme-page',
			get_theme_file_uri( '/assets/css/page.css' ),
			array( 'theme-main' ),
			filemtime( get_theme_file_path( '/assets/css/page.css' ) )
		);
	}
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_conditional' );

よくあるNG例と、避けるべき理由

NG：header.phpに<link rel="stylesheet">を直書きする

WordPressの管理機構を迂回するため、プラグインの最適化や読み込み順の調整と衝突しやすくなります。

NG：CSS内で@importを多用する

@importは読み込みが遅くなりやすく、管理もしづらくなります。基本はenqueueで分割管理します。

NG：ハンドル名が重複している

同じハンドル名を使うと上書きや競合の原因になります。テーマ固有の接頭辞を付けるなど、ユニークにします。

トラブルシューティング：CSSが反映されないときの確認ポイント

• ブラウザキャッシュ：verを付ける（filemtime()が有効）
• 読み込み順：依存関係（dependencies）を見直す
• パス：get_theme_file_uri() / get_theme_file_path()で実在パスを指しているか
• ミニファイ/結合系プラグイン：一時的に無効化して挙動を切り分ける
• 子テーマ運用：get_stylesheet_uri()とget_template_directory_uri()の混同がないか

まとめ：CSS読み込みの正攻法を押さえるとテーマ開発が安定する

WordPressテーマでCSSを読み込む正しい方法は、functions.phpでwp_enqueue_style()を使い、フック（主にwp_enqueue_scripts）に登録することです。
加えて、キャッシュ対策（ver）、依存関係、子テーマ対応、ブロックエディタへの反映まで押さえると、実務レベルでも崩れにくいテーマ設計になります。

関連記事

• functions.phpの使い方｜初心者が最初に書くべき5つのコード
• style.cssの書き方基礎
• WordPressテーマの基本構造と必須ファイル一覧
• 自作テーマにブロックエディタ対応を追加する方法｜必要な記述と対応範囲を丁寧に