WordPress

【WordPress/PHP】ヘッダーとフッターを別ファイルに分割し読み込む方法

本記事では、WordPressでヘッダー(header)とフッター(footer)を別ファイルに切り分けそれを各ファイルで読み込む方法について解説しています。

WordPressの学習におすすめ参考書
1冊ですべて身につくWordPress入門講座

本書情報
著者Mana
発売日2022/3/22
ページ数344ページ
Kindle版
レビュー
(Amazon)
(217件)

【中・上級者向け】オリジナルテーマの作り方が学べるおすすめ参考書
WordPressオリジナルテーマ制作入門

本書情報
著者清水 由規 / 清水 久美子 / 鈴木 力哉 / 西岡 由美
発売日2022/1/13
ページ数416ページ
Kindle版
レビュー
(Amazon)
(53件)
先輩くん
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
後輩ちゃん
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

サンプルコード

以降の解説では、下記のサンプルコードを使用します。

<!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>Test</title>
</head>
<body>
    <header>
        <p>Header</p>
    </header>
    <main>
        <p>Main Content</p>
    </main>
    <footer>
        <p>Footer</p>
    </footer>
</body>
</html>

ヘッダーの分割と読み込み

まず始めに、ヘッダーの分割と分割したヘッダーファイルを読み込む方法について解説します。

分割したヘッダーのコードが記述される空のファイルを作成します。ヘッダーの名前は「header.php」にします。

続いて、ヘッダーとして共通化したいコードを決めます。サンプルコードの場合、「!DOCTYPE html」~「</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>Test</title>
</head>

最後に、分割したheader.phpをindex.phpで読み込みます。読み込むためには「get_header()」を使用します。get_header()は、テーマディレクトリにあるheader.phpを読み込むためのテンプレートタグです。

<?php get_header() ?>
<main>
    <p>Main Content</p>
</main>
<footer>
    <p>Footer</p>
</footer>
</body>
</html>

これで、header.phpがindex.phpで読み込みされるようになります。

フッターの分割と読み込み

フッターの分割と分割したフッターファイルを読み込む方法ですが、ヘッダーの時とほぼ同じです。異なる点はファイル名とテンプレートタグだけです。

ヘッダーと同様に、空のファイルを作成します。ファイル名は「footer.php」にします。

続いて、フッターとして共通化したいコードを決めます。サンプルコードの場合、「<footer>」~「</html>」の内容をフッターとして共通化したいので、該当するコードをカットし先ほど作成した空のfooter.phpに貼り付けます。

<footer>
    <p>Footer</p>
</footer>
</body>
</html>

最後に、分割したfooter.phpをindex.phpで読み込みます。読み込むためには「get_footer()」を使用します。get_footer()は、テーマディレクトリにあるfooter.phpを読み込むためのテンプレートタグです。

<?php get_header() ?>
<main>
    <p>Main Content</p>
</main>
<?php get_footer() ?>

これで、footer.phpがindex.phpで読み込みされるようになります。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村