【WordPress】wp_enqueue_styleの使い方｜CSSを正しく読み込む方法

WordPressでCSSを正しく読み込む方法として推奨されているのがwp_enqueue_style関数です。header.phpに直接<link>タグを書き込むことも可能ですが、テーマやプラグインの競合を防ぎ、依存関係やバージョン管理を一元化するためにはenqueueを使うのがベストプラクティスです。

wp_enqueue_styleの基本構文

wp_enqueue_styleは以下のように記述します。主な引数はハンドル名、ファイルのパス、依存関係、バージョン、読み込み先です。

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

テーマにCSSを読み込む基本例

functions.phpに以下のように記述します。テーマのassets/css/common.cssを読み込み、更新日時をバージョンとしてキャッシュを回避しています。

<?php
add_action('wp_enqueue_scripts', function () {
  wp_enqueue_style(
    'theme-common',
    get_template_directory_uri() . '/assets/css/common.css',
    array(),
    filemtime(get_template_directory() . '/assets/css/common.css'),
    'all'
  );
});

依存関係を指定する

複数のスタイルを読み込む場合、依存関係を指定することで読み込み順を制御できます。例えばBootstrapの後に独自CSSを読み込みたい場合は以下のようにします。

<?php
add_action('wp_enqueue_scripts', function () {
  wp_enqueue_style(
    'bootstrap',
    'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css',
    array(),
    '5.3.0',
    'all'
  );

  wp_enqueue_style(
    'theme-style',
    get_template_directory_uri() . '/assets/css/style.css',
    array('bootstrap'),
    filemtime(get_template_directory() . '/assets/css/style.css'),
    'all'
  );
});

管理画面にCSSを追加する

管理画面でのみ読み込みたい場合はフックをadmin_enqueue_scriptsに切り替えます。

<?php
add_action('admin_enqueue_scripts', function ($hook) {
  if ($hook === 'post.php' || $hook === 'post-new.php') {
    wp_enqueue_style(
      'admin-custom',
      get_template_directory_uri() . '/assets/css/admin.css',
      array(),
      filemtime(get_template_directory() . '/assets/css/admin.css'),
      'all'
    );
  }
});

メディアタイプを指定する

最後の引数で印刷用や画面用などのメディアタイプを指定できます。デフォルトはallですが、印刷専用のCSSを追加する場合に便利です。

<?php
wp_enqueue_style(
  'print-style',
  get_template_directory_uri() . '/assets/css/print.css',
  array(),
  filemtime(get_template_directory() . '/assets/css/print.css'),
  'print'
);

まとめ

wp_enqueue_styleを利用することでCSSの読み込みをWordPressに一元管理させ、キャッシュ対策や依存関係の制御も行えます。直接<link>タグを書く方法は避け、必ずfunctions.phpからenqueueする習慣を付けておくことで、将来的なテーマ拡張やプラグイン併用時のトラブルを防げます。