WordPress header.phpとfooter.phpの作り方

Q: body_class()にカスタムクラスを追加するにはどうすればいいですか？

functions.php で body_class フィルターを使います。たとえば add_filter( 'body_class', function( $classes ) { $classes[] = 'my-custom-class'; return $classes; } ); のように記述すると、全ページの body タグに my-custom-class が追加されます。条件分岐と組み合わせれば、特定のページにだけクラスを追加することも可能です。

WordPress の header.php と footer.php は、サイト全ページで共通して表示されるヘッダーとフッターのテンプレートファイルです。この2つのファイルを正しく実装すれば、ナビメニュー・ロゴ・コピーライトなどの共通パーツを1か所で管理でき、全ページに反映されるようになります。

header.php には wp_head() という必須関数があり、CSSやJavaScriptの読み込み、SEOプラグインのmetaタグ出力などがすべてこの関数を通じて行われます。同様に footer.php には wp_footer() が必須で、スクリプトの読み込みや管理バーの表示に使われます。これらを省略するとプラグインやテーマの機能が正常に動作しなくなるため、テーマ自作時に最も重要なポイントです。

この記事はWordPressテーマのテンプレートファイル一覧と役割の詳細記事です。テンプレートファイル全体の仕組みを先に把握しておくと、header.php と footer.php の位置づけがより理解しやすくなります。

header.phpとfooter.phpの役割

WordPressテーマでは、各ページのテンプレート（single.php、page.php、archive.php など）がページごとの表示を担当しますが、ヘッダーとフッターは全ページで共通です。そのため header.php と footer.php を分離し、各テンプレートから呼び出す仕組みになっています。

get_header() と get_footer() で呼び出す

各テンプレートファイル（single.php、page.php など）の冒頭で get_header() を、末尾で get_footer() を呼び出すと、それぞれ header.php と footer.php が読み込まれます。

<?php get_header(); ?>

<main>
    <!-- ページ固有のコンテンツ -->
</main>

<?php get_footer(); ?>

この構造により、ヘッダーやフッターのHTML変更は header.php / footer.php を1か所修正するだけで全ページに反映されます。

wp_head() と wp_footer() が必須な理由

wp_head() と wp_footer() は、WordPressのアクションフックを実行するテンプレートタグです。プラグインやテーマが CSS・JavaScript・metaタグなどを出力する際、すべてこのフックを利用します。

もしこれらを省略すると、以下のような問題が発生します。

SEOプラグインのmetaタグが出力されない
CSSやJavaScriptが正しく読み込まれない
管理バー（ログイン中に表示される黒いバー）が表示されない
プラグインの機能が全般的に動作しなくなる
ブロックエディタのスタイルが適用されない

WordPress公式テーマレビューチーム（Theme Review Team）のガイドラインでも、wp_head() と wp_footer() の実装は必須要件とされています。テーマ自作時には必ず含めてください。

CSSやJavaScriptの読み込み方法を詳しく知りたい方は、CSSの正しい読み込み方とJavaScriptの正しい読み込み方を参照してください。いずれも wp_head() / wp_footer() のフックを通じて動作します。

header.phpの基本的な書き方

header.php には、HTMLの開始タグから <body> タグの開始、サイトヘッダーのナビゲーションまでを記述します。以下が基本的なテンプレートです。

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

<header class="site-header">
    <div class="site-branding">
        <?php if ( has_custom_logo() ) : ?>
            <?php the_custom_logo(); ?>
        <?php else : ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                <?php bloginfo( 'name' ); ?>
            </a>
        <?php endif; ?>
    </div>

    <nav class="main-navigation">
        <?php
        wp_nav_menu( [
            'theme_location' => 'primary',
            'container'      => false,
            'menu_class'     => 'nav-menu',
            'fallback_cb'    => false,
        ] );
        ?>
    </nav>
</header>

各要素の役割を順番に解説します。

DOCTYPE宣言と language_attributes()

<!DOCTYPE html> はHTML5文書であることを宣言します。language_attributes() は WordPress の設定言語に応じた lang 属性を出力します。日本語サイトの場合は lang="ja" が出力されます。

<!-- 出力結果 -->
<html lang="ja">

charset と viewport

bloginfo( 'charset' ) は WordPress の設定に基づいた文字エンコーディング（通常は UTF-8）を出力します。viewport の meta タグはレスポンシブデザインに必須です。

wp_head() の配置位置

wp_head() は必ず </head> の直前に配置します。この関数が実行されると、WordPress本体・テーマ・プラグインが wp_enqueue_scripts フックで登録した CSS や JavaScript が <link> タグや <script> タグとして出力されます。

body_class() と wp_body_open()

body_class() は、現在のページに応じたCSSクラスを <body> タグに追加します。トップページなら home、投稿ページなら single single-post のようなクラスが自動付与されるため、ページ種別ごとのスタイル調整に役立ちます。

<!-- トップページの場合の出力例 -->
<body class="home blog logged-in admin-bar">

<!-- 投稿ページの場合の出力例 -->
<body class="single single-post postid-123">

wp_body_open() は WordPress 5.2 で追加されたテンプレートタグで、<body> タグの直後に配置します。Google Tag Managerの <noscript> タグなど、<body> 直後に出力したいコードをプラグインが挿入するために使われます。

カスタムロゴとサイト名

has_custom_logo() で管理画面「カスタマイズ > サイト基本情報」に設定したロゴがあるかを判定し、ある場合は the_custom_logo() で出力します。ロゴが未設定の場合は bloginfo( 'name' ) でサイト名をテキストとして表示するフォールバックを入れておくと親切です。

ナビメニューの出力

wp_nav_menu() は、管理画面「外観 > メニュー」で作成したナビゲーションメニューを表示する関数です。theme_location で呼び出すメニューの位置名を指定します。この位置名は後述する functions.php の register_nav_menus() で登録する必要があります。

footer.phpの基本的な書き方

footer.php には、フッターのコンテンツ（ウィジェット、ナビメニュー、コピーライト等）と、wp_footer()、</body>、</html> の閉じタグを記述します。

    <footer class="site-footer">
        <div class="footer-widgets">
            <?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
                <div class="footer-widget-area">
                    <?php dynamic_sidebar( 'footer-1' ); ?>
                </div>
            <?php endif; ?>

            <?php if ( is_active_sidebar( 'footer-2' ) ) : ?>
                <div class="footer-widget-area">
                    <?php dynamic_sidebar( 'footer-2' ); ?>
                </div>
            <?php endif; ?>
        </div>

        <nav class="footer-navigation">
            <?php
            wp_nav_menu( [
                'theme_location' => 'footer',
                'container'      => false,
                'menu_class'     => 'footer-menu',
                'depth'          => 1,
                'fallback_cb'    => false,
            ] );
            ?>
        </nav>

        <div class="site-info">
            <p>© <?php echo date( 'Y' ); ?> <?php bloginfo( 'name' ); ?></p>
        </div>
    </footer>

    <?php wp_footer(); ?>
</body>
</html>

wp_footer() の役割

wp_footer() は </body> の直前に配置します。この関数は主に以下の処理を行います。

wp_enqueue_scripts で $in_footer = true として登録された JavaScript の出力
WordPress 管理バーの HTML・CSS・JavaScript の出力
プラグインがフッター領域に追加するスクリプトやトラッキングコードの出力

wp_footer() を省略すると、管理バーが表示されなくなるのが最もわかりやすい影響です。それだけでなく、多くのプラグインがフッター領域でスクリプトを出力するため、機能不全に陥る可能性があります。

フッターウィジェット

is_active_sidebar( 'footer-1' ) で、そのウィジェットエリアにウィジェットが配置されているかを確認してから dynamic_sidebar() で出力します。ウィジェットエリアの登録方法は後述の「ウィジェットエリアを登録する」セクションで解説します。

コピーライト表記

コピーライトの年表示には date( 'Y' ) を使えば、毎年自動で更新されます。サイト名は bloginfo( 'name' ) で動的に取得するのがベストプラクティスです。ハードコーディングすると、サイト名の変更時に修正漏れが発生するためです。

閉じタグの順序

footer.php の末尾は必ず以下の順序で閉じます。この順序を間違えると HTML が不正になります。

wp_footer(); を実行する
</body> で body タグを閉じる
</html> で html タグを閉じる

functions.phpでナビメニューを登録する

header.php や footer.php で wp_nav_menu() を使ってメニューを表示するには、事前に functions.php でメニューの「位置（location）」を登録する必要があります。

register_nav_menus() でメニュー位置を登録する

// functions.php に追加
function mytheme_setup() {
    register_nav_menus( [
        'primary' => 'ヘッダーメニュー',
        'footer'  => 'フッターメニュー',
    ] );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

配列のキー（'primary'、'footer'）がメニュー位置のスラッグで、値（'ヘッダーメニュー' など）が管理画面に表示されるラベルです。ここで登録した位置名を wp_nav_menu() の theme_location 引数に渡します。

wp_nav_menu() の主要パラメータ

wp_nav_menu() にはメニューの表示を細かく制御するパラメータがあります。主要なものを以下にまとめます。

パラメータ	説明	デフォルト値
theme_location	登録済みメニュー位置のスラッグ	（なし）
container	メニューを囲むHTML要素（false で非表示）	‘div’
menu_class	ul要素に付与するCSSクラス	‘menu’
depth	メニュー階層の深さ（1 で1階層のみ）	0（無制限）
fallback_cb	メニュー未設定時のコールバック関数	‘wp_page_menu’
items_wrap	メニュー項目のラッパーHTML	‘<ul id=”%1$s” class=”%2$s”>%3$s</ul>’

fallback_cb を false に設定すると、管理画面でメニューが未設定の場合に何も表示されなくなります。デフォルトの 'wp_page_menu' は固定ページの一覧を自動表示するため、意図しないメニューが表示される原因になります。

functions.php のカスタマイズについてさらに詳しく知りたい方は、functions.php便利コード集も参考にしてください。

ウィジェットエリアを登録する

footer.php でウィジェットエリアを使用するには、functions.php で register_sidebar() を使って事前に登録しておく必要があります。

register_sidebar() の基本

// functions.php に追加
function mytheme_widgets_init() {
    register_sidebar( [
        'name'          => 'フッター左',
        'id'            => 'footer-1',
        'description'   => 'フッターの左側に表示されるウィジェットエリア',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ] );

    register_sidebar( [
        'name'          => 'フッター右',
        'id'            => 'footer-2',
        'description'   => 'フッターの右側に表示されるウィジェットエリア',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ] );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

主要なパラメータの意味は以下の通りです。

パラメータ	説明
name	管理画面に表示されるウィジェットエリア名
id	テンプレートで呼び出す際のスラッグ（dynamic_sidebar() に渡す値）
description	管理画面に表示される説明文
before_widget / after_widget	各ウィジェットを囲むHTMLタグ
before_title / after_title	ウィジェットタイトルを囲むHTMLタグ

サイドバーウィジェットエリアの追加

フッターだけでなく、サイドバーのウィジェットエリアも同じ方法で登録できます。

register_sidebar( [
    'name'          => 'サイドバー',
    'id'            => 'sidebar-1',
    'description'   => 'メインサイドバーに表示されるウィジェットエリア',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h3 class="widget-title">',
    'after_title'   => '</h3>',
] );

登録後は、管理画面の「外観 > ウィジェット」からドラッグ＆ドロップでウィジェットを配置できるようになります。サイドバーのテンプレートファイル（sidebar.php）では、footer.php と同じく is_active_sidebar() と dynamic_sidebar() を使って出力します。

header.phpの条件分岐でヘッダーを出し分ける

トップページと下層ページでヘッダーのデザインを変えたい場合や、投稿ページだけに特定の要素を表示したい場合は、WordPressの条件分岐タグを使います。

よく使う条件分岐タグ

条件分岐タグ	判定内容
is_front_page()	フロントページ（トップページ）かどうか
is_home()	投稿一覧ページかどうか
is_single()	投稿の個別ページかどうか
is_page()	固定ページかどうか
is_archive()	アーカイブページ（カテゴリ・タグ・日付等）かどうか
is_search()	検索結果ページかどうか
is_404()	404ページかどうか

これらの条件分岐タグについてさらに詳しく知りたい方は、WordPress関数一覧を参照してください。

実装例: トップページだけロゴを大きく表示する

<header class="site-header">
    <div class="site-branding">
        <?php if ( is_front_page() ) : ?>
            <h1 class="site-title site-title--large">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                    <?php bloginfo( 'name' ); ?>
                </a>
            </h1>
            <p class="site-description">
                <?php bloginfo( 'description' ); ?>
            </p>
        <?php else : ?>
            <p class="site-title">
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                    <?php bloginfo( 'name' ); ?>
                </a>
            </p>
        <?php endif; ?>
    </div>
</header>

トップページでは <h1> タグでサイト名を出力し、それ以外のページでは <p> タグにしています。これは SEO の観点から、各ページの <h1> にはそのページ固有のタイトルを使うべきだからです。

実装例: 投稿ページだけにパンくずリストを表示する

<?php if ( is_single() || is_page() ) : ?>
    <nav class="breadcrumb">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>">ホーム</a>
        <span class="separator">></span>

        <?php if ( is_single() ) : ?>
            <?php
            $categories = get_the_category();
            if ( ! empty( $categories ) ) :
                $category = $categories[0];
            ?>
                <a href="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>">
                    <?php echo esc_html( $category->name ); ?>
                </a>
                <span class="separator">></span>
            <?php endif; ?>
        <?php endif; ?>

        <span class="current"><?php the_title(); ?></span>
    </nav>
<?php endif; ?>

パンくずリストはトップページでは不要なため、is_single()（投稿）または is_page()（固定ページ）の場合のみ表示しています。投稿ページではカテゴリー階層も含めた3階層のパンくずを出力します。

get_header() の引数でテンプレートを切り替える

条件分岐による出し分けが複雑になった場合は、header.php 自体を複数用意する方法もあります。get_header() に引数を渡すと、対応するファイルが読み込まれます。

// front-page.php でトップページ専用ヘッダーを呼び出す
<?php get_header( 'front' ); ?>
// → header-front.php が読み込まれる

// single.php で投稿ページ用ヘッダーを呼び出す
<?php get_header( 'single' ); ?>
// → header-single.php が読み込まれる

// 引数なしの場合
<?php get_header(); ?>
// → header.php が読み込まれる

同じ仕組みは get_footer() にも使えます。get_footer( 'minimal' ) と書けば footer-minimal.php が読み込まれます。ただし、ファイル数が増えると保守性が下がるため、条件分岐が2〜3パターン程度なら1つのファイル内で分岐する方がおすすめです。

header.php / footer.php 実装時のよくある失敗

テーマを自作する際に起きやすいミスをまとめます。これらは WordPress 公式テーマディレクトリのレビューでもリジェクト理由になるポイントです。

CSSやJSを直接記述する

header.php の <head> 内に <link> タグや <script> タグを直接記述するのは誤りです。WordPress では wp_enqueue_style() / wp_enqueue_script() を使って functions.php から登録し、wp_head() や wp_footer() を通じて出力するのが正しい方法です。

// 悪い例: header.php に直接記述
<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

// 良い例: functions.php で登録する
function mytheme_enqueue_assets() {
    wp_enqueue_style(
        'mytheme-style',
        get_stylesheet_uri(),
        [],
        wp_get_theme()->get( 'Version' )
    );
    wp_enqueue_script(
        'mytheme-script',
        get_theme_file_uri( 'assets/js/main.js' ),
        [],
        wp_get_theme()->get( 'Version' ),
        true  // フッターで読み込む
    );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );

wp_head() や wp_footer() を省略する

前述の通り、これらを省略するとプラグインが正常に動作しなくなります。特に初心者がテーマを自作する際に「HTML の構造を学ぶため」と省略してしまうケースがありますが、WordPress テーマでは絶対に必要な関数です。

titleタグを直接書く

WordPress 4.1 以降は、<title> タグをテンプレートに直接記述する代わりに、functions.php で add_theme_support( 'title-tag' ) を宣言します。これにより WordPress が自動的に適切な <title> タグを wp_head() 経由で出力します。

// functions.php に追加
function mytheme_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'post-thumbnails' );

    register_nav_menus( [
        'primary' => 'ヘッダーメニュー',
        'footer'  => 'フッターメニュー',
    ] );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

header.phpとfooter.phpの完成形テンプレート

ここまでの内容を踏まえて、実用的な header.php と footer.php の完成形コードを掲載します。functions.php の設定と合わせてコピーすれば、そのまま動作するテンプレートです。

header.php（完成形）

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

<header class="site-header">
    <div class="header-inner">
        <div class="site-branding">
            <?php if ( is_front_page() ) : ?>
                <h1 class="site-title">
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                        <?php
                        if ( has_custom_logo() ) {
                            the_custom_logo();
                        } else {
                            bloginfo( 'name' );
                        }
                        ?>
                    </a>
                </h1>
            <?php else : ?>
                <p class="site-title">
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                        <?php
                        if ( has_custom_logo() ) {
                            the_custom_logo();
                        } else {
                            bloginfo( 'name' );
                        }
                        ?>
                    </a>
                </p>
            <?php endif; ?>
        </div>

        <nav class="main-navigation" aria-label="メインメニュー">
            <?php
            wp_nav_menu( [
                'theme_location' => 'primary',
                'container'      => false,
                'menu_class'     => 'nav-menu',
                'fallback_cb'    => false,
            ] );
            ?>
        </nav>
    </div>
</header>

footer.php（完成形）

    <footer class="site-footer">
        <div class="footer-inner">
            <?php if ( is_active_sidebar( 'footer-1' ) || is_active_sidebar( 'footer-2' ) ) : ?>
                <div class="footer-widgets">
                    <?php if ( is_active_sidebar( 'footer-1' ) ) : ?>
                        <div class="footer-widget-area">
                            <?php dynamic_sidebar( 'footer-1' ); ?>
                        </div>
                    <?php endif; ?>

                    <?php if ( is_active_sidebar( 'footer-2' ) ) : ?>
                        <div class="footer-widget-area">
                            <?php dynamic_sidebar( 'footer-2' ); ?>
                        </div>
                    <?php endif; ?>
                </div>
            <?php endif; ?>

            <nav class="footer-navigation" aria-label="フッターメニュー">
                <?php
                wp_nav_menu( [
                    'theme_location' => 'footer',
                    'container'      => false,
                    'menu_class'     => 'footer-menu',
                    'depth'          => 1,
                    'fallback_cb'    => false,
                ] );
                ?>
            </nav>

            <div class="site-info">
                <p>© <?php echo date( 'Y' ); ?> <?php bloginfo( 'name' ); ?></p>
            </div>
        </div>
    </footer>

    <?php wp_footer(); ?>
</body>
</html>

functions.php（対応するセットアップ関数）

<?php
// テーマセットアップ
function mytheme_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'html5', [
        'search-form',
        'comment-form',
        'comment-list',
        'gallery',
        'caption',
    ] );

    register_nav_menus( [
        'primary' => 'ヘッダーメニュー',
        'footer'  => 'フッターメニュー',
    ] );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

// ウィジェットエリア登録
function mytheme_widgets_init() {
    register_sidebar( [
        'name'          => 'フッター左',
        'id'            => 'footer-1',
        'description'   => 'フッターの左側に表示されるウィジェットエリア',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ] );

    register_sidebar( [
        'name'          => 'フッター右',
        'id'            => 'footer-2',
        'description'   => 'フッターの右側に表示されるウィジェットエリア',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ] );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

// CSS・JS読み込み
function mytheme_enqueue_assets() {
    wp_enqueue_style(
        'mytheme-style',
        get_stylesheet_uri(),
        [],
        wp_get_theme()->get( 'Version' )
    );
    wp_enqueue_script(
        'mytheme-script',
        get_theme_file_uri( 'assets/js/main.js' ),
        [],
        wp_get_theme()->get( 'Version' ),
        true
    );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );

よくある質問（FAQ）

Q. header.phpとfooter.phpがないとどうなりますか？

header.php が存在しない場合、get_header() は WordPress デフォルトの最低限のヘッダーを出力します。ただしナビメニューやカスタムロゴは表示されず、サイトのデザインも適用されません。footer.php も同様に、存在しなければデフォルトのフッターが使われますが、実用的なテーマには必ず両方のファイルを作成してください。

Q. wp_head()とwp_footer()を書き忘れた場合の症状は？

wp_head() を書き忘れると、CSSが読み込まれずスタイルが崩れる、SEOプラグインのmetaタグが出力されない、ブロックエディタのスタイルが適用されないといった問題が起きます。wp_footer() を省略すると、管理バーが表示されなくなり、フッターで読み込むべきJavaScriptが動作しなくなります。いずれも必ず含めてください。

Q. header.phpの中でCSSファイルを直接linkタグで読み込んでもいいですか？

推奨されません。WordPress では functions.php で wp_enqueue_style() を使って CSS を登録し、wp_head() 経由で出力する方法が標準です。直接記述すると、プラグインとの依存関係の管理ができなくなり、キャッシュバスティングのバージョン管理も手動になってしまいます。また WordPress 公式テーマディレクトリへの申請時にリジェクトされる原因にもなります。

Q. header.phpを複数作ることはできますか？

はい、可能です。get_header( ‘front’ ) のように引数を渡すと header-front.php が読み込まれます。LP用にシンプルなヘッダーを使いたい場合は header-lp.php を作成し、該当テンプレートから get_header( ‘lp’ ) で呼び出す方法がよく使われます。ただしファイル数が増えると保守性が下がるため、3パターン以内に収めるのがおすすめです。

Q. wp_body_open()は必ず必要ですか？

WordPress 5.2以降のテーマでは含めることが推奨されています。wp_body_open() は body タグの直後にプラグインがコードを挿入するためのフックポイントで、Google Tag Manager の noscript タグなど、body 直後に配置が必要な要素に使われます。省略してもテーマ自体は動作しますが、GTM などのプラグインが正しく動作しない可能性があります。

Q. register_nav_menus()で登録したメニューが管理画面に表示されません

register_nav_menus() は after_setup_theme フックで実行する必要があります。functions.php にフックなしで直接記述したり、init など別のフックで実行すると正しく動作しない場合があります。また、管理画面「外観 > メニュー」でメニューを作成した後、画面上部の「位置の管理」タブから登録した位置にメニューを割り当てる操作も必要です。

Q. body_class()にカスタムクラスを追加するにはどうすればいいですか？

functions.php で body_class フィルターを使います。たとえば add_filter( 'body_class', function( $classes ) { $classes[] = 'my-custom-class'; return $classes; } ); のように記述すると、全ページの body タグに my-custom-class が追加されます。条件分岐と組み合わせれば、特定のページにだけクラスを追加することも可能です。

まとめ

header.php と footer.php は、WordPress テーマの全ページで共通するHTMLを管理するテンプレートファイルです。この記事のポイントをまとめます。

wp_head() と wp_footer() は絶対に省略しない — プラグイン・CSS・JSの出力に必須
CSSやJSは直接書かず、wp_enqueue_style / wp_enqueue_script で登録する
ナビメニューは register_nav_menus() + wp_nav_menu() の組み合わせで実装する
ウィジェットエリアは register_sidebar() で登録し、is_active_sidebar() で有無を確認してから出力する
条件分岐タグ（is_front_page、is_single 等）でページごとの出し分けが可能
title タグは add_theme_support( ‘title-tag’ ) で自動出力させ、直接記述しない

header.php と footer.php を正しく実装できれば、テーマ自作の土台ができあがります。他のテンプレートファイルとの関係や全体像についてはWordPressテーマのテンプレートファイル一覧と役割を確認してください。

WordPress header.phpとfooter.phpの作り方｜テーマの共通パーツを実装する