1. HOME
  3. WordPress

【WordPress】共通パーツを別ファイルに分ける・読み込む方法と解説

ASAI

ASAI

投稿日

今回はWordPressでサイト制作をする際の共通パーツの分け方・読み込み方を解説します。

共通パーツを別ファイルに分けることで、何度も同じコードを書くという工数は減りますし、間違いも少なくなるのでコードの管理がしやすくなります。

分け方や読み込み方を覚えてより良いサイト制作に活かしていきましょう。

なぜファイルを分けるのか？

WordPressは1つのファイルに記述しても画面に表示することができますが、なぜわざわざファイルをパーツ化して分けるのでしょうか？

順番に理由をみていきましょう。

WordPressで作成するサイトは共通する部分が多い

WordPressで作成するサイトの特徴として、新着情報やブログ、商品、イベント情報等・・・サイトの保有者が更新できるサイトであることが多いです。

その場合、トップページの他に下層ページが複数あることが考えられ、ページ数の合計はトップページを入れて数ページから数十ページになります（中には百数十ページのサイトもあります）。

このようなページ数が多いサイトでも共通のデザインを使用する箇所があります。

それは、ヘッダーとフッターです。

サイトによってはサイドバーも共通して表示させる場合もあります。

このような何度も使用する部分は、パーツ化して読み込むことで全ページにコードを記述するという工数が削減できます。

もし、トップページと下層ページで異なるデザインだとしても、後述する引数を利用すれば簡単に条件分岐することができます。

修正が簡単

修正する場合、パーツ化せず直接記述していると全てのページを修正しなければならないのでページ数の多いサイトは大変です。

誤って修正していないページが出てくる可能性もあります。

パーツ化したファイルを読み込む構造になっていると、ページ数の多いサイトでもパーツ化したファイルのみを修正すれば全てのページが変更になるので簡単で正確です。

サイトの構造をわかりやすくする

パーツ化せずに直接記述していると１ページあたりのコードの量が多くなって可読性が下がります。

可読性が下がるとコーディングしにくくなるので効率が悪いですよね。

パーツ化することで１ページ中のコード記述量が減り、可読性が上がるのでページ内の構造を理解しやすくなります。

モジュールテンプレートとは

これまで「パーツ化」と言っていた共通部分は「モジュールテンプレート」にすることができます。

モジュールテンプレートとは、複数のファイルの中で共通する部分をパーツ化して別ファイルにしたものです。

以下のものがよく使用されます。

  • header.php
  • footer.php
  • sidebar.php
  • searchform.php
  • comments.php

上記の他に、パーツ化して使用したい箇所があれば自分でファイルを作成して好きな名前をつけたファイルを読み込むことができます。

（例：独自の「entry.php」というファイルを読み込む）

共通パーツを見つけよう

では、実際に共通パーツを見つけてモジュールテンプレートを作成する準備をしていきましょう。

下記のコードは、トップページを表示するfront-page.phpと固定ページを表示するpage.phpです。

ひたつを見比べて同じ部分を探しながら、再利用しやすいように範囲を見極めます。

（下記コード内のheaderタグ、footerタグ内は記述量を少なくするために省略しています。）

front-page.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<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 <?php body_class('body'); ?>>
  <header class="header" id="header">
    ロゴ
    ナビゲーション
  </header>
  <!-- header共通ここまで -->

  <div class="contents">
    <div class="contents__inner">
      <p>トップページです</p>
    </div>
  </div>

  <!-- footer共通ここから -->
  <footer　class="footer" id="footer">
    ロゴ
    アドレス
    メニュー
    コピーライト
  </footer>

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

</html>
page.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<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 <?php body_class('body'); ?>>
  <header class="header" id="header">
    ロゴ
    ナビゲーション
  </header>
  <!-- header共通ここまで -->

  <div class="contents">
    <div class="contents__inner">
      <p>固定ページです</p>
    </div>
  </div>

  <!-- footer共通ここから -->
  <footer　class="footer" id="footer">
    ロゴ
    アドレス
    メニュー
    コピーライト
  </footer>

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

</html>

コード内にヘッダーとフッターの共通部分の範囲を示しました。

範囲をどこまでにするかは人それぞれで、閉じタグを異なるファイルに記述する方もいます。

私はタグを閉じ忘れる可能性があるので、大きな括り以外は閉じタグまでをファイルに記述するようにしています。

ご自分がやりやすいように範囲を設定してください。

モジュールテンプレートを読み込む

モジュールテンプレートを作成する準備が完了したので、実際に作成していきましょう。

よくモジュールテンプレートにされるパーツは、あらかじめ用意された名前があります。

  • header.php – ヘッダー
  • footer.php – フッター
  • sidebar.php – サイドバー
  • searchform.php – 検索フォーム
  • comments.php – コメント

上記の中で今回はヘッダーのファイルheader.phpとフッターのファイルfooter.phpを作成します。

header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<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 <?php body_class('body'); ?>>
  <header class="header" id="header">
    ロゴ
    ナビゲーション
  </header>
footer.php
  <footer　class="footer" id="footer">
    ロゴ
    アドレス
    メニュー
    コピーライト
  </footer>

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

</html>

トップページと固定ページで共通していたヘッダー・フッター部分をモジュールテンプレートにすることができました。

次は、front-page.phpとpage.phpに作成したモジュールテンプレートを読み込みさせていきます。

あらかじめモジュールテンプレートが用意されているファイルは読み込む関数も用意されています。

  • get_header() – header.php
  • get_footer() – footer.php
  • get_sidebar() – sidebar.php
  • get_search_form() – searchform.php
  • comments_template() – comments.php

今回はheader.phpとfooter.phpを作成したので、get_header()とget_footer()を使用して読み込ませていきます。

front-page.php
<?php get_header(); ?>

  <div class="contents">
    <div class="contents__inner">
      <p>トップページです</p>
    </div>
  </div>

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

  <div class="contents">
    <div class="contents__inner">
      <p>固定ページです</p>
    </div>
  </div>

<?php get_footer(); ?>

すっきりとしたコードになりました。

ブラウザに表示する際にはheader.phpとfooter.phpが読み込まれて、最初のコードを出力してくれます。

以上でモジュールテンプレートの作成と読み込みができました。

自作のモジュールテンプレートの場合

モジュールテンプレートは自分で作成することもできます。

例えば、投稿の一覧ページの内容をパーツ化するとしましょう。

パーツ化したファイルの名前はentry.phpにしたいと思います。

下記のコードをご覧ください（一部省略しています）。

archive.php
<?php get_header(); ?>

  <div class="contents">
    <div class="contents__inner">

      <!-- 共通部分　ここから -->
      <div class="contents__body">
        <div class="contents__body-inner">
          <?php if (have_posts()) : ?>
            <ul class="news-post">
              <?php while (have_posts()) : the_post(); ?>
                <li class="news-post__item">
                  <div class="news-post__inner">
                    日時・カテゴリー
                    リンク・タイトル
                    抜粋
                  </div>
                </li>
              <?php endwhile; ?>
            </ul>
            ページネーション
          <?php else : ?>
            <p class="news-post__none">まだ投稿はありません。</p>
          <?php endif; ?>
        </div>
      </div>
      <!-- 共通部分　ここまで -->

    </div>
  </div>

<?php get_footer(); ?>
entry.php
        <div class="contents__body">
          <div class="contents__body-inner">
            <?php if (have_posts()) : ?>
              <ul class="news-post">
                <?php while (have_posts()) : the_post(); ?>
                  <li class="news-post__item">
                    <div class="news-post__inner">
                      日時・カテゴリー
                      リンク・タイトル
                      抜粋
                    </div>
                  </li>
                <?php endwhile; ?>
              </ul>
              ページネーション
            <?php else : ?>
              <p class="news-post__none">まだ投稿はありません。</p>
            <?php endif; ?>
          </div>
        </div>

アーカイブページから共通部分を作成しました。

自作のモジュールテンプレートを読み込ませるにはget_template_part()を使用して、引数にファイル名を記述します。

アーカイブページに読み込ませてみましょう。

archive.php
<?php get_header(); ?>

  <div class="contents">
    <div class="contents__inner">

      <?php get_template_part('entry'); ?>

    </div>
  </div>

<?php get_footer(); ?>

entry.phpを読み込むことができました。

以上で自作のモジュールテンプレートを作成して読み込むことができました。

引数を使って読み込む

ヘッダーとフッターはサイト内で同じデザインであることが多いですが、異なるデザインの場合もあります。

その際、モジュールテンプレートを読み込む関数の引数をうまく利用することで読み込むファイルを指定することができます。

例としてget_header()を公式サイトで見てみましょう。

現在のテーマディレクトリの header.php テンプレートファイルを読み込みます。名前（name）を指定すると、指定したヘッダー header-{name}.php を読み込みます。

関数リファレンス/get header – WordPress Codex 日本語版

上記の「名前（name）」は引数です。

トップページと下層ページでファイルを分けるとき、header.phpとheader-subpage.phpを作成したとします。

front-page.php
<?php get_header(); ?>
page.php
<?php get_header('subpage'); ?>

テンプレートファイルを使用して呼び出すファイルを条件分岐することができました。

また、固定ページの中でも出し分けする場合もあります。

page.php
<?php
　　if(is_404()) {
　　　　get_header('404');
 　} else {
　　　　get_header('subpage'); 
 　}
?>

上記は404.phpの場合にheader-404.php、その他の固定ページはheader-subpage.phpを読み込むような条件分岐の記述です。

get_header()以外ではget_footer()、get_sidebar()が同様に引数で出しわけができます。

詳しくは公式サイトで見てみてください。

まとめ

今回はWordPressでサイト制作をする際の共通パーツの分け方・読み込み方を解説しました。

初めのうちはファイルを分けることに勇気がいるかもしれませんが、慣れてくると記述量が少なくなることで可読性が上がるため、とても便利に感じると思います。

他の方がコードを見た時にも読みやすく、修正もしやすくなりますよ。

ぜひモジュールテンプレートを有効活用してみてください。

その他の記事

WordPressでナビゲーションメニューを作る方法

WordPressでナビゲーションメニューを作る方法

今回は WordPress でナビゲーションを作成する際に使用する関数 register_nav_m…
【WordPress】テーマディレクトリのURLを取得する方法

【WordPress】テーマディレクトリのURLを取得する方法

今回はWordPressでテーマディレクトリのURLを取得する方法を紹介します。結論を言うと、get…
【WordPress】タクソノミー、ターム、カテゴリー、タグの違い...

【WordPress】タクソノミー、ターム、カテゴリー、タグの違い…

今回はWordPressでWeb制作をする際に出てくる「タクソノミー」「ターム」「カテゴリー」「タグ…
ASAI

ASAI

WEBコーダー

株式会社RETVALでHTML/CSS、WordPressのコーディングを担当。

  • HTML
  • CSS
  • WordPress

関連記事

SEOに強いWordPressテーマは存在する？SEOにおすすめのテーマ

【2024年版】ブログにおすすめのWordPressテーマ（有料＆無料）

【WordPress】ページネーションを自作しよう！カスタマイズ方法も紹介

企業サイトにおすすめのWordPressテーマ（有料＆無料）