・カスタム投稿タイプの詳細ページを表示するには？
こんな疑問にお答えします。
WordPressのテーマ作成時、実績やお知らせなどのカスタム投稿タイプを作成することありますよね。
その投稿で作る、詳細ページを出力したい場合ありますよね。
実はあるコードを使えば、簡単に表示可能です。
すぐにできるよ！
ということで、この記事では「カスタム投稿タイプの詳細ページを表示」について解説していきます！
カスタム投稿タイプの詳細ページを表示
目次
【解説】カスタム投稿タイプの詳細ページを表示【WordPress】
カスタム投稿タイプの詳細ページを表示するために、下記を紹介しますね。
- ファイル名
- ループ処理をする
- アクセスするURL名
順に見ていきましょう！
まずファイル名。
カスタム投稿タイプの詳細ページを表示するファイルとしては下記になります。
- single-カスタム投稿のスラッグ.php
- single.php
他にもありますが、特定の投稿タイプ詳細ページに対してファイルを分けたい場合は、スラッグを用いります。
複数カスタム投稿タイプがあるけど、それぞれの詳細ページのレイアウトが同じなら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; ?>メインループを使って出力します。
【理解】WordPress｜single.phpにループ処理は必要？ 詳細ページの部分に、その記事が持つタームを出力したい場合もありますよね。
そんな時は下記記事をどうぞ。
【WordPress】タームの名前・リンクを一覧表示する【カレントあり】 あとはカスタム投稿タイプの詳細ページにアクセスすればOK。
アクセスするURLはそのWordPressのURL構造にもよりますが、一般的には下記になります。
https://example.com/カスタム投稿タイプのスラッグ名/詳細ページのスラッグ名
カスタム投稿タイプの一覧記事⇒詳細ページに飛ぶためのリンク出力としては、下記になります。
<a href="<?php the_permalink(); ?>"></a>the_permalink() 関数を使用して各投稿の詳細ページへのリンクを取得。
あとは<a> タグで囲って、詳細ページへのリンクをクリックできるようにします。
WordPress はその投稿の詳細ページを表示するために、single-{post_type}.php テンプレートファイルを探します。テンプレートファイルが存在しない場合は、single.php を使用。
【解説】カスタム投稿タイプの詳細ページを表示【WordPress】：まとめ
- single-カスタム投稿のスラッグ.php
single.php - メインループを使って出力
- https://example.com/カスタム投稿タイプのスラッグ名/詳細ページのスラッグ名
- 一覧ページから詳細ページに飛ぶにはthe_permalink()を使う
詳細ページの表示方法を覚えておこう！
