Springfalfal

【WordPress】テンプレートパーツを使いこなす

テンプレートパーツ（Template Parts）とは、WordPressのテーマ開発において、

「HTMLの特定の部品（コンポーネント）を別ファイルに細分化して、必要な場所で自由に使い回す（再利用する）仕組み」のことです。

ヘッダー（header.php）やフッター（footer.php）を分割するのと同様に、

記事カードやナビゲーション、SNSボタン

といった細かなコンポーネントをパーツ化して管理することができます。

1. テンプレートパーツを使う2つの基本関数

自作したパーツを他のテンプレート（front-page.php や single.php など）に読み込むには、

主に以下の2つの関数を使用します。

現在推奨されているのは、柔軟性の高い get_template_part() です。

① get_template_part() （推奨）

WordPressの標準的な読み込み関数です。

ファイルが存在しなくてもエラー（画面停止）にならず、システムが安全に処理を続行します。

  • 基本の書き方:PHP// parts/card.php というファイルを読み込む場合 get_template_part('parts/card');
  • 引数（パラメータ）を渡して読み込む書き方（重要）: WordPress 5.5以降、パーツ側にデータ（変数など）を引き渡せるようになり、コンポーネントとしての実用性が爆発的に向上しました。
  // 第3引数に連想配列でデータを渡す
  get_template_part('parts/card', null, array(
      'class' => 'c-card--featured',
      'title' => '注目記事'
  ));

② locate_template()

ファイルが確実に存在するかチェックしたい場合や、

PHPの include や require と同等の挙動をさせたい、

またはテーマのカスタマイズ（子テーマでの上書き制御）をより厳密に行いたい場合などの特殊なケースで使用します。

2. テンプレートパーツを導入する3つの絶大なメリット

Sass（SCSS）の設計思想であるBEMやコンポーネント指向を、

そのままHTML（PHP）側にも適用できるため、

モダンなWeb制作において必須のテクニックです。

① 修正が一箇所で済む

例えば、

「記事のカード（.c-card）」のデザインやHTML構造を変更したいとき、

トップページ、ブログ一覧、関連記事一覧の各ファイルに直書きしていると

、すべてのファイルを修正して回る必要があります。

パーツ化（parts/card.php）しておけば、そのファイルを1つ直すだけでサイト全体のカードが一斉に変更されます。

② 親ファイル（テンプレート）の見通しが良くなる

front-page.php などのメインファイルの中に何百行ものHTMLが詰まっていると、コードの全容を把握しづらくなります。

セクションやコンポーネント単位でパーツ化することで、

親ファイルは以下のように非常にスッキリとした構造になります。

<?php get_header(); ?>

<main class="l-main">
  <?php get_template_part('project/mv'); // メインビジュアル ?>
  <?php get_template_part('project/about'); // アバウトセクション ?>
  <?php get_template_part('project/news-list'); // お知らせ一覧 ?>
</main>

<?php get_footer(); ?>

③ 複数人での開発・Git管理がバッティングしにくくなる

大きな1枚のファイルを複数人で同時に編集すると、Gitでコンフリクト（衝突）が起きやすくなります。

機能やパーツごとにファイルが細分化されていれば、

各自が担当のコンポーネントファイル（例：_btn.php や _faq.php）だけを独立して触れるため、安全に開発が進められます。

3. ファイルの命名ルールと配置のベストプラクティス

テンプレートパーツのファイル名や置き場所に厳格な強制ルールはありませんが、

WordPress開発における「標準的なマナー」が決まっています。

配置場所

テーマのルートディレクトリ（直下）にそのまま置くことも可能ですが、

ファイル数が増えると乱雑になるため、

通常は parts/ や template-parts/ といった専用のフォルダを作って管理します。

命名規則

役割がひと目で分かるように名前をつけます。

  • 汎用パーツ: parts/card.php, parts/btn.php
  • ループ用（一覧の1要素など）: parts/loop-news.php, parts/content-archive.php

4. 具体的な実装コード例

【呼び出し元（例：archive.php などの一覧画面）】

メインループの中で、1記事分のカード型コンポーネントをパーツとして呼び出します。

<?php if (have_posts()) : ?>
  <div class="p-news-list">
    <?php while (have_posts()) : the_post(); ?>
      
      <?php 
      // parts/card.php を読み込む
      get_template_part('parts/card'); 
      ?>

    <?php endwhile; ?>
  </div>
<?php endif; ?>

【テンプレートパーツ（例：parts/card.php）】

呼び出される中身のファイルです。

独立した1つのコンポーネントとしてHTMLとWordPressの関数を完結させます。

<?php
/**
 * 記事カード用テンプレートパーツ
 * File: parts/card.php
 */
?>
<article class="c-card">
  <a href="<?php the_permalink(); ?>" class="c-card__link">
    <div class="c-card__img-wrap">
      <?php if (has_post_thumbnail()) : ?>
        <?php the_post_thumbnail('medium', array('class' => 'c-card__img')); ?>
      <?php else : ?>
        <img src="<?php echo esc_url(get_theme_file_uri('/assets/img/no-image.jpg')); ?>" alt="" class="c-card__img">
      <?php endif; ?>
    </div>
    <div class="c-card__body">
      <time class="c-card__date" datetime="<?php echo get_the_date('Y-m-d'); ?>"><?php echo get_the_date(); ?></time>
      <h3 class="c-card__title"><?php the_title(); ?></h3>
    </div>
  </a>
</article>

Sass（SCSS）側で component/_card.scss を作ってスタイルを管理している場合、

この parts/card.php と1対1のペアになるため、

「見た目も構造もコンポーネント単位でカプセル化された」非常に管理しやすい設計のテーマを作ることができます。

まとめ

以上、テンプレートパーツの基本マニュアルでした。

テンプレートパーツを使いこなせると、コーディングスピードも管理も爆速になるので、マスターしましょう。

HTMLサイトのWordPress化基本マニュアルも用意しているのでそちらもぜひチェックしてみてください。

学習記録一覧へ

Automation

関連記事