get_template_part()でテンプレートを分割管理する方法【WordPress】

WordPress

こんにちは!コーダーのゆうしです。

WordPressのテーマ制作をしていると「ヘッダーやフッター以外にも共通パーツをファイルで分けたい」という場面がよくあります。そんなときに便利なのが get_template_part() です。カードのHTMLやCTAバナーなど、複数のテンプレートファイルで使い回すパーツをひとつのファイルにまとめられるので、コードの管理がグッと楽になります。

get_template_part()とは?

get_template_part() はWordPressが用意している関数で、テーマ内の別PHPファイルを読み込むことができます。header.phpfooter.php を読み込む get_header() get_footer() と同じ仕組みですが、任意のファイル名で自由に使えるのが特徴です。

基本的な使い方

ファイル構成の例

your-theme/
├── parts/
│ └── card.php ← 共通パーツ
├── archive.php
└── single.php

呼び出し方

get_template_part('parts/card');

parts/card と書くと、テーマフォルダ内の parts/card.php を読み込みます。拡張子の .php は不要です。

実際のコード例

parts/card.php(共通パーツ側)

<div class="card">
  <a href="<?php the_permalink(); ?>">
    <?php if ( has_post_thumbnail() ) : ?>
      <div class="card__img">
        <?php the_post_thumbnail(); ?>
      </div>
    <?php endif; ?>
    <div class="card__body">
      <p class="card__title"><?php the_title(); ?></p>
      <p class="card__date"><?php the_date(); ?></p>
    </div>
  </a>
</div>

archive.php(呼び出し側)

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>
    <?php get_template_part('parts/card'); ?>
  <?php endwhile; ?>
<?php endif; ?>

これで archive.phpsingle.php の両方から同じ parts/card.php を呼び出せるようになります。カードのデザインを変えたいときは parts/card.php を1箇所修正するだけでOKです。

第二引数でファイルを切り替える

get_template_part() は第二引数を使うことでファイルを切り替えられます。

get_template_part('parts/card', 'news');
// → parts/card-news.php を読み込む

get_template_part('parts/card', 'works');
// → parts/card-works.php を読み込む

投稿タイプごとにカードのデザインが違う場合などに活用できます。parts/card-news.php が存在しない場合は自動的に parts/card.php にフォールバックするので安心です。

第三引数でデータを渡す(WordPress 5.5以降)

WordPress 5.5から第三引数に配列を渡すことで、パーツ側でデータを受け取れるようになりました。

呼び出し側

get_template_part('parts/card', null, [
  'label' => '新着',
  'color' => 'red',
]);

パーツ側(parts/card.php)

<?php
$label = $args['label'] ?? '';
$color = $args['color'] ?? 'blue';
?>
<div class="card">
  <span class="label" style="color: <?php echo esc_attr($color); ?>">
    <?php echo esc_html($label); ?>
  </span>
  <!-- 以下略 -->
</div>

同じパーツでも呼び出し元によって表示内容を変えられるので、柔軟性がぐっと上がります。

躓きやすいポイント

ファイルが読み込まれない

パスの指定はテーマフォルダからの相対パスで書く必要があります。/parts/card のように先頭にスラッシュを入れると読み込まれないので注意してください。

// NG
get_template_part('/parts/card');

// OK
get_template_part('parts/card');

the_title()などが動かない

get_template_part() で読み込んだファイルはループの中で呼び出さないと the_title()the_permalink() などのループ関数が正しく動作しません。必ずWP_Queryや have_posts() のループ内で呼び出してください。

子テーマで上書きできる

get_template_part() は子テーマのファイルを優先して読み込む仕様になっています。親テーマの parts/card.php を子テーマ側の同じパスで上書きできるので、テーマのカスタマイズにも活用できます。

まとめ

get_template_part() を使うことでテンプレートファイルを整理してコードの重複をなくせます。カード・CTAバナー・モーダルなど、複数ページで使い回すパーツはどんどん分割していくと、修正が1箇所で済んで保守性が大幅に上がります。テーマ自作の際はぜひ積極的に活用してみてください。

ご不明な点やコーディングのご依頼はお問い合わせからお気軽にどうぞ。

タイトルとURLをコピーしました