共通部の外部ファイル化で効率的なテンプレート管理を実現しよう！

2025/07/08
BASICS
WordPressの基礎
0comments
352views
約9分で読めます
16

前回の記事では、WordPressテンプレートシステムの基本として、固定ページのテンプレートを理解し、page-contact.php、カスタムテンプレート、front-page.phpを作成しました。これにより、ページごとに異なるデザインやレイアウトを実装できるようになりました。

しかし、現在のテンプレートファイルには重大な問題があります。すべてのテンプレートで同じヘッダーとフッターのコードが重複しているため、修正時に複数のファイルを変更する必要があり、保守性が非常に低い状態です。

今回の目標

header.php と get_header() 関数による共通部の外部ファイル化
footer.php と get_footer() 関数による効率的なテンプレート管理
コードの重複を排除し、保守性の高いテーマ構造の構築
実習を通じた部分テンプレートの概念と活用方法の習得

この記事では、プロフェッショナルなWordPressテーマ開発に必須の「部分テンプレート」の概念を実践的に学習します。

前回の復習と現状の確認

前回は、固定ページのテンプレートを理解し、複数のテンプレートファイルを作成しました。

現在、以下の4つのテンプレートがあります。

sample-theme/
├── front-page.php      # トップページ専用
├── kaisha.php          # 会社概要ページ専用 カスタムテンプレート
├── page.php            # 固定ページ全般
├── page-contact.php    # お問い合わせページ専用 page-スラッグ
├── index.php           # 最後の砦（実際は未使用）
└── style.css           # スタイルシート

現在の問題点を確認しよう

それぞれのテンプレートファイルを開いて見てみましょう。

すべてのテンプレートで、以下の部分が全く同じコードになっています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php the_title(); ?></title>
</head>
<body>
    <header>
        <h1><?php the_title(); ?></h1>
        <ul>
            <li><a href="<?php echo home_url(''); ?>">トップ</a></li>
            <li><a href="<?php echo home_url('about'); ?>">会社概要</a>
                <ul>
                    <li><a href="<?php echo home_url('about/history'); ?>">沿革</a></li>
                    <li><a href="<?php echo home_url('about/access'); ?>">アクセス</a></li>
                </ul>
            </li>
            <li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
            <li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>
        </ul>
    </header>
    
    <main>

問題点：コードの重複

このままだと、ページが追加になった場合、すべてのテンプレートのナビゲーションを修正する必要があります。

例えば、新しく「お客様の声」ページを追加する場合：

front-page.php を修正
kaisha.php を修正
page.php を修正
page-contact.php を修正

4つのファイルを修正するのは効率的ではありません。また、修正漏れが発生する可能性もあります。

解決策：header.phpとget_header()関数

この同じ部分を外部ファイルに切り離すことで、管理が楽になります。

1. header.phpファイルの作成

sample-themeフォルダ内に header.php ファイルを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php the_title(); ?></title>
</head>
<body>
    <header>
        <h1><?php the_title(); ?></h1>
        <ul>
            <li><a href="<?php echo home_url(''); ?>">トップ</a></li>
            <li><a href="<?php echo home_url('about'); ?>">会社概要</a>
                <ul>
                    <li><a href="<?php echo home_url('about/history'); ?>">沿革</a></li>
                    <li><a href="<?php echo home_url('about/access'); ?>">アクセス</a></li>
                </ul>
            </li>
            <li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
            <li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>
        </ul>
    </header>
    
    <main>

2. 各テンプレートファイルの修正

次に、各テンプレートファイルの共通部分を <?php get_header(); ?> に置き換えます。

front-page.php の修正例：

<?php get_header(); ?>
    <?php the_content(); ?>
    <p>※このページは front-page.php テンプレートで表示されています</p>
    </main>
    
    <footer>
        <p>© 2025 マイ・オリジナルテーマ</p>
    </footer>
</body>
</html>

kaisha.php の修正例：

<?php
/*
Template Name: 会社概要専用テンプレート
*/
?>
<?php get_header(); ?>
    <?php the_content(); ?>
    <p>※このページは kaisha.php テンプレートで表示されています</p>
    </main>
    
    <footer>
        <p>© 2025 マイ・オリジナルテーマ</p>
    </footer>
</body>
</html>

page.php と page-contact.php も同様に修正します。

テンプレートヘッダー（Template Name）がある場合は、消さないように注意してください。

3. 動作確認

ファイルを保存したら、すべてのページにアクセスして、ナビゲーションが正しく表示されることを確認しましょう。

外部ファイル化の効果を体験しよう

ナビゲーションメニューをheader.phpの一箇所で管理することで、ページ変更が楽になります。

新しいページの追加

「お客様の声」ページを追加してみましょう。スラッグは voice とします。

ナビゲーションの一括更新

header.phpファイルの以下の部分を修正するだけで、すべてのページのナビゲーションが更新されます。

<li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
<li><a href="<?php echo home_url('voice'); ?>">お客様の声</a></li>
<li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>

動作確認

すべてのページにアクセスして、「お客様の声」ページへのリンクが追加されていることを確認しましょう。

実習：footer.phpとget_footer()の作成

header.phpの作成と同様に、footer.phpも作成してみましょう。

コードの確認

現在、各テンプレートファイルの終了部分も同じコードになっています。

    </main>
    
    <footer>
        <p>© 2025 マイ・オリジナルテーマ</p>
    </footer>
</body>
</html>

実習課題

footer.phpファイルの作成
- sample-themeフォルダ内に footer.php ファイルを作成
- 上記の共通部分を移動
各テンプレートファイルの修正
- 共通部分を <?php get_footer(); ?> に置き換え
動作確認
- すべてのページでフッターが正しく表示されることを確認

解答例

footer.php

    </main>
    
    <footer>
        <p>© 2025 マイ・オリジナルテーマ</p>
    </footer>
</body>
</html>

修正後のfront-page.php

<?php get_header(); ?>
    <?php the_content(); ?>
    <p>※このページは front-page.php テンプレートで表示されています</p>
<?php get_footer(); ?>

他のテンプレートファイルも同様に修正します。

外部ファイル化の設計考慮点

どこまでをヘッダーにするか

今回は <main> タグの開始まで共通化しました。

現状のテンプレートだと、<?php the_content(); ?> までheader.phpに入れても大丈夫ですね。

しかし、ページごとにコンテンツエリアのデザインが大きく異なる場合は、</header> までを共通化する方が良いでしょう。

判断基準

<main> タグまで共通化（現在の構成）
- すべてのページでメインコンテンツのレイアウトが同じ場合
- シンプルな構成の場合
</header> まで共通化：
- ページごとにメインコンテンツのデザインが大きく異なる場合
- より柔軟なレイアウトが必要な場合

まとめ

今回習得したスキル

header.php と get_header() 関数の活用
footer.php と get_footer() 関数の活用
共通部分の外部ファイル化による効率的な管理
コードの重複を避ける設計手法

外部ファイル化の利点

メンテナンス性の向上：1つのファイルを修正するだけで全体に反映
修正漏れの防止：複数ファイルの修正が不要
開発効率の向上：重複コードの削減
一貫性の確保：すべてのページで同じヘッダー・フッターを保証

Webサイトの共通パターン

Webサイトでは、ヘッダー部とフッター部が共通していることが多いです。

header.php と get_header()、footer.php と get_footer() を使うことで、共通部を一箇所で管理できます。

次回予告

次回は、ナビゲーションのメニュー化について学習します。

現在、ナビゲーションは以下のようにHTMLで直接記述しています。

<ul>
    <li><a href="<?php echo home_url(''); ?>">トップ</a></li>
    <li><a href="<?php echo home_url('about'); ?>">会社概要</a>
        <ul>
            <li><a href="<?php echo home_url('about/history'); ?>">沿革</a></li>
            <li><a href="<?php echo home_url('about/access'); ?>">アクセス</a></li>
        </ul>
    </li>
    <li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
    <li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>
</ul>

この方法では、ページを追加するたびにコードを修正する必要があります。