【WordPress】カテゴリー出力方法のまとめ【コピペOK】

記事内に広告を含みます

パソ君

・カテゴリーの出力方法は？

こんな疑問にお答えします。

WordPressにてカテゴリーの出力をすることはよくありますよね。

ただ方法がいろいろあり、どれを使えば良いか悩むかと。

全部のカテゴリーなのか、記事にあるカテゴリーなのか、リンク付きなのかなどなど。

ジト

出力方法たくさんあるよね

ということで、この記事では「カテゴリー出力方法」についてまとめてみました！

この記事でわかること

カテゴリー出力方法のまとめ

【WordPress】カテゴリー出力方法【全部のカテゴリー】
- 「wp_list_categories()」を使う
- 「get_categories()」を使う
【WordPress】カテゴリー出力方法【記事内のカテゴリー】
【WordPress】カテゴリー出力方法のまとめ【コピペOK】：まとめ

【WordPress】カテゴリー出力方法【全部のカテゴリー】

まずそのWordPressに登録されている「全カテゴリー」を出力する方法を紹介しますね。

主に下記になります↓

「wp_list_categories()」を使う
「get_categories()」を使う

順に見ていきましょう。

「wp_list_categories()」を使う

「wp_list_categories()」を使うと、全カテゴリーを出力することができます。

例としてはこちら↓

<ul class="cat-list">
  <?php 
  wp_list_categories(array(
    'title_li' => ''
  )); 
  ?>
</ul>

出力されるHTMLコードがこちら↓

<ul class="cat-list">
  <li class="cat-item cat-item-1"><a href="https://example.com/category/html/">HTML</a></li>
  <li class="cat-item cat-item-2"><a href="https://example.com/category/css/">CSS</a></li>
  <li class="cat-item cat-item-3"><a href="https://example.com/category/javascript/">JavaScript</a></li>
  <li class="cat-item cat-item-4"><a href="https://example.com/category/wordpress/">WordPress</a>
    <ul class="children">
      <li class="cat-item cat-item-5"><a href="https://example.com/category/wordpress/plugin/">プラグイン</a></li>
      <li class="cat-item cat-item-6"><a href="https://example.com/category/wordpress/security/">セキュリティ</a></li>
    </ul>
  </li>
</ul>

特徴

・リンク付き
・親子関係を保つ
・HTMLの構造が決まってる（li>a）

ちなみに下記記事を使えば、クラス名を変えることができちゃいます↓

2023年3月23日【解説】wp_list_categoriesのクラスにスラッグ付与【WordPress】

「get_categories()」を使う

続いて「get_categories()」を用いて、全カテゴリーを出力する方法です。

例としてはこちら↓

<ul class="cat-list">
  <?php 
  $cats = get_categories();
  foreach($cats as $cat) {
    echo '<li><a href="' . esc_url(get_category_link($cat->term_id)) . '">' . esc_html($cat->name) . '</a></li>';
  }
  ?>
</ul>

foreachで回すことで、カテゴリーをすべて出力しております。
そんな出力されるHTMLコードがこちら↓

<ul class="cat-list">
  <li><a href="https://example.com/category/html/">HTML</a></li>
  <li><a href="https://example.com/category/css/">CSS</a></li>
  <li><a href="https://example.com/category/javascript/">JavaScript</a></li>
  <li><a href="https://example.com/category/wordpress/">WordPress</a></li>
  <li><a href="https://example.com/category/wordpress/plugin/">プラグイン</a></li>
  <li><a href="https://example.com/category/wordpress/security/">セキュリティ</a></li>
</ul>

親子関係が保たれず、そのまま出力されてしまいます。（if文を使えば親子関係は保てますが。。）

特徴

・親子関係は綺麗に表示不可
・リンク付きかなしか対応可能
・HTML構造を変えやすい

【WordPress】カテゴリー出力方法【記事内のカテゴリー】

次に記事に含まれているカテゴリーを出力する方法を紹介しますね。

「the_category()」を使う
「get_the_category()」を使う

順に見ていきましょう。

「the_category()」を使う

「the_category()」を使うと、リスト表示で記事がもつカテゴリーが出力されます。

<?php the_category(); ?>

「post-categories」というクラス名が付与されるのが特徴。

そんな出力結果がこちら↓

<ul class="post-categories">
  <li><a href="https://example.com/category/html/">HTML</a></li>
  <li><a href="https://example.com/category/javascript/">JavaScript</a></li>
</ul>

特徴

・ループ内で使用
・HTML構造は変えにくい

「get_the_category()」を使う

HTML構造を変えるなど細かい指定をする場合は「get_the_category()」を使うのがオススメ。

foreachで回すことで、その記事がもつカテゴリーを出力できます。

リンクなし

「記事内の持つカテゴリーを出力」＋「リンクなし」

<ul class="cat-list">
  <?php
  $cats =  get_the_category();
  foreach($cats as $cat) {
    $cat_name = esc_html($cat->name);
    echo '<li class="cat-list__item">' . $cat_name . '</li>';
  }  
  ?>
</ul>

<ul class="cat-list">
  <li class="cat-list__item">HTML</li>
  <li class="cat-list__item">JavaScript</li>
</ul>

リンクあり

「記事内の持つカテゴリーを出力」＋「リンクあり」

<ul class="cat-list">
  <?php
  $cats =  get_the_category();
  foreach($cats as $cat) {
    $cat_link = esc_url(get_category_link($cat->term_id));
    $cat_name = esc_html($cat->name);
    echo '<li class="cat-list__item"><a href="' . $cat_link . '" class="cat-list__link">' . $cat_name . '</a></li>';
  }  
  ?>
</ul>

<ul class="cat-list">
  <li class="cat-list__item"><a href="https://example.com/category/html/" class="cat-list__link">HTML</a></li>
  <li class="cat-list__item"><a href="https://example.com/category/javascript/" class="cat-list__link">JavaScript</a></li>
</ul>

クラス名をカテゴリーのスラッグに

「記事内の持つカテゴリーを出力」＋「リンクなし」＋「クラス名をカテゴリーのスラッグに」

<ul class="cat-list">
  <?php
  $cats =  get_the_category();
  foreach($cats as $cat) {
    $cat_name = esc_html($cat->name);
    $cat_slug = esc_attr($cat->slug);
    echo '<li class="cat-list__item cat-' . $cat_slug . '">' . $cat_name . '</li>';
  }  
  ?>
</ul>

<ul class="cat-list">
  <li class="cat-list__item cat-html">HTML</li>
  <li class="cat-list__item cat-javascript">JavaScript</li>
</ul>

「記事内の持つカテゴリーを出力」＋「リンクあり」＋「クラス名をカテゴリーのスラッグに」

<ul class="cat-list">
  <?php
  $cats =  get_the_category();
  foreach($cats as $cat) {
    $cat_link = esc_url(get_category_link($cat->term_id));
    $cat_name = esc_html($cat->name);
    $cat_slug = esc_attr($cat->slug);
    echo '<li class="cat-list__item cat-' . $cat_slug . '"><a href="' . $cat_link . '" class="cat-list__link">' . $cat_name . '</a></li>';
  }  
  ?>
</ul>

<ul class="cat-list">
  <li class="cat-list__item cat-html"><a href="https://example.com/category/html/" class="cat-list__link">HTML</a></li>
  <li class="cat-list__item cat-javascript"><a href="https://example.com/category/javascript/" class="cat-list__link">JavaScript</a></li>
</ul>

記事内にある最初のカテゴリー１つだけ表示

記事内に複数カテゴリーがあるなかで、１つだけ表示したい場合ありますよね。

そんなときは配列「0」を使えばOK。

<?php
$cat = get_the_category();
$cat = $cat[0];
$cat_link = esc_url(get_category_link($cat->term_id));
$cat_name = esc_html($cat->name);
echo '<a href="' . $cat_link . '">' . $cat_name . '</a>';
?>

<a href="https://example.com/category/html/">HTML</a>