WordPressでテーマを作成していると、「CSSファイルってどうやって読み込ませるのが正解?」という疑問にぶつかる方は多いでしょう。実は、CSSを読み込むには主に2つの方法があります。
<link>
タグを直接書く方法functions.php
にwp_enqueue_style()
を記述する方法
この記事では、それぞれの特徴と、なぜWordPressでは wp_enqueue_style()
の使用が推奨されているのか、さらに is_admin()
を使って管理画面との分離方法についても解説します。
✅ 方法①:linkタグで直接CSSを読み込む
HTMLでおなじみの方法で、テーマのheader.php
などに以下のように記述します。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
この方法のメリット:
- 手軽で初心者にとって分かりやすい
- テストや一時的な読み込みには便利
ただし…
WordPressのテーマ構造やプラグインと連携する際には不向きです。複数のCSSファイルを読み込む際や、条件分岐が必要な場面では柔軟性がなく、トラブルの原因になることもあります。
✅ 方法②:wp_enqueue_style()を使ってCSSを読み込む(推奨)
WordPressが公式に推奨している方法が wp_enqueue_style()
関数を使う方法です。
functions.php
に以下のように記述します。
function my_theme_enqueue_styles() {
// 管理画面では読み込まないようにする
if ( !is_admin() ) {
wp_enqueue_style(
'main-style',
get_template_directory_uri() . '/style.css',
array(),
'1.0.0',
'all'
);
}
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');
この方法のメリット:
- WordPressの仕様に沿っており、安全・安定
- 読み込む順番や条件分岐(例:特定のページだけ読み込む)が可能
- プラグインや他テーマと干渉しにくい
- ブラウザキャッシュ対策がしやすい
🔍 is_admin()
とは?
is_admin()
は「現在の画面が WordPress の管理画面かどうか」を判定する関数です。
true
:管理画面(ダッシュボードなど)であるfalse
:フロント(ユーザーが見るページ)である
この条件を使うことで、管理画面には不要なCSSやJSの読み込みを避けることができ、パフォーマンス向上や誤作動防止につながります。
✅ is_admin()
を使う理由
理由 | 内容 |
---|---|
管理画面を汚さない | フロント向けのCSSが管理画面に影響するのを防ぐ |
軽量化 | 管理画面の無駄な読み込みを防止 |
不具合回避 | JSやCSSが管理画面と競合することを避けられる |
🔁 実際の比較
項目 | linkタグ | wp_enqueue_style |
---|---|---|
推奨度 | ❌ 非推奨 | ✅ 推奨 |
柔軟性 | 低い | 高い(条件分岐・依存関係対応) |
管理画面対応 | 不可 | is_admin() で対応可能 |
プラグイン干渉対策 | 弱い | 強い |
🎯 まとめ
WordPressテーマ開発では「条件に応じて適切に読み込む」ことが重要!
開発初期は<link>
でも可能だが、本番では wp_enqueue_style()
を使うのがベスト
is_admin()
を使えば、管理画面とフロント画面の処理をしっかり分けられる
✅ 今すぐ使える実装コード
function my_theme_enqueue_assets() {
// 管理画面では読み込まない
if ( !is_admin() ) {
// CSSの読み込み
wp_enqueue_style(
'main-style',
get_template_directory_uri() . '/style.css',
array(),
'1.0.0',
'all'
);
// JavaScriptの読み込み
wp_enqueue_script(
'main-script',
get_template_directory_uri() . '/js/script.js',
array('jquery'),
'1.0.0',
true // trueでフッターに読み込み
);
}
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_assets');
FAQ(WordPressでCSSを読み込む方法)
CSSはどこに書くのがベスト?
基本はテーマ(または子テーマ)のstyle.css
をwp_enqueue_style()
で読み込み、追加カスタムは子テーマか専用プラグインで管理するのが安全です。
functions.php
での正しい読み込みコードは?
例:wp_enqueue_style( 'theme-style', get_stylesheet_uri(), [], '1.0.0' );
子テーマのCSSはget_stylesheet_directory_uri()
を使います。
読み込み順はどう制御する?
第3引数の依存配列で順序付けします(例:['wp-block-library']
)。依存関係で解決できない場合は1ファイルにまとめるのが確実です。
プラグインCSSより後に自分のCSSを当てたい
自作CSSのハンドルにプラグインCSSのハンドルを依存として指定します。難しい場合は「後から読み込む1つの上書きCSS」を作るのが現実的です
子テーマを使うべきタイミングは?
テーマのCSSやテンプレートを編集したい時は必須。親テーマ更新時に上書きされないためです。
ブロックテーマの場合はtheme.json
とどちらを使う?
基本はtheme.json
で設計→足りない部分だけCSSで補強、が推奨です。将来の互換性と管理性が高いです。
クリティカルCSSやインラインCSSは有効?
ファーストビューに限った軽いインラインは有効です。ただし過剰なインライン化はキャッシュ効率を下げるので最小限に。
バージョン付与(キャッシュバスティング)は必要?
必要です。wp_enqueue_style()
の第4引数にテーマバージョンやビルドのハッシュを入れると更新が即時反映されます。
不要なCSS(プラグイン)を止めたい
wp_dequeue_style()
/ wp_deregister_style()
を適切なフック(例:wp_enqueue_scripts
の後段)で使います。影響範囲を限定して実施してください。
CDNやMinifyプラグインとの相性は?
基本は良好ですが、結合・最適化で順序が崩れることがあります。問題が出たら該当CSSを除外リストに入れて順序を保つと安定します。