【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

WordPressの学習におすすめ書籍
1冊ですべて身につくWordPress入門講座
総合評価
( 5 )
メリット
  • サイト運営に必須のことが学べる
  • 基本的な使い方~オリジナルテーマ開発まで学べる
楽天ブックス
¥2,200 (2024/05/21 12:05時点 | 楽天市場調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahoo!ショッピングで探す
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahoo!ショッピングで探す
目次

サンプルコード

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

<!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アクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次