自作テーマの顔:header.php の作り方完全ガイド

functions.phpで定義した設定を実際にサイトの見た目に反映させるのが、テンプレートファイルの役割です。その中でも**header.php**は、サイトの「顔」であり、SEOやプラグインの動作に不可欠な「頭脳」の一部でもあります。

今回は、自作テーマにおける**「正しく、かつメンテナンスしやすいheader.phpの作り方」**を解説します。


header.phpの主な役割は、すべてのページで共通して使われる**「HTMLの宣言からナビゲーションメニューまで」**を記述することです。WordPress専用の関数(テンプレートタグ)を適切に配置するのがポイントです。


1. header.php の基本構造(全体像)

まずは、標準的なheader.phpのソースコードを見てみましょう。

PHP

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<header class="site-header">
    <div class="container">
        <h1 class="site-title">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                <?php bloginfo( 'name' ); ?>
            </a>
        </h1>

        <nav class="main-navigation">
            <?php
            wp_nav_menu( array(
                'theme_location' => 'main-menu', // functions.phpで登録したID
                'container'      => false,
                'menu_class'     => 'nav-list',
            ) );
            ?>
        </nav>
    </div>
</header>

2. 絶対に外せない「3つの必須テンプレートタグ」

自作テーマでこれを忘れると、プラグインが動かなかったり、管理画面のバーが表示されなかったりします。

  • language_attributes():<html lang=”ja”>などを自動出力します。管理画面で設定した言語に合わせて動的に変わります。
  • wp_head():最も重要です。 </head>タグの直前に記述します。これがないと、functions.phpで読み込んだCSSや、SEOプラグイン、アクセス解析コードなどが一切出力されません。
  • body_class():<body class=”home blog…”>のように、ページの種類に応じたCSSクラスを自動付与します。ページごとにデザインを変えたい時に非常に便利です。

3. サイトタイトルとリンクの書き方

ロゴやサイト名には、トップページへのリンクを貼るのが一般的です。

  • esc_url( home_url( '/' ) ): サイトのトップページURLを取得します。セキュリティのためにesc_urlで囲むのがWordPressの作法です。
  • bloginfo( 'name' ): 設定画面で入力した「サイトのタイトル」を表示します。

4. メニューを動的に表示する(wp_nav_menu)

前回functions.phpで登録したメニューを、ここで呼び出します。

PHP

wp_nav_menu( array(
    'theme_location' => 'main-menu', // 紐付けたいメニュー位置のID
    'menu_class'     => 'header-nav', // <ul>に付与するCSSクラス名
) );

このように書くことで、管理画面の「外観 > メニュー」で作った項目が、自動的にHTML(<ul><li>)として出力されます。


header.php を作る際の注意点

  1. wp_body_open() を忘れずに:WordPress 5.2から追加されたタグです。<body>の直後に記述します。計測タグ(Google Tag Managerなど)を挿入するプラグインなどがここを利用します。
  2. 固定のCSSリンクは書かない:<link rel=”stylesheet” href=”…”>を直接書きたくなりますが、それは前回解説した通りfunctions.phpから読み込むのがWordPressのルールです。

次のステップ:他のファイルとの連携

header.phpができたら、次はindex.phpsingle.phpなどの一番上で呼び出してみましょう。

PHP

<?php get_header(); ?>
<?php get_footer(); ?>

この一行(get_header();)を書くだけで、今回作成したheader.phpの内容が読み込まれます。

システム開発なんでもパートナー
システム開発なんでもパートナー

この記事を書いた人