2026年8月26日

WordPressのヘッダーパーツ（header.php）をカスタマイズ

テーマ・デザイン

はじめに

WordPressサイトのヘッダー部分は、サイトのブランドイメージやユーザビリティを大きく左右する重要な要素です。header.phpファイルを通じて、独自のナビゲーションメニュー、ロゴ、サブメニューなどをカスタマイズすることができます。

この記事では、基本的なカスタマイズから応用まで、header.phpファイルの編集方法について詳しく解説します。

症状・背景

ロゴやサイト名を変更したい
トップページと他の固定ページで異なるヘッダーを使用したい
カスタムメニューを追加したい
ヘッダーパネルのレイアウトをカスタマイズしたい

手順・設定方法

ステップ1: header.phpファイルへのアクセス

# WordPressテーマディレクトリに移動します
cd wp-content/themes/your-theme-name/

# header.phpファイルを開きます
nano header.php

ステップ2: ロゴとサイト名のカスタマイズ

# 現在のロゴとサイト名を削除またはコメントアウトします
<!-- <div class="site-branding"> -->
<!--     <?php the_custom_logo(); ?>
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    <p class="site-description"><?php bloginfo( 'description' ); ?></p>
</div> -->

# カスタムロゴとサイト名を追加します
<div class="custom-logo">
    <img src="<?php echo get_template_directory_uri(); ?>/images/custom-logo.png" alt="<?php bloginfo('name'); ?>" />
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">カスタムサイト名</a></h1>
</div>

ステップ3: ナビゲーションメニューの追加

# 現在のナビゲーションメニューを削除またはコメントアウトします
<!-- wp_nav_menu( array('theme_location' => 'primary') ); -->

# カスタムナビゲーションメニューを追加します
<nav id="custom-menu">
    <ul>
        <?php wp_list_pages(array('title_li' => '', 'depth' => 1)); ?>
        <?php wp_register(); ?>
        <?php wp_loginout(); ?>
    </ul>
</nav>

ステップ4: ヘッダーの応用設定

# 現在のヘッダーレイアウトを変更します
<!-- <header class="site-header"> -->
<header id="custom-header" class="custom-header-class">
    <?php get_template_part( 'template-parts/header/site-branding' ); ?>
    <?php if ( has_nav_menu( 'primary' ) ) : ?>
        <nav id="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'your-theme-name' ); ?>">
            <?php wp_nav_menu( array('theme_location' => 'primary') ); ?>
        </nav>
    <?php endif; ?>
</header>

# CSSを追加してヘッダーのスタイルをカスタマイズします
<style>
.custom-header-class .site-branding {
    display: flex;
    align-items: center;
}
.custom-header-class nav {
    background-color: #333;
}
</style>

注意事項

カスタマイズする前にテーマのバックアップを取ること。
無効なPHPコードが含まれていないか、エディタで確認すること。
テーマの更新時にカスタマイズ内容が上書きされないよう注意すること。
ヘッダー部分のJavaScriptは適切にロードされるように設定すること。
カスタムヘッダー画像を使用する場合、レスポンシブデザインに配慮すること。

まとめ

1. ファイルアクセス: header.phpへのアクセス方法を理解し、編集可能かどうか確認すること。

2. 基本カスタマイズ: ロゴやサイト名の変更から始めて、ナビゲーションメニューの追加を行うこと。

3. 応用設定: カスタムヘッダー画像やCSSを使用して、デザインをさらに洗練させること。

4. セキュリティと保守: 無効なコードがないか確認し、更新時のバックアップを取ること。

5. パフォーマンス最適化: ヘッダーのJavaScriptが正常にロードされるように設定すること。

Post Views: 9