カスタム分類のターム名表示とスラッグを取得する方法まとめ
最終更新日: Update!!
WordPressではデフォルトで用意されている投稿の他にもユーザー側で独自に設定できるカスタム投稿があります。このカスタム投稿における、カテゴリーなどの分類にあたるものがカスタム分類(タクソノミー)になります。カスタム分類内では分類項目がタームと呼ばれ、このタームも文字列などとして表示させたり、タームのスラッグ名を取得することができます。
カスタム分類のタームを表示させ、さらにスラッグを取得しclass名に指定するなどができる、ターム名まわりの記述方法をまとめていきたいと思います。
カスタム分類のターム名を表示させる
まずは、基本となるターム名を文字列として表示させる方法です 【PHP】<?php if ($terms = get_the_terms($post->ID, 'タクソノミー名')) { foreach ( $terms as $term ) { echo ('<span>') ; echo esc_html($term->name) ; echo ('</span>') ; } } ?>【HTML】
<span>ターム名</span>
カスタム分類のリンク付きターム名を表示させる
次に、ブログなどのアーカイブ時に役立つリンク付きのターム名を表示させる方法です 【PHP】// 単一の場合 <?php echo get_the_term_list($post->ID, 'タクソノミー名'); ?> // 複数表示がありコンマで区切り並べる場合 <?php echo get_the_term_list($post->ID, 'タクソノミー名', '見出し文字:', ','); ?>【HTML】
// 単一の場合 <a href="タームのリンク先">ターム名</a> // 複数表示がありコンマで区切り並べる場合 見出し文字:<a href="ターム1のリンク先">ターム名1</a>,<a href="ターム2のリンク先">ターム名2</a>…
カスタム分類のタームを表示させ、さらにスラッグを取得しclass名に指定する
最後に、ターム名を表示させて取得したスラッグをclass名に指定する方法です。ターム名ごとにclassが割り振られるのでCSSでスタイルを変更できるようになります。ターム名ごとのラベルの作成などに使えます。 【PHP】<?php if ($terms = get_the_terms($post->ID, 'タクソノミー名')) { foreach ( $terms as $term ) { $term_slug = $term -> slug; echo ('<span class="') ; echo esc_html($term_slug) ; echo ('">') ; echo esc_html($term->name) ; echo ('</span>') ; } } ?>【HTML】
<span class="スラッグ名">ターム名</span>
カスタム分類アーカイブページなどでループ外に現在のタームを表示させる
シングルページではなくカスタム分類のアーカイブページなどで、現在のタームをループ外で表示させる方法です。ループ外であるbody内だけでなくheadタグ内などでも使えます。 【PHP】<?php echo ('<h1>'); single_cat_title( '', true ); echo ('</h1>'); ?>【HTML】
<h1>ターム名</h1>
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
categories