WordPress

2021.02.16

【WordPress】カテゴリーやタグの一覧の表示方法まとめ【カスタムタクソノミーの場合も紹介】

ブログやメディアサイトでは、サイト内の回遊率を上げるためにサイドバーやヘッダーなどにカテゴリー一覧が表示されていることが多いです。

サイドバーやヘッダーなどにカテゴリー一覧を表示させたい時、HTMLで静的に書くこともできますが、それではカテゴリーが増えた時にその都度手動で追加することになります。

それが数箇所だったらかなり面倒ですよね…。

WordPressでWebサイトを構築しているなら、管理画面でカテゴリーを追加したら自動的に追加表示させることができます。

「デフォルト(WPコア)のカテゴリー・タグ一覧」と「カスタムタクソノミーのターム一覧」の表示方法をそれぞれご紹介します。

WPコアのカテゴリー一覧を表示させる方法

カテゴリー一覧を表示させるには、WordPressで用意されているテンプレートタグである「wp_list_categories」、または「get_categories」を使用します。

2つの違いは、wp_list_categoriesはliタグやリンクなどを自動出力しますが、「get_categories」は自動出力しないという点です。

wp_list_categoriesを使用する場合

<ul>
    <?php
    $args = array(
        'title_li' => ''
    );
    wp_list_categories($args);
    ?>
</ul>

wp_list_categories」はカテゴリー一覧を取得し、表示まで自動でやってくれます。

パラメータを渡してあげることで、カスタマイズすることができます。

例えば上記コードでは「’title_li’」を空指定することで、自動で出力されるタイトルを非表示にしています。

指定できるパラメータはたくさんあるので、WordPress Codexをご参考ください。

「wp_list_categories」は後述するタグ一覧、カスタムタクソノミーのターム一覧にも使用することができます。

get_categoriesを使用する場合

<?php
$categories = get_categories();
foreach ($categories as $category) {
    echo '<li><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></li>';
}
?>

「get_categories」はカテゴリー一覧を取得するだけで、そのままでは何も表示されません。

なので、foreach文で取得したカテゴリーを1つ1つ表示させる処理が必要になります。

「wp_list_categories」よりもコードは複雑になりますが、視覚的に自由にタグを入れ込んだりできるため、こちらの方がカスタマイズしやすいと思います。

どちらのテンプレートタグも、カテゴリー一覧を取得するという点では同じ役割のため、使いやすい方を使っていただくか、場面によって使い分けてみてください。

WPコアのタグ一覧を表示する

タグ一覧を表示させるには、「wp_list_categories」または「get_tags」を使用します。

wp_list_categoriesを使用する場合

<ul>
    <?php 
    $taglist = wp_list_categories(array(
        'taxonomy' => 'post_tag', // タクソノミーの指定
        'title_li' => '', 
    ));
    echo $taglist;
    ?>
</ul>

タグ一覧を「wp_list_categories」で表示させる場合は、パラメータで「post_tag」を指定します。

get_tagsを使用する場合

<ul>
    <?php
    $tags = get_tags();
    foreach ($tags as $tag) {
        echo '<li><a href="' . get_tag_link($tag->term_id) . '">' . $tag->name . '</a></li>';
    }
    ?>
</ul>

「get_tags」は、「get_categories」と同じようにタグの取得しかしないため、foreach文で繰り返し処理を行い、タグ一覧を表示させます。

カスタムタクソノミーのターム一覧を表示する

カスタムタクソノミーのターム一覧を表示させるには、「wp_list_categories」または「get_terms」を使用します。

wp_list_categoriesを使用する場合

<ul>
    <?php 
    $catlist = wp_list_categories(array(
        'taxonomy' => 'news_cat', // タクソノミーの指定
        'title_li' => '', 
    ));
    echo $catlist;
    ?>
</ul>

カスタムタクソノミーのターム一覧を「wp_list_categories」で表示させる場合は、パラメータでカスタムタクソノミースラッグを指定します。

get_termsを使用する場合

<ul>
    <?php
    $terms = get_terms('news_cat'); // タクソノミーの指定
    foreach ($terms as $term) {
        echo '<li><a href="' . get_term_link($term) . '">' . $term->name . '</a></li>';
    }
    ?>
</ul>

引数にカスタムタクソノミースラッグを指定します。

「get_terms」は、「get_categories」と同じようにタームの取得しかしないため、foreach文で繰り返し処理を行い、ターム一覧を表示させます。

get_termsでWPコアのカテゴリー・タグ一覧も表示できる

実は、「wp_list_categories」と同じく「get_terms」でWPコアのカテゴリー一覧もタグ一覧も表示することができます。

カテゴリー一覧を表示

<ul>
    <?php
    $terms = get_terms('category'); // タクソノミーの指定
    foreach ($terms as $term) {
        echo '<li><a href="' . get_term_link($term) . '">' . $term->name . '</a></li>';
    }
    ?>
</ul>

タクソノミースラッグを指定する箇所に「category」と入力します。

タグ一覧を表示

<ul>
    <?php
    $terms = get_terms('post_tag'); // タクソノミーの指定
    foreach ($terms as $term) {
        echo '<li><a href="' . get_term_link($term) . '">' . $term->name . '</a></li>';
    }
    ?>
</ul>

タクソノミースラッグを指定する箇所に「post_tag」と入力します。

「get_categories」などとの違いは、引数にタクソノミースラッグを指定することだけです。

「get_categories」は内部で「get_terms」を呼び出しているとのことなので、処理内容はほぼ同じなんですね。

テンプレートタグがごちゃごちゃややこしい!という人は「get_terms」だけ覚えておくと良いでしょう!

まとめ

今回は「デフォルト(WPコア)のカテゴリー・タグ一覧」と「カスタムタクソノミーのターム一覧」の表示方法をそれぞれご紹介しました。

カテゴリーとタグとカスタムタクソノミー、数多のテンプレートとかなりこんがらがるところなので、それぞれ整理してみました!

用途に合わせてぜひご活用ください。

0

関連記事

  • 2021.06.29

    簡単にWordpressでログインしてないと見れないサイトを作る方法

    WordPress

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.04.14

    【WordPress】管理画面のカスタム投稿記事一覧をカテゴリーで絞り込めるようにする

    WordPress

おすすめ記事

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!