【WordPress】ヘッダー・フッターのテンプレート作成方法【header.php、footer.php】

ワードプレスでは通常のhtmlファイルとは異なり、ヘッダー・フッターをテンプレート化することができます。

ヘッダー・フッター用のファイルを作成し、それぞれのページから読み込ませることで、全ページでヘッダー・フッターが統一され、一括管理をすることができるようになります。

ヘッダー・フッターをテンプレート化する方法

ヘッダーはheader.php、フッターはfooter.phpとしてファイルを作成する
それぞれを各ページから
<?php get_header(); ?>
<?php get_footer(); ?>
と記述して呼び出す
functions.phpに
add_theme_support( ‘title-tag’ );
と記述することでtitleタグを自動生成する
ページによって出力内容を変える場合はifを使って分岐させる

全てのページにヘッダーとフッターを記述しておいても問題はありませんが、テンプレート化しておくと素敵なメリットがあります。

えふぃ

せっかくテンプレート化できるんですから、やらない手はありません！

今回は、適当なサンプルページを用意し、そのヘッダーとフッターをテンプレート化していきます。

まだワードプレスサイトをお持ちでない方は、ローカルサーバーにワードプレスサイトを設置する方法を紹介しています。

テンプレート化する元ファイルを準備する
まずはwp_headとwp_footerを設置する
テーマディレクトリ内に「header.php」と「footer.php」を作成する
全ページのタイトルタグまで統一されるんだけど？
- wp_titleじゃないの？
ページによって出力するヘッダーを変更する
ヘッダー・フッターのテンプレート化による素敵なメリット

サンプルコードの使い方

コード右上のアイコンをクリックすることでコピーできます。

それでは本文へ、レッツゴー！

テンプレート化する元ファイルを準備する

まずヘッダー・フッターをテンプレート化にあたって、元のファイルが必要になりますね。

テンプレート化したいファイルを既にお持ちの場合はそちらでOK
この見出しは読み飛ばしてください。

特に試したいファイルを持っていない方のために、サンプルも用意しています。
めちゃしょぼいやつ。

まずは簡易的なテーマを作成しましょう。

テーマの作成方法はこちらで紹介しています。

【WordPress】オリジナルテーマ　オリジナルテーマに必須のファイルを覚えよう！

そして以下をテーマディレクトリ内の「index.php」にコピペします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>タイトル</title>
</head>
<body>
    <header>
        ヘッダー
    </header>    

    <main>
        メイン
    </main>

    <footer>
        フッター
    </footer>
</body>
</html>

さてそれではヘッダーとフッターをテンプレート化！

といきたい所ですが、このファイルにはワードプレスとして、必須の記述が足りていません。

まずはそれを記述していきます。

まずはwp_headとwp_footerを設置する

ヘッダーとフッターをテンプレート化する前に、まずは以下の2つを設置しておきましょう。

忘れてはいけないこの子たち

</head>の直前に「<?php wp_head(); ?>」
</body>の直前に「<?php wp_footer(); ?>」

これらはテンプレート化に必要というよりかは、

ワードプレスのファイルに必須の記述で、おまじないのようなものだと思ってください。

詳しい説明は割愛しますが、これがないとプラグインが正常に動かなくなったりします。
ページの見た目にはほぼ影響しません。

これを先ほどのサンプルファイルに入れると、以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>タイトル</title>
    <?php wp_head(); ?>
</head>
<body>
    <header>
        ヘッダー
    </header>    

    <main>
        メイン
    </main>

    <footer>
        フッター
    </footer>
   
    <?php wp_footer(); ?>
</body>
</html>

それでは、実際にヘッダーとフッターをテンプレート化していきます！

テーマディレクトリ内に「header.php」と「footer.php」を作成する

まずはワードプレステーマのディレクトリ内に、

header.php
footer.php

を作成します。

style.cssとfunctions.phpは、ワードプレスのテーマに必須のファイルです。

そして、

header.phpには、テンプレート化したいヘッダー部分の記述を、

footer.phpには、テンプレート化したいフッター部分の記述を、

それぞれindex.phpから切り取って貼り付けます。

どこからどこまでという厳密な決まりはありません。

割と個人の好みで分かれます。

どこからどこまでコピペする？

header（footer）タグの中身だけをコピペする
header（footer）タグごとコピペする
header（footer）タグを飛び越えて他のタグもコピペする

今回は3つ目の「header（footer）タグを飛び越えて他のタグもコピペする」のパターンでやっていきます。

えふぃ

もちろん、1つ目でも2つ目でもどれでもOKです！

header.php

index.phpの1行目から、</header>までを切り取って、header.phpに貼り付けます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>タイトル</title>
    <?php wp_head(); ?>
</head>
<body>
<header>
    ヘッダー
</header>

サンプルファイルではなくご自身で用意したファイルを使っている場合も同様です。

これでテンプレート化されたヘッダー、header.phpが完成しました！

footer.php

index.phpの<footer>から、最終行までを切り取って、footer.phpに貼り付けます。

<footer>
    フッター
</footer>

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

これでfooter.phpも完成し、フッターもテンプレート化されました！

しかしindex.phpは、ただのmainタグしかないファイルに成り下がってしまいました。

inde.phpに、header.phpとfooter.phpを呼び出すための記述をしていきます。

index.phpにget_headerとget_footerを設置する

index.phpでさきほどまでヘッダーとフッターがあった場所に、ぞれぞれ

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

と記述します。

<?php get_header(); ?>

    <main>
        メイン
    </main>

<?php get_footer(); ?>

この記述は、それぞれheader.phpとfooter.phpを読み込む記述です。

これで、index.phpに、ヘッダーとフッターを呼び戻すことができました！

えふぃ

これで晴れて、ヘッダーとフッターのテンプレート化が完成しました！

実際にワードプレスサイトから画面を確認してみると、立派なヘッダーとフッターがしっかりと読み込まれていることが確認できます。

これで完璧！と思いきや実はそうではありません。

もう少しだけがんばりましょう！

全ページのタイトルタグまで統一されるんだけど？

ここに気づいたあなたは天才です。

そう、今のheader.phpのtitleタグを見てください。

<title>タイトル</title>

つまり、どのページを開いても、タイトルが「タイトル」になってしまいます。

これは困りますね…。

ここは思い切って、titleタグを消しちゃいます。

するとこうなりますね。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body>
    <header>
        ヘッダー
    </header>

そしてfunctions.phpに、以下をコピペしましょう。

add_theme_support( 'title-tag' );

これを記述することで、ワードプレスが自動的にtitleタグを生成してくれます。

トップページ → サイト名 – キャッチフレーズ
サブページ → ページタイトル – サイト名

-（ハイフン）部分を|（バーティカルバー）に変更したい場合は、続けてfunctions.php以下をコピペすることで変更できます。

function rewrite_separator($separator) {
    $separator = '|';
    return $separator;
}
add_filter('document_title_separator', 'rewrite_separator');

wp_titleじゃないの？

ここはおまけコンテンツなので読み飛ばしてもOK

かつてはtitleタグ内にwp_title()と記述してタイトルタグを作成していました。

これは廃止される宣言を食らったり、非推奨だったり、風前の灯状態です。

現在も使えるようですが、去る者は追うべからず。

廃止オーラが漂っているので、使わないようにするのがベターです。

ページによって出力するヘッダーを変更する

トップページとサブページでヘッダーが異なる場合ってよくありますよね。

トップページだけテンプレートファイルを読み込ませないという方法でももちろんOKです。

しかし、ページによって出力させるヘッダーの内容を変えることもできます。

えふぃ

内容が違っても、ヘッダーは全てheader.phpにまとめたほうが管理がしやすいです！

この場合、条件分岐を使って出力する内容を変えるという手法を使います。

「条件分岐…？はて…？」という方は、こちらをご覧ください。

header.phpのheadタグ内を、以下に書き換えます。

<?php if(is_home()): ?>
    <p>ホームのヘッダー</p>

<?php elseif(is_page()): ?>
    <p>固定ページのヘッダー</p>

<?php elseif(is_single()): ?>
    <p>投稿ページのヘッダー</p>

<?php elseif(is_archive()): ?>
    <p>アーカイブページのヘッダー</p>

<?php elseif(is_404()): ?>
    <p>404ページのヘッダー</p>

<?php else: ?>
    <p>その他のヘッダー</p>

<?php endif; ?>

するとheader.phpは、このようになりますね。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body>
    <header>
        <?php if(is_home()): ?>
            <p>ホームのヘッダー</p>

        <?php elseif(is_page()): ?>
            <p>固定ページのヘッダー</p>

        <?php elseif(is_single()): ?>
            <p>投稿ページのヘッダー</p>

        <?php elseif(is_archive()): ?>
            <p>アーカイブページのヘッダー</p>

        <?php elseif(is_404()): ?>
            <p>404ページのヘッダー</p>

        <?php else: ?>
            <p>その他のヘッダー</p>

        <?php endif; ?>
    </header>

これにより、ページの種類によってheadタグの出力内容が変わるようになりました。

またここで使っているif文での分岐は、さまざまな共通パーツに対して使用することができます。

少し過剰なまでに分岐させてしまったので、不要な部分は消しましょう。

これでワードプレス、header.phpとfooter.phpの基本的な知識と技術が身につきました！

えふぃ

まだまだ他にもできることはあるのですが、最初はとりあえずこのくらい知っておけばOK

何かしら複雑な処理でもしない限り、そこまで困ることはないかと思います。

ヘッダー・フッターのテンプレート化による素敵なメリット

ヘッダー・フッターは別にテンプレート化しておかなくても、何ら問題はありません。

普通にウェブサイトとして機能します。

ただしテンプレート化しておくことで、とっても素敵なメリットがあります。

例えば、ヘッダーやフッターで何か変更箇所があった場合、htmlだと全てのファイルを書き換えなければなりません。

えふぃ

エディターで一斉に置換すれば済む話でもあるのですが、その場合、他の箇所で同一の記述があると、そいつまで置換の巻き添えを食らってしまいます。

気づかずに置換してしまい、

「あれ！？なんでここ替わってんの！？」なんてこともしばしば…。

ワードプレスでは、ヘッダーはheader.phpとして、フッターはfooter.phpとして作成します。

こうやってヘッダー・フッターをテンプレート化し一元管理することでこれらの問題を全て解決することができます。

ヘッダー・フッターをテンプレート化する方法

ヘッダーはheader.php、フッターはfooter.phpとして作成する
それぞれを各ページから
<?php get_header(); ?>
<?php get_footer(); ?>
と記述して呼び出す
functions.phpに
add_theme_support( ‘title-tag’ );
と記述することでtitleタグを自動生成する
ページによって出力内容を変える場合はifを使って分岐させる

今日もあなたが夢に向かって一歩前進できていますように。
お疲れ様でした。

【WordPress】ヘッダー・フッターのテンプレート作成方法【header.php、footer.php】

サンプルコードの使い方

テンプレート化する元ファイルを準備する

まずはwp_headとwp_footerを設置する

テーマディレクトリ内に「header.php」と「footer.php」を作成する

header.php

footer.php

index.phpにget_headerとget_footerを設置する

全ページのタイトルタグまで統一されるんだけど？

wp_titleじゃないの？

ページによって出力するヘッダーを変更する

ヘッダー・フッターのテンプレート化による素敵なメリット

【JavaScript】クォーテーションの使い分けと文字列・変数の連結方法【’と”と`】

【JavaScript】要素内のテキスト取得・削除・書き換え方法【textContent、innerHTML】

【JavaScript】いろんな要素の取得方法まとめ【querySelector】

【.htaccess】BASIC認証とは？特定のページにアクセス制限をかける方法

【WordPress】年別・月別アーカイブの作成方法【wp_get_archives】

サンプルコードの使い方

テンプレート化する元ファイルを準備する

まずはwp_headとwp_footerを設置する

テーマディレクトリ内に「header.php」と「footer.php」を作成する

header.php

footer.php

index.phpにget_headerとget_footerを設置する

全ページのタイトルタグまで統一されるんだけど？

wp_titleじゃないの？

ページによって出力するヘッダーを変更する

ヘッダー・フッターのテンプレート化による素敵なメリット

【WordPress】カテゴリーやタグの出力をカスタマイズする方法

【WordPress】アップロードできるファイルのサイズ上限を変える方法

【WordPress】投稿一覧（アーカイブ）ページの作成方法【archive.php】

【JavaScript】クォーテーションの使い分けと文字列・変数の連結方法【’と”と`】

【JavaScript】要素内のテキスト取得・削除・書き換え方法【textContent、innerHTML】

【JavaScript】いろんな要素の取得方法まとめ【querySelector】

【.htaccess】BASIC認証とは？特定のページにアクセス制限をかける方法

【WordPress】年別・月別アーカイブの作成方法【wp_get_archives】