成果物をまとめて確認する
［成果物］WordPressテーマ開発：スタイルシート読み込み完全ガイド
【WordPressテーマ開発：スタイルシート読み込み完全ガイド】の成果物です。投稿の学びを終えた時点の構成を一覧でご確認いただけます。
WordPressテーマ開発：スタイルシート読み込み完全ガイド
- 2025/07/12
- BASICS
- WordPressの基礎
- 0comments
- 156views
- 約6分で読めます
- 19
前回の記事では、WordPress標準ヘッダー・フッターでテーマ機能を最大化する方法を学習しました。wp_head()とwp_footer()関数の実装により、WordPressの機能をフル活用できるテーマの基盤が完成しました。
今回は、スタイルシートをサイトに適用する方法について詳しく解説します。今までの記事に比べると内容が難しいですが、とても重要なことなので、しっかり学びましょう。
今回の目標
- スタイルシートの適用方法を理解
linkタグの直書きによる読み込み方法get_stylesheet_directory_uri()関数の活用wp_enqueue_style()を使った WordPress推奨方式- それぞれの方法のメリット・デメリット
目次
まずは下準備
まずは、スタイルシートの適用がわかりやすいように、style.cssに以下のコードを追加しましょう。
/*
Theme Name: マイ・オリジナルテーマ
*/
h1 {
color: red;
}これで、スタイルシートが適用されたら見出しが赤くなるはずです。
最初は、linkタグの直書き
header.phpへlinkタグを書いてstyle.cssを読み込む
一般的なHTML形式のlinkタグをheader.phpに追加してみましょう。
<link rel="stylesheet" href="style.css">このコードをheader.phpの<head>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php the_title(); ?></title>
<?php wp_head();?>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1><?php the_title(); ?></h1>
<?php wp_nav_menu('header-menu'); ?>
</header>
<main>見出しが赤くならない？
ページを表示してみると、見出しが赤くなりません。
あなたが記述したコードに間違いがあるのではなく、このコードでは動作しないのです。
なぜ失敗するのか？
href="style.css"と書いた場合、ブラウザはhttp://sample.local/style.cssを参照しようとします。
しかし、http://sample.localは「localのフォルダ/app/public/」を意味します。
要するに、localのサイトフォルダ/app/public/style.cssを参照しているのです。
しかし、style.cssはテーマフォルダにあります。
localのサイトフォルダ/app/public/wp-content/themes/sample-theme/style.css
正しいパスを指定する
したがって、以下のように修正する必要があります。
<link rel="stylesheet" href="/wp-content/themes/sample-theme/style.css">これでもう一度、ページを表示してみてください。今度は見出しが赤くなりました。
でも、手動でパスを書くのは面倒
/wp-content/themes/sample-theme/を毎回書くのは面倒です。そこで、WordPressの便利な関数を使います。
get_stylesheet_directory_uri()関数を使う
get_stylesheet_directory_uri()関数は、style.cssがあるパス（テーマフォルダのURL）を取得する関数です。
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css">このようにすることで、以下のパスを参照することができます。
http://sample.local/wp-content/themes/sample-theme/style.css確認のため、もう一度ページを表示して見出しが赤くなっているか確認してください。
get_stylesheet_directory_uri()関数の活用範囲
この関数はスタイルシート以外でも使用できます。例えば、imgタグのsrcなどでも使用します。
style.cssファイルがあるフォルダ（すなわちテーマフォルダ）のパスを取得するので、テーマフォルダ内にある画像を指定する場合にも使うことができます。
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="ロゴ">もう1つのスタイルシート適用方法
準備：linkタグを削除し、色を変更する
まず、header.phpに追加したlinkタグを削除してください。
これから試す方法と先ほど試した方法、どちらが有効になっているかわかりやすくするためです。
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css">次に、style.cssの色も変更します。これも、わかりやすくするためです。
/*
Theme Name: マイ・オリジナルテーマ
*/
h1 {
color: blue;
}red から blue に変更しました。これで、新しい方法でスタイルシートが読み込まれれば、見出しが青色になるはずです。
functions.phpを使った WordPress推奨方式
WordPressには、スタイルシートを読み込むための専用の仕組みがあります。functions.phpファイルに以下のように変更します。
変更前：
<?php
// 外観→メニューの有効化
add_theme_support( 'menus' );
?>変更後：
<?php
// 外観→メニューの有効化
add_theme_support( 'menus' );
// スタイルシートの読み込み
add_action('wp_enqueue_scripts', 'load_theme_style');
function load_theme_style() {
wp_enqueue_style(
'theme-style',
get_stylesheet_directory_uri() . '/style.css',
array(),
'1.0.0'
);
}
?>コードの解説
6行目
add_action関数は、WordPressのアクションに任意の処理を追加する関数です。
wp_enqueue_scriptsは、WordPressが標準のスタイルやスクリプト、プラグインのスタイルやスクリプトを読み込むアクションです。
すなわち、「WordPressがスタイルやスクリプトを読み込むときに、load_theme_styleに書いた処理も一緒に実行してね」という意味になります。
7行目
wp_enqueue_style関数は、WordPressに指定したスタイルシートを読み込んでもらう指示です。
'theme-style'：スタイルシートの識別子（WordPress内でユニークな名前である必要があります）get_stylesheet_directory_uri() . '/style.css'：スタイルシートのパスarray()：依存関係（詳細は後の記事で説明します）'1.0.0'：バージョン番号（キャッシュ対策として重要）
バージョン番号の重要性
4番目の引数 '1.0.0' はバージョン番号です。この番号を変更することで、更新されたスタイルシートを確実にブラウザに読み込むことができます。これが、wp_enqueue_style のメリットの１つです。
実際に動作確認してみよう
- functions.phpファイルを保存
- ページを表示してみてください
重要な確認ポイント
- 見出しが青色になっていますか？
- もし赤色のままだった場合、それは
linkタグ方式で読み込んだstyle.cssのキャッシュが邪魔をしているためです - CTRL+F5（強制リロード）を押して、青色になることを確認してください
- CTRL+Uでソースを表示して、
linkタグでstyle.cssが読み込まれていることを確認
<link rel='stylesheet' id='theme-style-css' href='http://sample.local/wp-content/themes/sample-theme/style.css?ver=1.0.0' type='text/css' media='all' />linkタグのID属性がtheme-styleで指定したスタイルシートの識別子になっています。-cssが自動で付加されていますね。
href属性にはstyle.cssのパスが正しく設定されています。また?var=1.0.0が自動で付加されバージョン管理が行われていることがわかります。
2つの方法の比較
linkタグ直書き方式
メリット
- 理解しやすい
- HTML標準の書き方
- シンプル
デメリット
- WordPress標準の仕組みから外れる
- 依存関係の管理が困難
- スタイルシートの変更が反映されない問題が発生しやすい（キャッシュ問題）
wp_enqueue_style方式（WordPress推奨）
メリット
- WordPress標準の仕組み
- 依存関係の管理が可能
- 重複読み込みを防げる
- プラグインとの競合を避けられる
- スタイルシートの変更が反映されない問題を自動で解決（バージョン番号によるキャッシュ対策）
デメリット
- 初心者には複雑
ただし、一度覚えてしまえば簡単です - functions.phpの知識が必要
WordPressテーマ開発では必須のスキルなので、今のうちに慣れておきましょう。
まとめ
今回は、WordPressテーマでスタイルシートを読み込む2つの方法を学習しました。
linkタグ直書き方式：HTML標準の方法だが、WordPress環境では推奨されないwp_enqueue_style方式：WordPress推奨の方法で、より安全で管理しやすい
WordPress開発においては、wp_enqueue_style()を使った方法が推奨されます。最初は複雑に感じるかもしれませんが、WordPressの仕組みを理解する上で重要な概念です。
重要なポイント
functions.phpは、WordPressテーマ開発において避けては通れない重要なファイルです。今回学んだwp_enqueue_style()の書き方をマスターすることで、今後のWordPressカスタマイズが格段に楽になります。「難しそう」と思わず、一歩ずつ確実に進んでいきましょう。
次回予告
次回は、さらに実践的な内容をお届けします。
- style.cssは読み込まない方がいい理由
- スタイルはstyle.cssとは別のファイルに書くのがベストな理由
- スタイルシートの依存関係
- バージョンの簡単な管理方法
WordPressテーマ開発において、より効率的で保守性の高いスタイル管理方法を学んでいきましょう。
次回もお楽しみに！
成果物
この記事で作成した成果物は、以下のページでまとめて確認することができます。
この投稿をシェアする
WordPress標準ヘッダー・フッターでテーマ機能を最大化しよう！
BASICS WordPress標準のヘッダー・フッター機能を実装し、WordPressの機能をフル活用できるテーマに改良する方法を解説します。wp_head()とwp_footer()関数の実装により、管理画面での設定がWebページで正しく反映される環境を構築し、プラグインの機能も有効化できるプロフェッショナルなテーマへと進化させます。
- 2025/07/12
- 0comments
- 101views
wp_enqueue_styleによる実践的なスタイルシート読み込み
BASICS wp_enqueue_styleを使った実践的なWordPressスタイルシート管理方法を解説。style.cssとは別のファイルでスタイルを管理し、複数のスタイルシートを効率的に読み込む方法を学習します。依存関係の設定による読み込み順序制御、自動バージョン更新など、プロの開発現場で使われる実践的な技術を詳しく説明します。
- 2025/07/12
- 0comments
- 177views
