WordPressでサイトをカスタマイズする際、独自のCSSファイルを読み込みたい場面は多いですよね。
この記事では、正しく安全にスタイルシートを読み込む方法を詳しく解説します。
Contents
なぜwp_enqueue_style()を使うべきなのか
まず重要なポイントとして、直接header.phpに<link>タグを書くのは推奨されません。
その理由は：
- 重複読み込みを防げる
- 依存関係を適切に管理できる
- WordPressの標準的な方法に従える
- プラグインとの競合を避けられる
それでは、具体的な実装方法を見ていきましょう。
スタイルシートファイル追加して読み込ませる方法
WordPressにスタイルシートファイル追加して読み込ませには、functions.phpの編集が必要となります。
1. functions.phpに記述する（最も推奨）
テーマフォルダ内のfunctions.phpに以下のコードを追加します。
PHP
function my_custom_styles() {
wp_enqueue_style(
'my-custom-style',// ハンドル名（一意の識別名）</em>
get_stylesheet_directory_uri() . '/css/custom.css',// CSSファイルのパス</em>
array(),// 依存関係</em>
'1.0.0',// バージョン番号</em>
'all'// メディアタイプ</em>
);
}
add_action('wp_enqueue_scripts', 'my_custom_styles');各パラメータの説明：
- ハンドル名: スタイルシートを識別するための一意の名前
- ファイルパス: CSSファイルの場所（絶対URLまたは相対パス）
- 依存関係: このCSSが依存する他のスタイルシートがあれば配列で指定
- バージョン番号: キャッシュ対策に使用（更新時に変更する）
- メディアタイプ: ‘all’, ‘screen’, ‘print’など
2. 子テーマで使用する場合
子テーマを使っている場合は、親テーマのスタイルに依存させることができます。
PHP
function my_child_theme_styles() {
// 親テーマのスタイルシート
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
// 子テーマのカスタムスタイル
wp_enqueue_style(
'child-custom-style',
get_stylesheet_directory_uri() . '/custom.css',
array('parent-style'),// 親テーマのスタイルに依存
'1.0.0'
);
}
add_action('wp_enqueue_scripts', 'my_child_theme_styles');応用的な読み込み方法
管理画面専用のスタイルシート
管理画面にのみスタイルを適用したい場合は、admin_enqueue_scriptsアクションを使用します。
PHP
function my_admin_styles() {
wp_enqueue_style(
'my-admin-style',
get_stylesheet_directory_uri() . '/css/admin.css',
array(),
'1.0.0'
);
}
add_action('admin_enqueue_scripts', 'my_admin_styles');特定のページにのみ読み込む
条件分岐タグを使えば、特定のページやテンプレートにのみスタイルを読み込めます。
PHP
function conditional_custom_styles() {
// 固有名詞のページの場合
if (is_page('about')) {
wp_enqueue_style(
'about-style',
get_stylesheet_directory_uri() . '/css/about.css'
);
}
// トップページの場合
if (is_front_page()) {
wp_enqueue_style(
'home-style',
get_stylesheet_directory_uri() . '/css/home.css'
);
}
// 投稿ページの場合
if (is_single()) {
wp_enqueue_style(
'single-style',
get_stylesheet_directory_uri() . '/css/single.css'
);
}
}
add_action('wp_enqueue_scripts', 'conditional_custom_styles');外部CDNからスタイルシートを読み込む
Google FontsやBootstrapなど、外部のCSSを読み込むこともできます。
PHP
function enqueue_external_styles() {
// Google Fonts
wp_enqueue_style(
'google-fonts',
'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap',
array(),
null
);
// Bootstrap
wp_enqueue_style(
'bootstrap',
'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css',
array(),
'5.3.0'
);
}
add_action('wp_enqueue_scripts', 'enqueue_external_styles');よくある間違いと対処法
❌ 間違い: header.phpに直接記述
PHP
<!-- これはNG -->
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/custom.css">✅ 正解: wp_enqueue_styleを使用
PHP
// functions.phpに記述</em>
function my_styles() {
wp_enqueue_style('custom', get_stylesheet_directory_uri() . '/custom.css');
}
add_action('wp_enqueue_scripts', 'my_styles');キャッシュ対策のコツ
CSS更新時にブラウザキャッシュが原因で変更が反映されないことがあります。これを防ぐには：
PHP
function my_custom_styles() {
$version = filemtime(get_stylesheet_directory() . '/css/custom.css');
wp_enqueue_style(
'my-custom-style',
get_stylesheet_directory_uri() . '/css/custom.css',
array(),
$version// ファイルの更新時刻をバージョンとして使用
);
}
add_action('wp_enqueue_scripts', 'my_custom_styles');filemtime()を使うことで、ファイルが更新されるたびに自動的にバージョン番号が変わります。
まとめ
WordPressで独自のスタイルシートを読み込む際は
- wp_enqueue_style()を必ず使用する
- functions.phpに記述する
- 適切なアクションフック（wp_enqueue_scripts）を使う
- バージョン管理でキャッシュ対策をする
- 条件分岐で必要なページにのみ読み込む
これらのベストプラクティスに従うことで、保守性が高く、パフォーマンスの良いWordPressサイトを構築できます。
ぜひこの方法を試してみてください！
