テンプレートの一部を分割してget_template_part()で呼び出す【WordPress】

複数のテンプレートで共通する要素はテンプレートパーツとして別ファイルで管理するのが便利です。バージョン5.5.0以降のWordpressでは呼び出し時に渡せるパラメータが追加され、同一のテンプレートパーツを呼び出しつつ内容を変更したりすることが可能になりました。

get_template_part()による基本的なインクルード

呼び出したい内容を書いたphpファイルを作ります。ファイル名は{slug}-{name}.phpの形式となり、{name}の部分は省略できます。

作成したphpファイルは呼び出し元のテンプレートからget_template_part( 'slug', 'name' )の形でインクルードすることができます。

テンプレートパーツの作成

一例としてテンプレートパーツ apparel-bloc.php を下記のように作ってみました。

apparel-bloc.php
<div>
  <h1>アパレル</h1>
  <ul>
    <li>Tシャツ</li>
    <li>パンツ</li>
    <li>インナー</li>
  </ul>
</div>

get_template_part()でテンプレートパーツを呼び出し

呼び出し側のテンプレートファイルではget_template_part()を使って呼び出します。パラメータにテンプレートパーツのスラッグと名前を指定します。この場合はget_template_part('apparel', 'bloc')でapparel-bloc.phpを呼び出すことができます。

<?php get_template_part( 'apparel', 'bloc' ); ?>

結果はapparel-bloc.phpの内容がそのまま出力されます。

複数ファイルで構成するテンプレートパーツ

テンプレートパーツからさらにパーツを呼び出すこともできます。今回の例では特に必要性はありませんが、規模が大きくなるに従って必要性が増してきます。

apparel-title.php
  <h1>アパレル</h1>
apparel-item.php
  <ul>
    <li>Tシャツ</li>
    <li>パンツ</li>
    <li>インナー</li>
  </ul>
apparel-bloc2.php
<div>
<?php get_template_part( 'apparel', 'title' ); ?>
<?php get_template_part( 'apparel', 'item' ); ?>
</div>

div内の要素を2つのファイルに分割し、それぞれget_template_part()で呼び出しています。
今回は分割しただけですので出力結果は前述のapparel-bloc.phpと同じになります。

get_template_part()にデータを渡す

WordPressの5.5.0以降ではget_template_part()で変数を渡すことができるようになっています。

渡すデータをget_template_part()の3番目の引数に指定

foods-bloc.php
<div>
<?php get_template_part( 'foods', 'title', '食品分類です。' ); ?>
  <ul>
<?php get_template_part( 'foods', 'item', array( '肉', '野菜', '果物' ) ); ?>
  </ul>
</div>

get_template_part()でパーツをインクルードする際の3番目の引数に受け渡すデータを指定します。
この例では次のようにデータを渡しています。

  • foods-title.phpに “食品分類です。” という文字列を
  • foods-item.phpに “肉, 野菜, 果物” という配列を

受け取ったデータを扱う

foods-title.php

このファイルは呼び出された際に「食品分類です。」という文字列を受け取っています。受け取ったものは$argsという変数に格納されており、このファイル内での処理が可能になります。

  <h1><?php echo $args; ?></h1>
foods-item.php

受け取ったデータが配列の場合はインデックスを指定して取り出すことができます。

    <li><?php echo $args[0]; ?></li>
    <li><?php echo $args[1]; ?></li>
    <li><?php echo $args[2]; ?></li>

渡されたデータが処理され、次のように出力されます。

<div>
  <h1>食品分類です。</h1>
  <ul>
    <li>肉</li>
    <li>野菜</li>
    <li>果物</li>
  </ul>
</div>

get_template_part()で渡したデータをループで表示する

次は配列を渡してループで自動的に処理してみたいと思います。このあたりからようやく実用的なイメージが沸くかと思います。

配列を用意してループ処理

snkr-bloc.php

4行目:配列$itemsを用意します。中身は品物情報を連想配列にしたものが入っています。
9行目:変数が空でなければ処理に進みます。
11行目:$itemsの数ほどループします。ここでは3回になりますね。
12行目:get_template_part()でsnkr-item.phpの呼び出しとデータの受け渡しを繰り返しています。

<div>
  <h1>スニーカー</h1> 
<?php
$items = array(
  array('name' => 'AJ1 LOW', 'size' => '27', 'color' => 'RED'),
  array('name' => 'DUNK LOW', 'size' => '26', 'color' => 'Michigan'),
  array('name' => 'FORCE1 HI', 'size' => '26.5', 'color' => 'WH'),
);
if ( ! empty( $items ) ) {
  echo "  <ul>\n";
  foreach ( $items as $value ) {
    get_template_part( 'snkr', 'item', $value );
  }
  echo "  </ul>\n";
}
?>
</div>

繰り返し書き出す要素をテンプレートパーツに

snkr-item.php

このテンプレートパーツでは繰り返し書き出す<li>の部分のみ扱います。
受け取った情報は連想配列なのでkeyを指定して取り出します。

<?php echo '    <li>' . esc_html( $args['name'] ) . ' / ' . esc_html( $args['size'] ) . ' / ' . esc_html( $args['color'] ) . "</li>\n";

<li>がループで自動的に書き出され次のような結果になります。

<div>
  <h1>スニーカー</h1> 
  <ul>
    <li>AJ1 LOW / 27 / RED</li>
    <li>DUNK LOW / 26 / Michigan</li>
    <li>FORCE1 HI / 26.5 / WH</li>
  </ul>
</div>

get_template_part()について、変数を渡せるようになってから様々な応用ができるようになりました。今回はちょっとした処理を例に解説してみましたが、この他の機能も組み合わせるとまだまだ活用法があるかと思います。

同じような処理のパターンをいくつか作っておいて管理画面から好みのものを選んで使う、的なことをいずれ紹介してみたいと思います。

参考リンク

WordPress Codex
get_template_part()

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