・タームを一覧表示する方法は？
こんな疑問にお答えします。
テーマ作成をするとき、カスタムタクソノミーにあるタームを一覧表示したい場合ありますよね。
タームそれぞれを横並びにして、クリックしたらターム一覧ページに飛ぶ感じに。
あれ実は簡単に実装可能です！
すぐにできるよ！
ということで、この記事では「タームを一覧表示する方法」について解説していきます！
・ターム名やリンクを一覧表示する方法
・ターム名やリンクを一覧表示する方法【カレントあり】
その記事が持ってるタームのみ表示したい場合は
下記記事どうぞ↓
【解説】WordPressの記事に紐づくターム全て表示【リンク付き】 目次
【WordPress】タームの名前・リンクを一覧表示する方法
WordPressにて指定タクソノミーのタームを一覧表示する方法を紹介します。
下記の例を別々に紹介しますね。
- タームを一覧表示：ターム名のみ
- タームを一覧表示：ターム名＋リンク付き
順に見ていきましょう！！
<?php
$terms = get_terms( array(
'taxonomy' => 'work_cat',
'hide_empty' => false,
) );
if ( $terms ) {
echo '<ul class="term-list">';
foreach ( $terms as $term ) {
?>
<li class="term-list__item">
<?php echo esc_html( $term->name ); ?>
</li>
<?php
}
echo '</ul>';
}
?>「work_cat」というタクソノミー名がもつターム情報を、$termsに入れます。
その$termsをforeachでループ処理して、ターム名をすべて表示という意味。
‘hide_empty’ => false,とすることで、
ターム内の記事が空でも表示するよう設定！
<?php
$terms = get_terms( array(
'taxonomy' => 'work_cat',
'hide_empty' => false,
) );
if ( $terms ) {
echo '<ul class="term-list">';
foreach ( $terms as $term ) {
?>
<li class="term-list__item">
<a class="term-list__link" href="<?php echo esc_url( get_term_link( $term ) ); ?>">
<?php echo esc_html( $term->name ); ?>
</a>
</li>
<?php
}
echo '</ul>';
}
?>foreach内にaタグを入れることで、全タームのリンクも表示することができます。
エスケープ処理もしていますよ。
【解説】WordPressのエスケープ処理方法３選【必要・不要な関数】 【WordPress】タームの名前・リンクを一覧表示する方法【カレントあり】
現在表示しているタームに関しては、ちょっと表示を変えたい場合ありますよね。
背景色を変えたりとか。
実はそんなカレント表示も可能です。
- カレント付きタームを一覧表示：ターム名のみ
- カレント付きタームを一覧表示：ターム名＋リンク付き
順に見ていきましょう。
<?php
$taxonomy = 'work_cat'; // タクソノミーのスラッグ
$current_term_slug = get_query_var('term'); // 現在表示されているタームのスラッグを取得
$terms = get_terms(array(
'taxonomy' => $taxonomy,
'hide_empty' => false,
));
if ($terms) {
echo '<ul class="term-list">';
foreach ($terms as $term) {
$current_class = ($term->slug == $current_term_slug) ? 'current' : '';
?>
<li class="term-list__item <?php echo esc_attr($current_class); ?>">
<?php echo esc_html($term->name); ?>
</li>
<?php
}
echo '</ul>';
}
?>get_query_var( ‘term’ );で現在表示のタームスラッグを取得。
そのスラッグ名と同じスラッグ名をもつタームにcurrentというクラスをつけるようにしております。
今回はliタグに対してcurrentクラスを付与しました。
<?php
$taxonomy = 'work_cat'; // タクソノミーのスラッグ
$current_term_slug = get_query_var( 'term' ); // 現在表示されているタームのスラッグを取得
$terms = get_terms( array(
'taxonomy' => $taxonomy,
'hide_empty' => false,
) );
if ( $terms ) {
echo '<ul class="term-list">';
foreach ( $terms as $term ) {
?>
<li class="term-list__item">
<a class="term-list__link <?php echo ($term->slug == $current_term_slug) ? 'current' : ''; ?>" href="<?php echo esc_url( get_term_link( $term ) ); ?>">
<?php echo esc_html( $term->name ); ?>
</a>
</li>
<?php
}
echo '</ul>';
}
?>foreach内にaタグを入れることで、リンクもつけることができます。
今回はそのaタグに対してcurrentクラスを付与しました。
【WordPress】タームの名前・リンクを一覧表示する方法【カレント表示あり】：まとめ
- タクソノミーのターム情報を変数に入れる
- その変数をforeachでループして1個ずつ出力
- リンク先を入れる場合はechoでaタグ出力
- カレント表示する場合は、現在表示してるタームスラッグ名と同じスラッグ名に対してクラスを付与
ターム一覧表示したい場合は使ってみよう！
