wp_enqueue_styleによる実践的なスタイルシート読み込み

前回の記事では、WordPressでスタイルシートを読み込む2つの方法を学習しました。linkタグ直書き方式とwp_enqueue_style方式を比較し、WordPress推奨のwp_enqueue_style()を使った方法をマスターしました。

今回は、より実践的な内容として、style.cssとは別のファイルでスタイルを管理する方法と、複数のスタイルシートを効率的に管理する方法について解説します。

今回の目標

• style.cssを読み込まない理由を理解
• 複数のスタイルシートを管理する方法
• スタイルシートの依存関係を活用
• 自動バージョン管理の実装

style.cssは読み込まない

style.cssの本来の役割

前回のようにstyle.cssにスタイルを記述することでページにスタイルを適用できます。しかし、style.cssにはテーマヘッダーが書かれています。

/*
Theme Name: マイ・オリジナルテーマ
*/
h1 {
    color: blue;
}

このテーマヘッダーは、WordPressがテーマを認識するために必要な情報です。見られても問題はありませんが、作成者の情報などが書かれているので、見せない方がベターです。

テーマヘッダーについて詳しく知りたい方へ

WordPressテーマヘッダー完全リファレンス

WordPressオリジナルテーマ開発に必須のstyle.cssテーマヘッダー（テーマコメント）の書き方を完全解説。必須項目のTheme Nameをはじめ、全15項目をコード例と注意点付きで詳しく説明します。WordPress.org配布時の要件や重複時の動作も含む開発者向け決定版リファレンス。

style.cssの位置付け

style.cssはテーマフォルダにあればよいだけで、必ずしもページに読み込む必要はありません。実際のページに反映させるスタイルは、別のファイルに書くことができます。

今回は、main.cssファイルを作成してサイトに反映させる方法を学びます。

複数のスタイルシートを管理する

main.cssファイルの作成

まず、テーマフォルダにmain.cssファイルを作成しましょう。

h1 {
    color: red;
}

style.cssのスタイル指定を削除してテーマヘッダーだけにします。

/*
Theme Name: マイ・オリジナルテーマ
*/

wp_enqueue_styleでmain.cssを読み込む

functions.phpを以下のように変更します。

<?php
// 外観→メニューの有効化
add_theme_support( 'menus' );

// スタイルシートの読み込み
add_action('wp_enqueue_scripts', 'load_theme_style');

function load_theme_style() {
    wp_enqueue_style(
        'theme-main-style',
        get_stylesheet_directory_uri() . '/main.css',
        array(),
        '1.0.0'
    );
}
?>

これで、main.cssからスタイルが読み込まれるようになりました。

念のためWebページを表示して確認してみましょう。

ちゃんと見出しが赤くなっています。

複数のスタイルシートを読み込む

sub.cssファイルの追加

実際のプロジェクトでは、サイト全体で共通のスタイルをmain.css、特定ページのスタイルをsub.cssのように分けることがあります。

まず、sub.cssファイルを作成します。

h1 {
    color: blue;
}

複数のスタイルシートを同時に読み込む

functions.phpを以下のように変更します。

function load_theme_style() {
    wp_enqueue_style(
        'theme-main-style',
        get_stylesheet_directory_uri() . '/main.css',
        array(),
        '1.0.0'
    );
    wp_enqueue_style(
        'theme-sub-style',
        get_stylesheet_directory_uri() . '/sub.css',
        array(),
        '1.0.0'
    );
}

スタイルの優先順位

共通スタイルmain.cssを読み込んだ後で、sub.cssを読み込みたい場合があります。

CSSでは、後から読み込まれたスタイルが優先されるため、読み込み順序が重要です。

wp_enqueue_styleを書いた順番でなく、明確に順番を指定する方法があります。

スタイルシートの依存関係

依存関係の指定

wp_enqueue_styleの第3引数を使って、依存関係（読み込む順番）を指定できます。

【余談】実際の開発現場での活用例

実際の開発現場では、WordPress標準のスタイルを読み込んだ後に、テーマ独自のスタイルを適用することがよくあります。

例えば、WordPressのブロックエディタ（Gutenberg）のスタイルを読み込んだ後で、テーマ独自のカスタマイズを適用する場合

function load_theme_style() {
    // WordPress標準のブロックエディタスタイル
    wp_enqueue_style('wp-block-library');
    
    // テーマ独自のスタイル（WordPress標準スタイルに依存）
    wp_enqueue_style(
        'theme-custom-style',
        get_stylesheet_directory_uri() . '/custom.css',
        array('wp-block-library'),
        filemtime(get_stylesheet_directory() . '/custom.css')
    );
}

このように、依存関係はプロの開発現場でも頻繁に使用される重要な技術です。特に、プラグインのスタイルやWordPress標準スタイルを基にして、テーマ独自のカスタマイズを行う際には必須の知識となります。

基本的な依存関係の例

function load_theme_style() {
    wp_enqueue_style(
        'theme-main-style',
        get_stylesheet_directory_uri() . '/main.css',
        array(),
        '1.0.0'
    );
    wp_enqueue_style(
        'theme-sub-style',
        get_stylesheet_directory_uri() . '/sub.css',
        array('theme-main-style'),
        '1.0.0'
    );
}

array('theme-main-style')と指定することで、「sub.cssはmain.cssに依存します」となり、main.css → sub.cssの順で読み込まれます。

動作確認

ページを表示すると、全てのページの見出しが青色になります。これは、後から読み込まれたsub.cssの方が有効になっているためです。

CTRL+Uキーでページソースを表示してHTMLを確認してもmain.css、sub.cssの順に書かれていることを確認できます。

自動バージョン管理

バージョン管理の重要性

CSSファイルを修正する都度、'1.0.0'のバージョンを'1.0.1'、'1.0.2'と増やしていくことでバージョン管理ができます。

バージョン管理が行われないと、ブラウザキャッシュにより最新のCSSが反映されないことがあります。

手動バージョン管理の問題点

手動でバージョンを変えるのは面倒であり、忘れがちです。

バージョンアップを自動的に行う方法があります。

filemtime()を使った自動バージョン管理

CSSファイルの更新日をバージョンとして活用することで、CSSファイルを保存するたびに自動でバージョンが変わります。

function load_theme_style() {
    wp_enqueue_style(
        'theme-main-style',
        get_stylesheet_directory_uri() . '/main.css',
        array(),
        filemtime(get_stylesheet_directory() . '/main.css')
    );
    wp_enqueue_style(
        'theme-sub-style',
        get_stylesheet_directory_uri() . '/sub.css',
        array('theme-main-style'),
        filemtime(get_stylesheet_directory() . '/sub.css')
    );
}

filemtime()関数の解説

filemtime()は、ファイルの更新日時を取得するPHP関数です。これをバージョン指定の箇所に入れることで、ファイルの更新日時がバージョンになります。

重要な注意点

get_stylesheet_directory_uri()ではなく、get_stylesheet_directory()を使用することが重要です。

• get_stylesheet_directory_uri()：style.cssが保存されたフォルダまでのURI
  • 例：http://sample.local/wp-content/themes/sample-theme
• get_stylesheet_directory()：style.cssが保存されたフォルダまでのフォルダパス
  • 例：C:\Users\xxx\Documents\sample-site\app\public\wp-content\themes\sample-theme

URLからファイルの更新日は取得できないため、フォルダパスを指定する必要があります。

動作確認

ソースコードの確認

ページを表示してCTRL+Uキーでソースを表示すると、以下のようなlinkタグが生成されています。

<link rel='stylesheet' id='theme-main-style-css' href='http://sample.local/wp-content/themes/sample-theme/main.css?ver=1752215492' type='text/css' media='all' />
<link rel='stylesheet' id='theme-sub-style-css' href='http://sample.local/wp-content/themes/sample-theme/sub.css?ver=1752215704' type='text/css' media='all' />

?ver=1752215492のように、更新日（タイムスタンプ）がバージョンとして付与されています。

自動バージョン更新の確認

main.cssファイルを更新して保存し、再度ページのソースを確認すると、?ver=の数字が変わっていることがわかります。

これで、ファイル更新のたびに自動でバージョンアップする仕組みが完成しました。

まとめ

今回は、より実践的なスタイルシート管理方法を学習しました。

重要なポイント

1. style.cssとは別のファイルでスタイルを管理
   • テーマヘッダー情報を隠せる
   • より柔軟な管理が可能
2. 複数のスタイルシートの管理
   • 共通スタイルと個別スタイルを分離
   • 依存関係を指定して読み込み順序を制御
3. 自動バージョン管理
   • filemtime()を使った自動バージョン更新
   • キャッシュ問題を自動解決

実践的な活用

この方法を使えば、以下のような管理が可能になります。

• main.css：サイト全体の共通スタイル
• page.css：固定ページ専用スタイル
• post.css：投稿ページ専用スタイル
• phone.css：スマホデザイン用スタイル
• tablet.css：タブレットデザイン用スタイル

依存関係を適切に設定することで、スタイルの適用順序を制御し、より保守性の高いテーマ開発が可能になります。

次回予告

次回は、今回学んだスタイルシート管理技術を活用して、ナビゲーションメニューをスタイリッシュにする方法について解説します。

CSSでクラスを指定しながら、実際のナビゲーションメニューを美しくデザインする実践的な内容をお届けします。

WordPress開発の実践的なスキルを身につけて、より魅力的なサイトを構築しましょう！

次回もお楽しみに！

成果物

この記事で作成した成果物は、以下のページでまとめて確認することができます。

成果物をまとめて確認する

［成果物］wp_enqueue_styleによる実践的なスタイルシート読み込み

【wp_enqueue_styleによる実践的なスタイルシート読み込み】の成果物です。投稿の学びを終えた時点の構成を一覧でご確認いただけます。

この投稿をシェアする