WordPressでのCSS読み込み方法:ベストプラクティスを解説
更新日:2025/01/08

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');
コードの解説
- 関数名:
enqueue_custom_styles
- 独自のスタイルを登録するための関数
- 名前は自由に設定可能ですが、わかりやすい名前を付けることが重要
- wp_enqueue_style パラメータ:
- 第1引数:ハンドル名(一意の識別子)
- 第2引数:CSSファイルのURL
- 第3引数:依存するスタイルシート
- 第4引数:バージョン番号(キャッシュ制御用)
- filemtime の活用
- ファイルの最終更新時刻をバージョンとして使用
- CSSファイルが更新されると自動的にバージョンが変わる
メリット
- キャッシュの最適化
- ファイル更新時のみブラウザキャッシュが更新される
- 通常時はキャッシュを活用できる
- 依存関係の管理
- 他のCSSファイルとの読み込み順序を制御可能
- プラグインのCSSとの連携も簡単
- 保守性の向上
- 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');

-
検索
(例) debug search etc.. -
カテゴリー
-
mixhostでのWordPress利用について
更新日:2024/04/02
299 view
-
scrollHint
更新日:2024/03/13
250 view
-
XML Sitemap Generator for Google不具合のダウングレード対応、代替プラグイン
更新日:2024/06/13
236 view
-
【SnowMonkey】納品までのフローまとめ
更新日:2025/02/15
163 view
-
ワードプレスでフォントを変えたいとき、プラグインを使えば初心者でも簡単
更新日:2025/02/16
144 view
-
【Googleサーチコンソール】検索画面で表示させたくない「Googleのインデックス削除」
更新日:2024/06/07
130 view
-
【Snow Monkey】ショートコードで編集画面で任意の場所にHTMLファイルを挿入
更新日:2025/04/04
124 view
-
キーワード検索で上位表示させる方法【SEO】
更新日:2023/10/28
120 view
-
tailwindcss使い方
更新日:2024/03/13
120 view
-
Recline: GitHub Copilotで動作するClaude 3.5 Sonnet搭載の開発支援ツール
更新日:2025/01/20
110 view
-
WordPressプラグイン「All-in-One WP Migration」のトラブル
更新日:2022/03/31
84 view
-
ワードプレスセキュリティー対策まとめ【2025年】「site guard wordpress」「BackWPup バージョン5でUI変更!?」
更新日:2025/02/25
76 view
-
SSHを使用してGitHubのリポジトリをクローン、複数の接続元で公開鍵をディレクトリで区別する方法
更新日:2025/01/13
47 view
-
VSCodeで開発効率を劇的に向上させる!Roo-Clineプラグイン完全ガイド【Gemini API】
更新日:2025/02/08
43 view
-
Express、FastAPIを使用し、二重fetch構成のメリット
更新日:2025/03/28
41 view
-
「JSONスキーマ」と「Few-shot Learning」で実現する次世代生成AIソフトウェア開発の可能性
更新日:2025/02/12
40 view
-
WordPressの無料画像素材のおすすめダウンロードサイト!
更新日:2022/02/22
35 view
-
リファクタリング【VSCode Javasctipt Python】
更新日:2025/03/09
35 view
-
形態素解析とは?初心者でもわかるツールの使い方と実践例
更新日:2025/02/08
33 view
-
【Next.js AWS】音声文字起こし&要約、分析アプリケーション(S3)(Transcribe)(Amazon Bedrock)
更新日:2025/02/13
30 view