p06-5：カスタム投稿詳細表示専用テンプレート「Custom Post Type UI」

公開日:2018年11月17日更新日:2018年11月21日

WordPress

WordPressプラグイン

「Custom Post Type UI」を使って作成したカスタム投稿詳細ページを表示します。

一覧表示を表示します。

http://WordPressフォルダへのパス/カスタム投稿の投稿タイプスラッグ/

今回は「http://localhost/lesson1/post_news/」でカスタム投稿一覧が表示されます。

表示された一覧からカスタム投稿をクリックしてカスタム投稿詳細ページを表示します。

表示に使われているテンプレートは「single.php」です。

カスタム投稿詳細表示専用テンプレート作成

一覧表示用テンプレートは以下のようになっています。

優先度（高い ←　→ 低い）
single-投稿タイプ.php	single.php	index.php

今回作成したカスタム投稿の投稿タイプスラッグが「post_news」なので「single-post_news.php」でカスタム投稿一覧表示用テンプレートを作成します。

single-post_news.php

<?php get_header(); ?>

  <div class="content">
    <div class="main">

      <div class="main-loop">
        <div class="inner">

          <h1>カスタム投稿詳細</h1>

<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>
<?php $id = get_the_ID(); ?>
<?php // テンプレートパーツ読み込み：一覧 ?>
<?php get_template_part('content','single'); ?>
<?php endwhile; ?>
<?php else: ?>
<?php // テンプレートパーツ読み込み：記事なし ?>
<?php get_template_part('content','none'); ?>
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>

<?php // コメント ?>
<?php comments_template(); ?>

<?php // 前後記事リンク ?>
          <div class="pagination-single">
            <p class="prev"><?php previous_post_link('%link'); ?></p>
            <p class="next"><?php next_post_link('%link'); ?></p>
          </div>

        </div><!-- /.inner -->
      </div><!-- /.main-loop -->

    </div><!-- /.main -->
    <?php get_sidebar(); ?>
  </div><!-- /.content -->

<?php
get_footer();

カスタム投稿詳細表示用テンプレート作成後に再度カスタム投稿詳細ページにアクセスすると「single-post_news.php」を使って表示していることを確認できます。