OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

カスタム分類のターム名表示とスラッグを取得する方法まとめ

最終更新日:2020.2.15 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>
 
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram