カスタム投稿の内容をページとして表示させたい

Question

前提

functions.phpに『よくある質問(FAQ)』というカスタム投稿を追加し、Custom Field Templateで『質問』と『回答』を入力するカスタムフィールドを作成しました。

カスタム投稿の各タイトル(計３つ)ごとに『よくある質問(FAQ)』を表示させたく、
カスタム投稿をコンテンツとしてページに表示するやり方が分からず、苦戦しています。

記事を調べたところ、以下の記事を参考に『single-{スラッグ名}.php』で値を表示させるところまではできました。

↓『質問』と『回答』をグループ化し、自由に追加・削除するやり方
https://kacco-e.com/blog/406

↓同一の項目に配列で入った値を出力させるやり方
http://doshiroutonike.com/web/wordpress/wp-plugin/1666

WordPress管理画面(カスタムフィールドテンプレート)

WordPress管理画面(カスタム投稿-タイトル３つ分)

WordPress管理画面(カスタム投稿-『よくある質問』)

実現したいこと

カスタム投稿の各タイトル(計３つ)ごとに『よくある質問(FAQ)』をページへ表示させたいです。
お力添えいただければ幸いです。

該当のソースコード

// 2022/07/11 カスタム投稿「よくある質問」の追加
function custom_post_type_FAQ(){
	$labels = array(
	  'name' => _x('よくある質問', 'post type general name'),
	  'singular_name' => _x('よくある質問', 'post type singular name'),
	  'add_new' => _x('よくある質問を追加', 'book'),
	  'add_new_item' => __('新しいよくある質問を追加'),
	  'edit_item' => __('よくある質問を編集'),
	  'new_item' => __('新しいよくある質問'),
	  'view_item' => __('よくある質問を編集'),
	  'search_items' => __('よくある質問を探す'),
	  'not_found' =>  __('現在、よくある質問はありません'),
	  'not_found_in_trash' => __('ゴミ箱によくある質問はありません'),
	  'parent_item_colon' => ''
	);
	$args = array(
	  'labels' => $labels,
	  'public' => true,
	  'publicly_queryable' => true,
	  'show_ui' => true,
	  'query_var' => true,
	  'rewrite' => true,
	  'capability_type' => 'post',
	  'has_archive' => true,
	  'hierarchical' => true,
	  'menu_position' => 4,
	  'supports' => array('title','excerpt','custom fields'),
	);
	register_post_type('faq',$args);
  }
  add_action('init', 'custom_post_type_FAQ');

// 2022/07/11 カスタム投稿「よくある質問」の追加end

<!-- FAQのカスタム投稿を表示するコード -->
<?php
// カスタムフィールドの値を取得
$FAQfield = post_custom('FAQfield');
$FAQQuestion = post_custom('FAQQuestion');
$FAQAnswer = post_custom('FAQAnswer');
?>

<?php if ( !empty( $FAQfield ) ): ?>
<div class="faq-box">
  <?php if( $FAQfield == 1 ){
      echo '<ul>';
      echo '<li>'.$FAQQuestion.'</li>';
      echo '<li>'.$FAQAnswer.'</li>';
      echo '</ul>';
    }else{
      for( $i = 0; $i < $FAQfield; $i++ ){
        echo '<ul>';
        echo '<li>'.$FAQQuestion[$i].'</li>';
        echo '<li>'.$FAQAnswer[$i].'</li>';
        if( $i < $FAQfield -1 ){ echo '</ul>'; }
      }
    } ?>
</div>
<?php endif; ?>
<!-- FAQのカスタム投稿を表示するコードend -->

試したこと

page.phpやsingle.phpのいずれかに以下のように記述しても表示されませんでした。

if( get_post_type() === 'faq' ){

		get_template_part( 'single', 'faq' );

	}

Answer 1

WordPressのテンプレート階層で混乱していたため、実現できていませんでした。
single-{スラッグ名}.phpをつくり、その中へ以下を記述まではOK。

<!-- FAQのカスタム投稿を表示するコード -->
<?php
// カスタムフィールドの値を取得
$FAQfield = post_custom('FAQfield');
$FAQQuestion = post_custom('FAQQuestion');
$FAQAnswer = post_custom('FAQAnswer');
?>
<?php if ( !empty( $FAQfield ) ): ?>
  <div class="faq-box">
    <?php if( $FAQfield == 1 ){
        echo '<ul>';
        echo '<li>'.$FAQQuestion.'</li>';
        echo '<li>'.$FAQAnswer.'</li>';
        echo '</ul>';
      }else{
        for( $i = 0; $i < $FAQfield; $i++ ){
          echo '<ul>';
          echo '<li>'.$FAQQuestion[$i].'</li>';
          echo '<li>'.$FAQAnswer[$i].'</li>';
          if( $i < $FAQfield -1 ){ echo '</ul>'; }
        }
      } ?>
  </div>
<?php endif; ?>
<!-- FAQのカスタム投稿を表示するコードend -->

カスタム投稿で投稿されたものを以下のように、archive-{スラッグ名}.phpで呼び出す

<?php
  $args = [
    'post_type' => 'faq', // カスタム投稿名が「faq」の場合
    'posts_per_page' => 100, // 表示する数
  ];
  $my_query = new WP_Query($args); ?>
 
<?php if ($my_query->have_posts()): // 投稿がある場合 ?>
 
  <div class="faq-box-content">
 
    <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
 
    <!-- ▽ ループ開始 ▽ -->

    <h3><?php the_title(); ?></h3>
    <!-- FAQのカスタム投稿を表示するコード -->
    <?php
    // カスタムフィールドの値を取得
    $FAQfield = post_custom('FAQfield');
    $FAQQuestion = post_custom('FAQQuestion');
    $FAQAnswer = post_custom('FAQAnswer');
    ?>
    <?php if ( !empty( $FAQfield ) ): ?>
      <div class="faq-box">
        <?php if( $FAQfield == 1 ){
            echo '<ul>';
            echo '<li>'.$FAQQuestion.'</li>';
            echo '<li>'.$FAQAnswer.'</li>';
            echo '</ul>';
          }else{
            for( $i = 0; $i < $FAQfield; $i++ ){
              echo '<ul>';
              echo '<li>'.$FAQQuestion[$i].'</li>';
              echo '<li>'.$FAQAnswer[$i].'</li>';
              if( $i < $FAQfield -1 ){ echo '</ul>'; }
            }
          } ?>
      </div>
    <?php endif; ?>
    <!-- FAQのカスタム投稿を表示するコードend -->
 
    <!-- △ ループ終了 △ -->
 
    <?php endwhile; ?>
 
  </div>
 
<?php else: // 投稿がない場合?>
 
  <p>まだ投稿がありません。</p>
 
<?php endif; wp_reset_postdata(); ?>

あとはページとして表示するために、get_header、get_footerなど呼び出したり、CSSで見た目調整したりします。