WordPressでテンプレートパーツを作成して呼び出す方法

福岡のWEBフリーランスFUGAのブログ記事をご覧いただき、誠にありがとうございます。

この記事では、

自分でテンプレートパーツを作成して呼び出したいのだけど、どうやれば良いの？

という方に向けて、テンプレートパーツを作成して、呼び出す方法についてご紹介いたします。

自分でテンプレートパーツを作成する

WordPressでは、header.phpやfooter.phpなどの基本的なテンプレートパーツと同じように自身でテンプレートパーツを作成することができます。

作成の方法は基本のテンプレートパーツと同じです。

作成する階層は、header.phpやfooter.phpと同じ階層でも良いのですが、私はテンプレートパーツ専用のディレクトリを作成して、その中にテンプレートパーツを入れています。

下図はTwentytwentyテーマのテンプレート構成です。

Twentytwentyテーマには、初期の状態でtemplate-partsというディレクトリがすでに存在していますので、この中に自作のテンプレートパーツを作成します。

ここでは、例として投稿ページに「パンくずリスト」を設置するテンプレートパーツを作成してみます。

template-partsディレクトリの中に、breadcrumbs.phpというファイルを作成します。

breadcrumbs.phpに、下記のようにパンくずリスト用のHTMLを記述します。

<div class="breadcrumbs">
	<a href="/">HOME</a> > <?php echo get_the_title();?>
</div>

breadcrumbsというクラスを付与したdiv要素は、後ほどCSSを適用するために記述しております。

これで、テンプレートパーツの作成は終了です。

次に、作成したパンくずリストを表示するテンプレートパーツを、投稿ページ内で呼び出してみます。

作成したテンプレートパーツを呼び出す

作成したテンプレートパーツを投稿ページ内で呼び出すには、テンプレート内の呼び出したい箇所に次のコードを記述します。

<?php get_template_part( 'template-parts/breadcrumbs' ); ?>

Twentytwentyテーマでは、投稿ページのテンプレートにsingular.phpが適用されていますので、singular.phpのパンくずリストを表示したい場所に、上記のコードを記述します。

テンプレートパーツの呼び出しには、get_template_part()関数を使用します。

今回は、template-partsディレクトリの中にbreadcrumbs.phpというテンプレートパーツを作成しましたので、引数にtemplate-parts/breadcrumbsと記述しています。

テンプレートファイルの拡張子である.phpは記述する必要はありません。

もし、breadcrumbs.phpがtemplate-partsディレクトリ内ではなく、header.phpと同じ階層にあるような場合には、

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

と記述します。

get_template_part()関数の詳細については、Codexを参照してください。

投稿ページ（トップページではありません）を確認し、下図の赤い下線のようにパンくずリストが表示されていることを確認します。

最後に、管理画面の「外観」→「カスタマイズ」→「追加CSS」に以下のCSSを記述して、見た目を整えます。

.breadcrumbs{
	  margin-left:20px;
	  font-size:14px;
}

.breadcrumbs a{
	text-decoration:none;
}

テンプレートのパーツ作成から、呼び出しまでのイメージをつかんでいただけたでしょうか？

ご不明な点がありましたら、お気軽にFUGAまでお問い合わせくださいませ^^