【WordPress】テンプレートパーツ化

WordPressのオリジナルテーマ作成時に使い回しの部分が出てくることがあると思います

それらの記述はコピペすれば良いのですが、変更などがあった場合はコピペした部分をすべて変えなくてはいけなくなり非効率。そこでheader.phpfooter.phpのように関数で呼び出せるパーツとして定義してあげると非常に便利です

この記事の目次

テンプレートパーツ化

関数get_template_partを使用します

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_template_part

新しいphpファイルを作成し、使い回ししたいもの(パーツ化したい部分)を記述します

<div>
  <p>hoge_template</p>
</div>

ファイル名はhoge_template.phpとし、templatesフォルダの中に作成しました

先ほどのテンプレートを呼び出したいファイルでは以下のように記述します
templatesフォルダに入っているので、呼び出したいファイルから見て階層を指定してあげます
.phpは省略してください

<?php get_template_part('templates/hoge_template'); ?>

パーツ毎に一部記述を変更したい場合(変数を使用)

パーツとして使い回しし、一部の記述のみそれぞれ変更したい場合は変数を使用します
※WordPress5.5以上から

WordPress Developer Resources
get_template_part() – Function | Developer.WordPress.org Loads a template part into a template.

例えば以下の部分をパーツ化したいとなった場合、templatesフォルダ内にplan-item.phpを作成し以下同様に記述します

<div class="plan-item">
  <p class="plan-item__text">【耐久年数】15年</p>
  <p class="plan-item__text">【保証期間】10年</p>
</div>

年数の部分のみそれぞれ変更したい場合を考えます

呼び出したいファイルでは以下のように変数を定義します

<?php
$plan = array(
  'endurance' => '15', //耐久年数
  'warranty' => '10', //保証期間
  );
  get_template_part('templates/plan-item', null, $plan);
?>

ここでは配列$planを定義しています

get_template_part関数の第一引数はテンプレート{$slug}-{$name}.phpの$slug名
第二引数は第一引数で{$slug}-{$name}をまとめて書いた場合nullを指定します
第三引数は定義した配列名、ここでは$planを指定します

年数の部分を先ほど配列で指定したキーに置き換えます

<div class="plan-item">
  <p class="plan-item__text">【耐久年数】<?php echo $args['endurance']; ?>年</p>
  <p class="plan-item__text">【保証期間】<?php echo $args['warranty']; ?>年</p>
</div>

この時、呼び出したいファイルで設定した変数(ここでは$plan)に関係なく
変数は$argsにしてください!

変数を変更した複数のテンプレートを呼び出す場合

以下のように記述すれば、それぞれ変数部分のみが異なるテンプレートを呼び出すことができます

<?php
$plan = array(
  'endurance' => '15', //耐久年数
  'warranty' => '10', //保証期間
  );
  get_template_part('templates/plan-item', null, $plan);
?>

<?php
$plan = array(
  'endurance' => '30', //耐久年数
  'warranty' => '20', //保証期間
  );
  get_template_part('templates/plan-item', null, $plan);
?>

この記事が気に入ったら
フォローしてね!

シェアしてね!!
  • URLをコピーしました!

著者

Webコーダー。
ドライブとコーヒーとガジェットが好き。
「Code Widgit」は「Code With it」と「gadget」を合わせた造語。

この記事の目次
閉じる