カスタム投稿タイプの記事をページに表示する【WordPress】

カスタム投稿タイプを設定して投稿できるようになったものの、表示する方法が分からない場合もあると思います。

今回はカスタム投稿タイプに投稿した記事を実際に利用する(ウェブサイトに表示)ためのテンプレートファイルやリンク方法について解説しています。
カスタム投稿タイプが使える状態でない場合は下記の記事を参考にしてみてください。

アーカイブページ(カスタム投稿の記事一覧)のURLを取得してリンクする

投稿した記事が一覧で表示されるページを「アーカイブページ」と言います。
私は以前カスタム投稿タイプを作成したものの、アーカイブページへのリンクの貼り方が分からず困っていました。
しかもURLはパーマリンク設定により異なるため、リンク先URLをテンプレートファイルに直接書いたのではパーマリンク設定を変更した際にURLも変更されてしまいリンク切れとなってしまいます。
WordPressのパーマリンク設定に左右されずアーカイブページのURLを取得するには下記のようにします。

パーマリンク設定に左右されないリンク指定方法

<a href="<?php echo esc_url( get_post_type_archive_link( '投稿タイプスラッグ' ) ); ?>">
  <?php echo esc_html( get_post_type_object( '投稿タイプスラッグ' )->label ); ?> 
</a>

1行目:get_post_type_archive_link()でアーカイブページのURLを取得。
2行目:get_post_type_object()で投稿タイプの情報を取得し、その中からラベルを指定して表示します。

倉庫番
倉庫番

実際のアーカイブページのURLは「ドメイン名/?cat=1」「ドメイン名/category/cat01」「ドメイン名/archives/category/cat01」のようにパーマリンク設定によって異なります。これらのURLをテンプレートファイルに直接書いてしまうとパーマリンク設定の変更でリンク切れになってしまうため、上記のような方法でリンクする必要があります。

参考リンク
WordPress Codex – get_post_type_archive_link()
WordPress Code – get_post_type_object()

カスタム投稿タイプの表示に使われるテンプレートファイル

アーカイブページで使用されるテンプレートファイル

前述の手順で制作したリンク先がカスタム投稿タイプのアーカイブページ(記事一覧ページ)となります。ページの表示に使われるテンプレートファイルは下記の優先順位で参照されます。archive-{post_type}.php が無ければ archive.php、それも無ければ index.php といった具合です。
一覧表示をカスタマイズする際はこれらのテンプレートファイルを編集します。

  1. archive-{投稿タイプ名}.php
  2. archive.php
  3. index.php

archive-{post_type}.phpは指定したカスタム投稿タイプのみに適用され、archive.phpはそれ以外の一覧表示の際にも汎用的に使用されます。他のアーカイブページと共通でよい場合はarchive-{post_type}.phpは無くても構いません。任意のカスタム投稿タイプアーカイブのみレイアウトを変えたいとき等にarchive-{post_type}.phpを利用すると便利です。

投稿の単独ページで使用されるテンプレートファイル

投稿単独ページのテンプレートは下記の優先順位で使用されます。
任意のカスタム投稿タイプ専用のテンプレートが必要な場合はsingle-{投稿タイプ名}.phpを用意してください。single-{投稿タイプ名}.phpを用意しない場合は他の汎用テンプレートで表示されます。

  1. single-{投稿タイプ名}.php
  2. single.php
  3. singular.php
  4. index.php

ページの一部としてカスタム投稿タイプを一覧表示する

固定ページの一部やサイドバーの一部等、独立したブロックとして表示する方法です。
いくつか手段がありますが、今回はWP_Query()で条件を指定して該当する投稿を抽出します。応用しやすいので私もよく使っている方法になります。

<?php
$q = new WP_Query(
	array(
		'post_type'      => '投稿タイプスラッグ',
		'posts_per_page' => -1,
	)
);
if ( $q->have_posts() ) :
	echo '<ul>';
	while ( $q->have_posts() ) :
		$q->the_post();
		?>
	<li><a href="<?php the_permalink(); ?>"><?php the_title_attribute(); ?></a></li>
		<?php
	endwhile;
	echo '</ul>';
	wp_reset_postdata();
endif;
?>

4行目:表示したいカスタム投稿タイプスラッグを指定します。
5行目:posts_per_pageは表示数を指定します。-1は全て表示となります。

参考リンク
WordPress Codex – WP_Query()


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