【WordPress】get_template_partの使い方

WordPress
記事内に商品プロモーションを含む場合があります。

get_template_partの使い方が知りたいな。

WordPressのget_template_partは、作成したパーツを好きな場所で使用できる、とても便利な関数です。

さらに、バージョン5.5.0から引数に「$args」が加わり、同じパーツでも色やテキストなどを変えることができるようになりました

そこで今回は、get_template_partの使い方を「基本編」と「応用編」の2つに分け、前半の「基本編」では作成したパーツを呼び出す方法を、「応用編」では新たに加わった引数「$args」の使い方を解説します。

スポンサーリンク

get_template_partの使い方【基本編】

get_template_partを使えば、あるファイルで作ったパーツを、別のphpファイルで読み込むことができます。

基本的な使い方はこちらです。

<?php get_template_part($slug, $name) ;?>

それぞれの引数の意味は、次の通りです。

  • $slug:テンプレートファイル名
  • $name:テンプレートファイル名の「-」に続く名前

例えば「card.php」という名前のファイルを呼び出したい場合は、次のように記述します。

※ファイルの拡張子(.php)は不要です。

<?php get_template_part('card') ; ?>

「page-card.php」のように、ファイル名がハイフンで区切られている場合は、第二引数「$name」を使用します。

<?php get_template_part('page', 'card') ; ?>

第二引数を省略して、次のように書いてもOKです。

<?php get_template_part('page-card') ; ?>

実際の使い方を、具体例で紹介します。

具体例

例えば、「card.php」というファイルに、下記のようなカード・コンポーネント(部品)を作成したとします。

card.php

<a href="<?php echo the_permalink(); ?>" class="c-card">
  <figure class="c-card__image">
    <img src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/img/image.jpg" alt="">
  </figure>
  <div class="c-card__body">
    <time class="c-card__date" datetime="<?php the_time('c');?>"><?php the_time('Y.m.d');?></time>
    <p class="c-card__title"><?php the_title() ;?></p>
  </div>
</a>

あとは、カードを読み込みたい場所で、get_template_partを使って呼び出せばOKです。

例えば、トップページ(front-page.php)で使いたければ、front-page.phpに次のように記述します。

front-page.php

<?php get_template_part('card'); ?>

もちろん、ループの中でも使えますよ。

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

このように、テンプレートパーツ化して読み込むことには、次のメリットがあります。

  • 何度も同じコードを書かなくて済む
  • コード量が減って読みやすくなる
  • 修正があっても1ファイルだけ直せばOK

例えば、デザインを見て「このパーツは何度も使いまわしそうだな」と思ったら、テンプレート化すると手間が減るだけでなくメンテナンス性も向上するのでおすすめです。

コードをリファクタリングする際も、繰り返し同じ記述のある箇所をテンプレート化すると、全体がかなりスッキリすると思います。

必須ではありませんが、コードの質が良くなるので、どんどん使っていきましょう。

スポンサーリンク

get_template_partの使い方【応用編】

冒頭でご紹介したように、WordPressのバージョン5.5.0から、get_template_partに第三引数「$args」が追加可能になりました。

何が変わったかというと、同じパーツでも見た目や機能を変えることができるようになった、という点です。

使い方は次の通りです。

get_template_part($slug, $name, $args)

$slugと$nameの部分は、先述した通りです。

ただし、第三引数を渡す場合、第二引数は省略できません。ですので、第二引数がなければ「null」を忘れず渡しましょう。

そして、第三引数の$argsは配列(array)で渡します。

具体例で解説しますね。

具体例

コーディングをしていると、下のような「見た目は同じだけどテキストが違うボタン」によく遭遇すると思います。

この場合、$argsを用いてテンプレートパーツを作成しておくと、使い回しが楽になります。

ボタンのテキスト部分を<?php echo $args[ 'text' ]; ?>としておきます。

button.php

<a class="c-btn" href="#">
  <?php echo $args['text']; ?>
</a>

次に、ボタンを読み込みたいファイルで、get_template_partを記述します。

このとき、第三引数をarray( 'text' => '採用情報')とすると、ボタンのテキストを「採用情報」とすることができます。

<?php
get_template_part(
  'button',
  null,
  array(
    'title' => '採用情報'
  ));
?>

「お問い合わせはこちら」にしたい場合は、こうですね。

<?php
get_template_part(
  'button',
  null,
  array(
    'title' => 'お問い合わせはこちら'
  ));
?>

色など見た目を変えたい場合は、$argsでクラス名を渡しておくと便利です。

例えば、クラスの中に<?php echo $args[ 'btn-color' ]; ?>と書いておきます。

button.php

<a class="c-btn <?php echo $args['btn-color']; ?>" href="#">
  <?php echo $args['text']; ?>
</a>

読み込み先で、btn-colorにあらかじめCSSを設定したクラスを渡せば、そのスタイルが適用されます。

<?php
get_template_part(
  'button',
  null,
  array(
    'title' => 'お問い合わせはこちら',
    'btn-color' => 'orange',
  ));
?>
.orange {
  background-color: orange;
  color: white;
}

今回のボタンはコード数が少ないのでテンプレートパーツ化のメリットは微妙ですが、パーツのコード量が多くなるほど恩恵は大きくなるので便利かと思います。

スポンサーリンク

まとめ

今回は、get_template_partの使い方を解説しました。

繰り返し使うパーツはテンプレート化しておくと、コードの可読性やメンテナンス性が向上するので、ぜひ採用してみてください。