2025年07月09日[水曜日]

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

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

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

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

今回の目標

  • header.phpget_header() 関数による共通部の外部ファイル化
  • footer.phpget_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.phppage-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>

実習課題

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

解答例

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> まで共通化
    • ページごとにメインコンテンツのデザインが大きく異なる場合
    • より柔軟なレイアウトが必要な場合

まとめ

今回習得したスキル

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

外部ファイル化の利点

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

Webサイトの共通パターン

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

header.phpget_header()footer.phpget_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>

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

次回の内容

  • WordPressのメニュー機能の活用
  • 外観→メニューでの設定方法
  • wp_nav_menu() 関数の使い方
  • 管理画面からメニューを管理する方法

WordPressの標準機能を使うことで、コードを修正することなく、管理画面からナビゲーションを管理できるようになります。

重要なポイント

今回学習した外部ファイル化は、WordPressテーマ開発の基本中の基本です。プロフェッショナルなテーマ開発では必須の技術ですので、しっかりと身につけましょう。

また、どこまでを共通化するかは、サイトの要件や設計によって異なります。適切な判断ができるよう、様々なパターンを経験することが大切です。

成果物

この記事で作成した成果物は、以下のページでまとめて確認することができます。

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

この記事の評価をお願いします

評価をすると「既読」となり、まだ読んでいない記事を区別できます。

この投稿をシェアする

コメントを残す

CAPTCHA



テンプレートを理解しよう! – WordPressテンプレートシステムの基本【後編】

テンプレートを理解しよう! – WordPressテンプレートシステムの基本【後編】  BASICS

WordPressテンプレート階層の実践的な活用方法を解説。お問い合わせページ専用テンプレートの作成、Template Name機能を活用したカスタムテンプレートの実装、トップページ専用デザインの構築など、ページごとに異なるデザインやレイアウトを実装する具体的な方法を習得できます。

  • 2025/07/09
  • 0comments
  • 56views

WordPressの標準メニュー機能でナビゲーションを効率管理しよう!

WordPressの標準メニュー機能でナビゲーションを効率管理しよう!  BASICS

WordPressテーマ開発における効率的なナビゲーション管理の実装方法を解説します。現在のHTMLでのメニュー記述から脱却し、WordPressの標準メニュー機能を活用することで、技術的知識のない管理者でも管理画面から直感的にメニューを編集できる環境を構築します。

  • 2025/07/09
  • 0comments
  • 44views

STAY CONNECTED

wp-ch Admin

現役のフリーランスエンジニアがWordPressによるWebサイト構築を基礎から実践テクニックまで徹底解説します。

たくさんの方がフォローしてくれています。あなたもぜひ、情報を受け取ってください。

TAGS