Zenn
💡

【WordPress】カスタム投稿タイプのアーカイブページに指定した固定ページのコンテンツを表示する

2022/07/05に公開
PHP
WordPress
tech

実装内容

  • 事前にカスタム投稿タイプを3つ作成
  • 固定ページを各アーカイブページのコンテンツ表示用として3ページ用意
  • 各カスタム投稿タイプのアーカイブページの冒頭に上記の固定ページの内容を表示させる

こんな感じでカスタム投稿タイプ用に対応するケースを紹介致します。

事前準備

カスタム投稿タイプを以下のように3つ追加します。CPT UIなどのプラグインを使用しても良いですし、functions.phpで追加する方法でも大丈夫です。

  • hoge
  • huga
  • piyo

※アーカイブを有効（true）にしておきます

次に、固定ページに移動して各カスタム投稿タイプのアーカイブに表示させるコンテンツ用のページを作成します。
固定ページのスラッグとページのIDですが今回は

  • hog → ID:10
  • hug → ID:11
  • piyo → ID:12

として話を進めていきましょう。
※作成した固定ページのIDを控えておきます

今回はタイトルのほかにアイキャッチ画像・本文を表示するパターンで考えていきます。
公開設定は特にこの固定ページ自体を表示させる必要がない場合は非公開でOKです。

これで事前準備は完了です。

コード紹介

アーカイブページのテンプレートファイルに以下のようなコードを書きます。

<?php
$args = [
	'public' => true,
	'_builtin' => false
];
$post_types = get_post_types($args);
if (is_post_type_archive($post_types)) {
	$post_type = get_query_var('post_type');
	$post_type_page = [
		'hoge' => 10,
		'huga' => 11,
		'piyo' => 12,
	];
	$page_id = $post_type_page[$post_type];
	$page = get_post($page_id);

	$thumb_id = get_post_thumbnail_id();
	$thumb_url = wp_get_attachment_image_src($thumb_id, true); ?>
	<h2><?php echo esc_html($page->post_title); ?></h2>
	<?php if ($thumb_id) { ?>
		<?php echo get_the_post_thumbnail($page->ID); ?>
	<?php } ?>
	<?php echo $page->post_content; ?>
	// 以降はアーカイブページの表示処理などが続く

簡単な説明

6行目
カスタム投稿タイプのみを全て取得しています。
条件の$argsに'_builtin' => falseを加えて、postやpageなどのデフォルトで作成されている投稿タイプを除外しています。

7行目
カスタム投稿タイプのアーカイブページかの条件分岐をしています

8-15行目
表示されている投稿タイプを取得し、ページ番号を格納した配列を照合して対応する固定ページの情報を取得しています。
15行目でget_post()を使用していますが、これは固定ページにも使えます。
※get_page()は非推奨のため

あとはサムネイル取得のための記述が2行文続き、表示用のコードを書いていく…という流れです。

メリット

  • アーカイブページのコンテンツを簡単に充実させることが可能になる
  • 固定ページで運用できるのでコード編集せずにコンテンツが追加可能
  • 固定ページの方は公開せずに非表示にして運用可能なので、スマート

おまけ

別途、Yoast SEOなどのプラグインを導入してアーカイブページのSEO用タイトルやディスクリプションの設定なども行っておくと良いかもしれません。

以上が今回の内容でした。
アーカイブページも固定ページと連携させて充実化を図れるのが分かって、良い発見でした。

Discussion