WordPressでCSSを読み込む正しい方法｜linkタグとwp_enqueue_styleの違いとは？

WordPressでテーマを作成していると、「CSSファイルってどうやって読み込ませるのが正解？」という疑問にぶつかる方は多いでしょう。実は、CSSを読み込むには主に2つの方法があります。

1. <link>タグを直接書く方法
2. 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() を使う理由

🔁 実際の比較

🎯 まとめ

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');