WordPressでCSSを読み込む方法には複数のアプローチがありますが、今回は最適な方法とされるfunctions.phpを使用した実装方法について詳しく解説します。

htmlで実装された静的サイトと同様な方法（非推奨）

まず、多くの初心者開発者が採用しがちなheader.phpでの直接読み込み方法を見てみましょう：

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/style.css">

この方法は簡単ですが、以下のような問題があります：

  • キャッシュコントロールが難しい
  • 依存関係の管理ができない
  • 読み込み順序の制御が困難
  • WordPressの標準的な方法に従っていない

推奨される実装方法

WordPressではwp_enqueue_scriptsフックとwp_enqueue_style関数を使用したCSSの読み込みが推奨されています。

function enqueue_custom_styles() {
    wp_enqueue_style(
        'custom-style',                                    // ハンドル名
        get_template_directory_uri() . '/css/style.css',   // CSSファイルのパス
        array(),                                          // 依存関係
        filemtime(get_template_directory() . '/css/style.css') // バージョン
    );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

コードの解説

  1. 関数名: enqueue_custom_styles
    • 独自のスタイルを登録するための関数
    • 名前は自由に設定可能ですが、わかりやすい名前を付けることが重要
  2. wp_enqueue_style パラメータ:
    • 第1引数：ハンドル名（一意の識別子）
    • 第2引数：CSSファイルのURL
    • 第3引数：依存するスタイルシート
    • 第4引数：バージョン番号（キャッシュ制御用）
  3. filemtime の活用
    • ファイルの最終更新時刻をバージョンとして使用
    • CSSファイルが更新されると自動的にバージョンが変わる

メリット

  1. キャッシュの最適化
    • ファイル更新時のみブラウザキャッシュが更新される
    • 通常時はキャッシュを活用できる
  2. 依存関係の管理
    • 他のCSSファイルとの読み込み順序を制御可能
    • プラグインのCSSとの連携も簡単
  3. 保守性の向上
    • WordPressの標準的な方法に従っているため、将来的な互換性が高い
    • コードの見通しが良く、管理がしやすい

応用例

複数のCSSファイルを読み込む場合：

function enqueue_multiple_styles() {
    // メインのスタイル
    wp_enqueue_style(
        'main-style',
        get_template_directory_uri() . '/css/style.css',
        array(),
        filemtime(get_template_directory() . '/css/style.css')
    );
    
    // 追加のスタイル（メインに依存）
    wp_enqueue_style(
        'extra-style',
        get_template_directory_uri() . '/css/extra.css',
        array('main-style'), // main-styleに依存
        filemtime(get_template_directory() . '/css/extra.css')
    );
}
add_action('wp_enqueue_scripts', 'enqueue_multiple_styles');