【解説】カスタム投稿タイプの詳細ページを表示【WordPress】

パソ君

・カスタム投稿タイプの詳細ページを表示するには？

こんな疑問にお答えします。

WordPressのテーマ作成時、実績やお知らせなどのカスタム投稿タイプを作成することありますよね。

その投稿で作る、詳細ページを出力したい場合ありますよね。

実はあるコードを使えば、簡単に表示可能です。

ジト

すぐにできるよ！

ということで、この記事では「カスタム投稿タイプの詳細ページを表示」について解説していきます！

【解説】カスタム投稿タイプの詳細ページを表示【WordPress】

カスタム投稿タイプの詳細ページを表示するために、下記を紹介しますね。

順に見ていきましょう！

➀：ファイル名

まずファイル名。

カスタム投稿タイプの詳細ページを表示するファイルとしては下記になります。

他にもありますが、特定の投稿タイプ詳細ページに対してファイルを分けたい場合は、スラッグを用いります。

複数カスタム投稿タイプがあるけど、それぞれの詳細ページのレイアウトが同じならsingle.phpでまとめるのもありかと。

➁：ループ処理をする

次にループ処理を使って、実際に記事を表示していきます。

今回は例として「work」というカスタム投稿タイプの詳細ページを出力するとしますね。

その場合「single-work.php」というファイルを作成。そこにループ処理を記述していきます。

コードの例がこちら↓

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <article class="article">
      <?php if ( has_post_thumbnail() ) : ?>
          <div class="article__thumbnail">
              <?php the_post_thumbnail(); ?>
          </div>
      <?php endif; ?>
      <div class="article__box">
          <h2 class="article__title"><?php the_title(); ?></h2>
          <div class="article__meta">
            <time class="article__time" datetime="<?php echo esc_attr( get_the_date( 'Y-m-d' ) ); ?>"><?php echo esc_html( get_the_time( 'Y-m-d' ) ); ?></time>
          </div>
          <div class="article__content">
            <?php the_content(); ?>
          </div>
      </div>
  </article>
<?php endwhile; endif; ?>

メインループを使って出力します。

2023年3月7日 【理解】WordPress｜single.phpにループ処理は必要？

その詳細ページのターム一覧を出力するには・・

詳細ページの部分に、その記事が持つタームを出力したい場合もありますよね。

そんな時は下記記事をどうぞ。

2023年3月17日 【WordPress】タームの名前・リンクを一覧表示する【カレントあり】

➂：アクセスするURL名

あとはカスタム投稿タイプの詳細ページにアクセスすればOK。

アクセスするURLはそのWordPressのURL構造にもよりますが、一般的には下記になります。

カスタム投稿タイプの一覧記事⇒詳細ページに飛ぶためのリンク出力としては、下記になります。

<a href="<?php the_permalink(); ?>"></a>

the_permalink() 関数を使用して各投稿の詳細ページへのリンクを取得。

あとは<a> タグで囲って、詳細ページへのリンクをクリックできるようにします。

WordPress はその投稿の詳細ページを表示するために、single-{post_type}.php テンプレートファイルを探します。テンプレートファイルが存在しない場合は、single.php を使用。

【解説】カスタム投稿タイプの詳細ページを表示【WordPress】：まとめ

ジト

詳細ページの表示方法を覚えておこう！