11. ヘッダー・フッター・ナビゲーション

この章では、ヘッダー、フッター、ナビゲーションをWordPressテーマに組み込む方法を学びます。

静的HTMLでは、各ページに同じヘッダーやフッターを書くことがあります。

WordPressテーマでは、共通部分をheader.phpとfooter.phpに分けて管理します。

header.php

header.phpには、HTMLの先頭部分とサイト共通のヘッダーを書きます。

header.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(); ?>>
<header class="site-header">
    <a class="site-logo" href="<?php echo esc_url( home_url( '/' ) ); ?>">
        <?php bloginfo( 'name' ); ?>
    </a>
</header>

language_attributes()は、HTMLの言語属性などを出力します。

bloginfo( 'charset' )は、文字コードを出力します。

wp_head()は、WordPressやプラグインが必要なコードを出力するために必須です。

footer.php

footer.phpには、フッターとHTMLの終わりを書きます。

footer.php
<footer class="site-footer">
    <p>&copy; <?php echo esc_html( date( 'Y' ) ); ?> <?php bloginfo( 'name' ); ?></p>
</footer>

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

wp_footer()も重要です。

JavaScriptやプラグインのコードがここに出力されることがあります。

wp_footer()を書き忘れると、プラグインや管理バーが正しく動かないことがあります。

各テンプレートでは、get_header()とget_footer()で共通部分を読み込みます。

front-page.php
<?php get_header(); ?>

<main>
    <h1>トップページ</h1>
</main>

<?php get_footer(); ?>

このようにすると、ヘッダーやフッターの変更を1か所で管理できます。

ナビゲーションメニューの登録

管理画面からメニューを編集できるようにするには、functions.phpでメニューを登録します。

functions.php
function my_theme_setup() {
    register_nav_menus( array(
        'global' => 'グローバルナビゲーション',
        'footer' => 'フッターナビゲーション',
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

これで、管理画面のメニュー設定から位置を選べるようになります。

メニューの表示

登録したメニューは、wp_nav_menu()で表示します。

header.php
<nav class="site-nav" aria-label="メインメニュー">
    <?php
    wp_nav_menu( array(
        'theme_location' => 'global',
        'container'      => false,
        'menu_class'     => 'site-nav-list',
    ) );
    ?>
</nav>

theme_locationには、登録したメニュー位置を指定します。

containerをfalseにすると、不要なラッパーを出さないようにできます。

ロゴとサイト名

ロゴは、テーマ側で画像として出す場合と、WordPressのカスタムロゴ機能を使う場合があります。

カスタムロゴを使う場合は、テーマサポートを有効化します。

functions.php
add_theme_support( 'custom-logo' );

テンプレート側では、the_custom_logo()を使えます。

header.php
<?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; ?>

案件によって、ロゴをテーマ固定にするか、管理画面から変更できるようにするかを決めます。

body_class

body_class()を使うと、ページの種類に応じたクラスがbodyに出力されます。

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

たとえば、トップページ、固定ページ、投稿詳細などで異なるクラスが付きます。

CSSでページごとの調整をする時に役立ちます。

よくある失敗

  • wp_head()を書き忘れる
  • wp_footer()を書き忘れる
  • メニュー位置を登録していない
  • 管理画面でメニューを割り当てていない
  • home_url()を使わずにトップURLを固定で書く
  • ナビゲーションのHTML構造がCSSと合っていない

共通部分はサイト全体に影響するため、最初に丁寧に作ります。

この章のまとめ

  • 共通ヘッダーはheader.php、共通フッターはfooter.phpに分ける
  • 各テンプレートではget_header()とget_footer()で読み込む
  • wp_head()とwp_footer()は必ず入れる
  • メニューはregister_nav_menus()で登録し、wp_nav_menu()で表示する
  • ロゴは、テーマ固定か管理画面変更かを案件に合わせて決める