2025年10月25日[土曜日]

CSSを読み込みヘッダーを仕上げる – WordPress実践制作【WPCafe編】

  • 2025/10/20
  • PRACTICE
  • カフェサイトを作ろう
  • 0comments
  • 32views
  • 約12分で読めます
  • 6

前回、SNS情報を管理画面で一元管理し、ヘッダーに表示する機能を実装しました。しかし、SNSアイコンは文字化けしたまま表示されていません。

今回は、WordPressでのCSS読み込みの正しい方法を学び、Font AwesomeのCSSを読み込んでヘッダー全体のスタイリングを完成させます。

WordPressでのCSS読み込み方法

WordPressでCSSを読み込む際は、wp_enqueue_style()関数を使います。

<link>タグを直接header.phpに書くこともできますが、wp_enqueue_style()を使うことで以下のメリットがあります。

  • 依存関係の管理: CSSの読み込み順序を制御できる
  • バージョン管理: キャッシュ対策が容易
  • 重複読み込みの防止: 同じCSSが複数回読み込まれるのを防ぐ
  • プラグインとの競合回避: WordPressの標準的な方法で読み込むため、プラグインとの競合が少ない
参考

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

wp_enqueue_styleを使った実践的なWordPressスタイルシート管理方法を解説。style.cssとは別のファイルでスタイルを管理し、複数のスタイルシートを効率的に読み込む方法を学習します。依存関係の設定による読み込み順序制御、自動バージョン更新など、プロの開発現場で使われる実践的な技術を詳しく説明します。

CSS/JS読み込み用ファイルの作成

functions-theme-init.phpと同様に、CSS/JSの読み込み処理も別ファイルに分けて管理します。

functions-theme-load.phpを作成しましょう。

functions.phpの更新

まず、functions.phpに読み込み用ファイルを追加します。

header.php
<?php
// 初期設定
require_once 'functions-theme-init.php';

// js/css読み込み
require_once 'functions-theme-load.php';
PHP

CSSの読み込み実装

functions-theme-load.phpの作成

新しくfunctions-theme-load.phpを作成し、以下のコードを記述します。

PHP
<?php
/**
 * CSS読み込み
 */
add_action('wp_enqueue_scripts', function() {

    // fontawesome
    wp_enqueue_style(
        'fontawesome',
        'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.1.0/css/all.min.css',
        array(),
        '7.1.0',
        'all'
    );


    // main
    $target_file = '/main.css';
    wp_enqueue_style(
        'theme-main',
        get_stylesheet_directory_uri() . $target_file,
        array('fontawesome'),
        filemtime(get_stylesheet_directory() . $target_file),
        'all'
    );

});
PHP

コードの解説

wp_enqueue_scriptsアクションフック

add_action('wp_enqueue_scripts', function() {
}
PHP

wp_enqueue_scriptsは、WordPressがフロントエンドでCSS/JavaScriptを読み込むタイミングで実行されるアクションフックです。

  • CSS/JSの読み込みは必ずこのフック内で行う
  • 管理画面には影響しない（フロントエンドのみ）
  • WordPressが適切なタイミングで実行してくれる

wp_enqueue_style()の基本構文

wp_enqueue_style( $handle, $src, $deps, $ver, $media );
PHP
  • $handle: CSS識別用のユニークな名前
  • $src: CSSファイルのURL
  • $deps: 依存するCSSの配列（このCSSより先に読み込むべきCSS）
  • $ver: バージョン番号（キャッシュ対策）
  • $media: メディアタイプ（デフォルトは’all’）

Font Awesomeの読み込み

// fontawesome
wp_enqueue_style(
    'fontawesome',
    'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.1.0/css/all.min.css',
    array(),
    '7.1.0',
    'all'
);
PHP
  • CDNからFont Awesome 7.1.0を読み込み
  • 依存関係なし（array()が空）
  • バージョン番号を明示してキャッシュ管理
CDNとは

CDN（Content Delivery Network）は、ファイルを高速に配信するための仕組みです。

Font Awesomeのような広く使われるライブラリをCDNから読み込むことで、以下のメリットがあります。

  • ファイル管理が不要: ライブラリをダウンロードしてテーマに含める必要がない
  • アップデートが簡単: URLのバージョン番号を変更するだけで最新版に更新できる
  • サーバー負荷の軽減: 自サイトのサーバーを経由しないため、負荷が減る

今回はjsDelivrというCDNサービスを利用しています。

テーマ用CSSの読み込み

$target_file = '/main.css';
wp_enqueue_style(
    'theme-main',
    get_stylesheet_directory_uri() . $target_file,
    array('fontawesome'),
    filemtime(get_stylesheet_directory() . $target_file),
    'all'
);
PHP

ポイント

  1. get_stylesheet_directory_uri(): テーマディレクトリのURLを取得
  2. 依存関係の指定: array('fontawesome')により、Font Awesomeの後に読み込まれることを保証
  3. filemtime(): ファイルの更新日時をバージョン番号として使用
    • CSSを更新すると自動的にバージョンが変わり、変更内容が正しく反映される
    • 開発中は特に便利（ブラウザのキャッシュクリアが不要になる）

表示の確認

ページを表示して、SNSアイコンが正しく表示されることを確認してください。

Font Awesomeが読み込まれ、Facebook、X（Twitter）、Instagramのアイコンが表示されているはずです。

ヘッダーのHTML構造を整理

現在のヘッダーは要素が並んでいるだけで、レイアウトが整っていません。

CSSでスタイリングしやすいように、div要素を使ってヘッダーの構造を整理します。

header.phpの更新

header.php
<header class="header">
    <div class="container">
        <a class="link" href="<?php echo home_url();?>">
            <div class="logo"><span class="logo-the">the</span><span class="logo-name">WPCafe</span></div>
        </a>
        <nav class="header-nav">
            <ul class="header-nav-list">
<?php
    $menu_object = wp_get_nav_menu_object( 'header-navi' );
    $menu_list = wp_get_nav_menu_items( $menu_object->term_id );
    foreach($menu_list as $menu_item) :
?>
                <li class="header-nav-item">
                    <a class="nav-item-link" href="<?php echo $menu_item->url;?>">
                        <span class="nav-item-text"><?php echo $menu_item->title;?></span>
                    </a>
                </li>
<?php
    endforeach;
?>
            </ul><!-- header-nav-list -->

            <ul class="header-nav-socials">
<?php
    $page = get_page_by_path('config');
    $page_id = $page->ID;
    $sns_list = SCF::get('opt_sns_list', $page_id);
    foreach($sns_list as $sns_item) :
?>
                <li>
                    <a class="link sns-icon" href="<?php echo $sns_item['opt_sns_url']; ?>" target="_blank" rel="noopener noreferrer" title="<?php echo $sns_item['opt_sns_name']; ?>">
                        <?php echo $sns_item['opt_sns_icon']; ?>
                    </a>
                </li>
<?php
    endforeach;
?>    
            </ul><!-- header-nav-socials -->
        </nav><!-- header-nav -->

    </div><!-- container -->
</header>
PHP

HTML構造のポイント

  • container: ヘッダー全体の幅と内側の余白を管理
  • logo: サイトロゴをグループ化
  • header-nav: ナビゲーションメニューとSNSリンクを含む
  • header-nav-list: メインメニュー項目
  • header-nav-socials: SNSアイコン

ヘッダーのスタイリング

整理したHTML構造にCSSを適用します。

main.cssの作成

テーマディレクトリ直下にmain.cssを作成し、以下のコードを記述します。

CSS
/* Common
------------------------------ */
* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

a.link {
    color: #534931;
}

.header {
    width: 100%;
    height: 120px;
}

.header .container {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0 4rem;
    width: 100%;
    height: 100%;
}

/* Header Logo
------------------------------ */
.header .logo {
    display: flex;
    align-items: center;
    height: 80px;
    position: relative;
    color: #534931;
}

.logo .logo-the {
    font-weight: 400;
    font-size: 32px;
    line-height: 100%;
}

.logo .logo-name {
    font-size: 46px;
    font-weight: 400;
    padding-left: 8px;
}

/* Header Navi
------------------------------ */
.header .header-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header .header-nav-list {
    display: flex;
    gap: 1.0rem;
    list-style: none;
}

.header .header-nav-list .nav-item-link {
    color: #534931;
}

/* Header SNS
------------------------------ */
.header .header-nav-socials {
    display: flex;
    gap: 1.0rem;
    list-style: none;
}

header .header-nav-socials .sns-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f7f7f7;
    font-size: 22px;
}
CSS

CSSのポイント

  • Common: リセットCSS、基本的なリンクのスタイル
  • Header Logo: ロゴのサイズとフォント設定
  • Header Navi: FlexboxでメニューとSNSアイコンを横並びに配置
  • Header SNS: SNSアイコンを円形の背景付きで表示

完成イメージの確認

ブラウザでサイトを表示し、以下を確認してください。

今回のまとめ

今回は、WordPressでのCSS読み込みの正しい方法を学び、ヘッダーのスタイリングを完成させました。

学んだこと

  • wp_enqueue_style()を使ったCSS読み込み
  • CSS/JS読み込み用ファイルの分離
  • CDNからの外部ライブラリ読み込み
  • 依存関係の指定による読み込み順序の制御
  • filemtime()を使ったバージョン管理とキャッシュ対策

重要なポイント

  • WordPressでCSS/JSを読み込む際はwp_enqueue_style()を使う
  • CSS/JSの読み込みはwp_enqueue_scriptsアクションフック内で行う
  • CSSファイルの依存関係を指定することで読み込み順序を制御できる

推奨される実装方法

  • CSS/JS読み込み処理は専用ファイル（functions-theme-load.phpなど）に分離する
  • filemtime()でファイルの更新日時をバージョン番号として使うことで、変更を確実に反映できる

次回予告

次回は、CSSをSCSSに移行します。

現在のmain.cssは1ファイルにすべてのスタイルを記述していますが、プロジェクトが大きくなると管理が大変になります。

次回は以下を学びます。

  • VSCodeでのSCSSの作成とコンパイル方法
  • functions.phpのようにSCSSをファイル分割する方法
  • 変数やネストを使った効率的なスタイル管理

SCSSを使うことで、保守性の高いスタイルシートを作成できるようになります。

引き続き、実際に手を動かしながら進めていきましょう。

この記事の評価をお願いします

評価をすると「既読」となり、まだ読んでいない記事を区別できます。

この投稿をシェアする

コメントを残す

CAPTCHA


SNS情報の管理と表示 – WordPress実践制作【WPCafe編】

SNS情報の管理と表示 – WordPress実践制作【WPCafe編】  PRACTICE

WordPressテーマ開発において、サイト全体で使用する共通情報（SNS、住所、連絡先など）を効率的に管理する方法を解説します。固定ページとカスタムフィールドを活用することで、無料で保守性の高いオプションページを実装し、簡単に情報を更新できる環境を構築します。

  • 2025/10/20
  • 0comments
  • 55views

SCSSでCSSを効率的に管理する – WordPress実践制作【WPCafe編】

SCSSでCSSを効率的に管理する – WordPress実践制作【WPCafe編】  PRACTICE

CSSをSCSSに移行し、効率的に管理できる環境を構築します。SCSSのメリットを解説し、現状のCSSをファイル分割してSCSS化します。VSCodeでの自動コンパイル環境の構築方法、出力先の設定方法を学びます。

  • 2025/10/22
  • 0comments
  • 52views

STAY CONNECTED

wp-ch Admin

現役のフリーランスエンジニアがWordPressによるWebサイト構築を基礎から実践テクニックまで徹底解説します。

たくさんの方がフォローしてくれています。あなたもぜひ、情報を受け取ってください。

STORY｜ストーリー

WordPressを効率よく確実に学ぶためには、学習の順序が大切です。知識が自然に積み上がるよう、学習ステップに沿って記事を順番に並べています。

学習ストーリー第40話まで掲載中

全ストーリーを見る

PRACTICE｜カフェ編

カフェを題材にした本格的なサイト構築を公開中。実践を通してサイトの構築方法を学べます。

サンプルサイト：WPCafe

実践ストーリー第10話まで掲載中

全ストーリーを見る

SERIES｜シリーズ

CATEGORY｜分類

TAGS｜タグ

全てのタグを見る