WordPressでは、投稿タイプ（通常の投稿や固定ページ）に加えて、独自の投稿タイプ（カスタム投稿タイプ）を作成できます。
製品情報やイベント情報など、特定のコンテンツを管理する場合に使用しましょう。
さらに、カスタムタクソノミー（分類）を利用して、カスタム投稿をカテゴリやタグといったタームで分類することが可能です。
この記事では、カスタム投稿タイプの記事一覧に、各記事が属するタームを表示するタグを解説します。
カスタム投稿タイプの記事一覧にタームを表示するメリット
ユーザーが興味のあるカテゴリやタグを一目で確認できるため、サイト内の回遊率が向上します。
また、ターム情報を適切に表示することで、検索エンジンに対してコンテンツの関連性を明確に伝えることができ、SEO効果も期待できます。
タームを表示するための基本的な方法
WordPressでは、the_terms() 関数を使用して、投稿に関連付けられたタームを表示できます。
この関数をカスタム投稿タイプのテンプレートファイル内で使用することで、各投稿のタームを表示することが可能です。
<?php the_terms( $post->ID, 'タクソノミースラッグ', '表示前のテキスト', '区切り文字', '表示後のテキスト' ); ?>カスタム投稿タイプのテンプレートにターム表示を追加する実装手順
具体的な実装手順は以下です。
- テンプレートファイルの確認：カスタム投稿タイプの一覧表示に使用されているテンプレートファイル（例：
archive-カスタム投稿タイプ名.php）を特定します。 - ループ内に
the_terms()を追加：投稿を表示するループ内で、the_terms()関数を使用してタームを表示します。
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<div class="post-content">
<?php the_content(); ?>
</div>
<div class="post-terms">
<?php $terms = get_the_terms( $post->ID, 'tax-name' ); //tax-nameを自分のタクソノミースラッグに変更
if ( $terms && ! is_wp_error( $terms ) ) {
foreach ( $terms as $term ) {
echo '<span class="term' . esc_html( $term->slug ) . '"><a href="' . esc_url( $term_link ) . '" class="term-link">' . esc_html( $term->name ) . '</a></span>'; //classにタームスラッグを追加し、ターム名を出力
}
} else {
//ターム未設定の場合の処理
} ?>
</div>
<?php endwhile; ?>
<?php endif; ?>上記の例だと記事毎に属するタームを全てリンク付きで出力します。
タームのリンクとスタイリング
CSSの例
.term-link {
background-color: #f0f0f0;
padding: 5px 10px;
margin-right: 5px;
display: inline-block;
border-radius: 3px;
text-decoration: none;
color: #333;
}
.term.china .term-link {
background-color: #FF2626; /* 中華の場合は赤色 */
}
.term.japan .term-link {
background-color: #FFC926; /* 和食の場合は黄色 */
}複数のタクソノミーに対応する方法
複数のタクソノミーが存在する場合は、以下のような記述で複数のタクソノミーを読み込みます。
<?php
$taxonomies = array( 'タクソノミー1', 'タクソノミー2' );
foreach ( $taxonomies as $taxonomy ) {
$terms = get_the_terms( $post->ID, $taxonomy );
if ( $terms && ! is_wp_error( $terms ) ) {
echo '<div class="' . esc_attr( $taxonomy ) . '-terms">';
foreach ( $terms as $term ) {
$term_link = get_term_link( $term );
echo '<a href="' . esc_url( $term_link ) . '" class="term-link">' . esc_html( $term->name ) . '</a>';
}
echo '</div>';
}
}
?>ターム表示でサイトのユーザビリティとSEOを強化しよう
カスタム投稿タイプの記事一覧にタームを表示することで、ユーザーが関連するコンテンツを見つけやすくなり、サイト全体の回遊性が向上します。
SEO的にも優位に働きますので、ぜひ導入しましょう！
コメント