テンプレートパーツを読み込むメリット|WordPress制作でファイルを分ける理由

テンプレートパーツを読み込むメリット|WordPress制作でファイルを分ける理由

記事
IT・テクノロジー
WordPressでオリジナルテーマを作っていると、

「この部分、別ファイルに分ける必要ある?」

と思うことがあります。

たとえば、固定ページを作るときに、

page-about.php

の中へすべてのHTMLを書くこともできます。

それでもサイト自体は動きます。

ですが、実際のWordPress制作では、ページの一部分を別ファイルに分けて、テンプレートパーツとして読み込むことがあります。

今回は、テンプレートパーツを使うメリットについて紹介します。

テンプレートパーツとは?

テンプレートパーツとは、簡単に言うと、

ページの一部分を別ファイルとして管理する仕組み

です。

たとえば、会社紹介ページがあるとします。

page-about.php

の中にすべてを書くのではなく、

<?php get_template_part('template-parts/about'); ?>

のように書いて、

template-parts/
└── about.php

を読み込むことができます。

つまり、

page-about.php
about.phpを読み込む

という構成です。

メリット① ファイルが見やすくなる

一番分かりやすいメリットは、コードが見やすくなることです。

ページの内容を全部1つのPHPファイルに書いていくと、ページによっては数百行、数千行になることがあります。

たとえば、

<section class="p-about">
  ...
</section>

<section class="p-feature">
  ...
</section>

<section class="p-company">
  ...
</section>

<section class="p-contact">
  ...
</section>

と、すべてを1ファイルに書いていると、目的の場所を探すだけでも大変です。

そこで、

template-parts/
├── about.php
├── feature.php
├── company.php
└── contact.php

のように分けておけば、

「会社概要を修正したい」

と思ったときに、

company.php

を開けばよくなります。

コード量が増えてきたときほど、この差は大きくなります。

メリット② 同じパーツを使い回せる

テンプレートパーツの大きなメリットが、

再利用できること

です。

たとえば、サイト内の複数ページに同じお問い合わせセクションがあるとします。

それぞれのページに同じHTMLを書くこともできます。

ですが、

contact.php

というテンプレートパーツを1つ作っておけば、

<?php get_template_part('template-parts/contact'); ?>

と書くだけで、いろいろなページから同じパーツを読み込めます。

トップページでも、

<?php get_template_part('template-parts/contact'); ?>

会社概要ページでも、

<?php get_template_part('template-parts/contact'); ?>

サービスページでも、

<?php get_template_part('template-parts/contact'); ?>

と使えます。

同じコードを何回も書かなくてよくなります。

メリット③ 修正が1ヶ所で済む

再利用できることは、修正するときにも大きなメリットになります。

たとえば、お問い合わせセクションを5ページで使用しているとします。

各ページに直接HTMLを書いていた場合、

お問い合わせ部分を変更すると、

5ページすべて修正する必要があります。

しかし、テンプレートパーツとして、

template-parts/contact.php

にまとめていれば、

この1ファイルを修正するだけです。

読み込んでいるすべてのページに変更が反映されます。

これは実務ではかなり重要です。

ページ数が増えるほど、

「同じコードが何ヶ所にも存在する」

という状態は管理が大変になります。

メリット④ 修正漏れを防げる

同じパーツを複数ページに直接書いていると、

「こっちは修正したけど、別ページを修正するのを忘れていた」

ということが起こります。

たとえば、

トップページ
会社概要
サービス
採用ページ

の4ページに同じCTAがある場合。

CTAの電話番号を変更するとします。

コードをそれぞれに書いている場合は、4ヶ所変更する必要があります。

当然、

1ヶ所だけ古い電話番号が残る

という可能性もあります。

テンプレートパーツなら、元ファイルを1ヶ所修正するだけなので、こうした修正漏れを減らせます。

メリット⑤ ページ構成が分かりやすくなる

テンプレートパーツを使うと、親となるPHPファイルを見ただけで、ページ構成が分かりやすくなります。

たとえば、

<?php get_header(); ?>

<?php get_template_part('template-parts/about'); ?>

<?php get_template_part('template-parts/feature'); ?>

<?php get_template_part('template-parts/company'); ?>

<?php get_template_part('template-parts/contact'); ?>

<?php get_footer(); ?>

となっていれば、

このページには、

ABOUT
FEATURE
COMPANY
CONTACT

という順番でセクションがあることがすぐ分かります。

HTMLを全部書いている場合より、ページ全体の構造を把握しやすくなります。

メリット⑥ 複数人で作業しやすくなる

チームで制作するときにも、ファイルを分けておくメリットがあります。

たとえば、

Aさんが

about.php

Bさんが

company.php

Cさんが

contact.php

を担当することもできます。

1つの巨大なファイルを複数人で編集するより、作業範囲を分けやすくなります。

Gitを使って開発している場合も、同じファイルを同時に編集する可能性が減るので、コンフリクトを減らしやすくなります。

じゃあ全部テンプレートパーツにすればいい?

ここは少し注意が必要です。

テンプレートパーツは便利ですが、

何でもかんでも分ければいいわけではありません。

たとえば、

title.php
text.php
button.php
image.php

のように細かく分けすぎると、逆にコードを追いにくくなります。

「この文章はどこのファイル?」

「このボタンはどこから読み込んでいる?」

となってしまいます。

大切なのは、

意味のある単位で分けること

です。

たとえば、

hero.php
service.php
works.php
faq.php
contact.php

のように、セクション単位で分けると管理しやすいです。

共通パーツは特に分ける価値が高い

特にテンプレートパーツ化した方がいいのは、

複数ページで使う可能性があるもの

です。

たとえば、

CTA
お問い合わせ
料金表
FAQ
パンくず
関連記事
バナー

などです。

こうしたパーツは後から修正される可能性も高いため、1ヶ所で管理できるようにしておくと非常に楽になります。

ファイルを分ける目的は「きれいに見せるため」ではない

テンプレートパーツを使う理由を、

「コードをきれいにするため」

だけだと考えてしまうことがあります。

もちろん可読性もメリットです。

ただ、本当の目的は、

変更しやすいコードにすること

です。

Webサイトは作って終わりではありません。

公開後に、

テキストを変更する
セクションを追加する
CTAを変更する
デザインを修正する
ページを追加する

といった作業が発生します。

そのときに、

「どこを変更すればいいか分からない」

「同じコードを5ヶ所直さないといけない」

という構造になっていると、保守が大変になります。

だからこそ、最初からある程度ファイルを整理しておくことが重要です。

まとめ

WordPressでテンプレートパーツを使うメリットは、

ファイルが見やすくなる
同じパーツを再利用できる
修正を1ヶ所にまとめられる
修正漏れを防げる
ページ構成を把握しやすくなる
複数人で作業しやすくなる

といった点です。

最初のうちは、

「別ファイルにする方が面倒じゃない?」

と感じるかもしれません。

実際、小さなページであれば1ファイルにすべて書いても問題ありません。

ただ、サイトの規模が大きくなるほど、テンプレートパーツのメリットは大きくなります。

重要なのは、

コードを書くときだけではなく、後から修正するときのことまで考えて設計すること。

テンプレートパーツは、そのためのシンプルで便利な仕組みです。

WordPressテーマ制作に慣れてきたら、

「これは別ファイルにした方が管理しやすいか?」

という視点を持ちながらコードを書いてみると、少しずつ保守しやすいテーマを作れるようになります。
サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す