ZeroPlus Media > L_WordPress > Step2 > WordPressのカテゴリーを作成して表示しよう

WordPressのカテゴリーを作成して表示しよう

2022/07/14

本記事では、WordPressの機能の一つである投稿に対するカテゴリー機能について解説していきます。

WordPressを学ぶ上で必須知識になるので、この記事を通してカテゴリーの作り方と表示の仕方を学んでいきましょう。

カテゴリーとは

カテゴリーとは、投稿した記事を分類ごとにグルーピングする機能です。

料理をカテゴライズすると以下のようになります。

料理をカテゴライズ

ハンバーグ
- 豆腐ハンバーグ
- 和風煮込みハンバーグ
- 大葉おろしハンバーグ
- カレーハンバーグ
- チーズハンバーグ
肉じゃが
- 豚肉じゃが
- ツナじゃが
野菜炒め
- 辛味噌野菜炒め
- 焼肉のタレ野菜炒め
- 鶏肉野菜炒め
- 豚キムチ炒め
パスタ
- ほうれん草とベーコンのクリームスパゲッティ
- お吸い物パスタ
- ツナのニンニク醤油パスタ

上記例のカテゴリーは「ハンバーグ」「肉じゃが」「野菜炒め」「パスタ」に当たります。

カテゴリーは親子関係を持たせることができ、上記の大きい分類も作ることもできます。上記を例にすると、「和風」「洋食」「イタリアン」などのように上の階層のカテゴリーを持つことができます。

カテゴリーを設定する理由

カテゴリーを設定する理由としては、関連性のある記事をグルーピングすることで、ユーザーの利便性（ユーザービリティ）を高めることができます。

投稿記事がカテゴリーごとに分類されていると、ユーザーは見たい情報を素早く発見することができアクセス数の向上に繋がったり、さらに正しい設定をすることでSEO面においても効果が期待できます。

逆にカテゴリーに分類されていないと、ユーザーが見たい情報が見つけられず、サイトを離脱してしまいます。そして、ユーザーにとって「このサイトは見づらい」という印象が残ってしまい、再度アクセス確率が下がってしまいます。

カテゴリーとタグの違い

WordPressにはカテゴリーの他にタグという機能があります。

このタグもカテゴリー同様に投稿を分類することができ、ユーザーの利便性を高めることができます。

料理にタグ付け

ハンバーグ
- 豆腐ハンバーグ ヘルシー 糖質オフ
- 和風煮込みハンバーグ 簡単
- 大葉おろしハンバーグ ヘルシー
- カレーハンバーグ 濃厚
- チーズハンバーグ 絶品
肉じゃが
- 豚肉じゃが しっとり
- ツナじゃが 簡単 さっぱり
野菜炒め
- 辛味噌野菜炒め ピリ辛
- 焼肉のタレ野菜炒め 簡単 スタミナ
- 鶏肉野菜炒め 糖質オフ 野菜たっぷり
- 豚キムチ炒め スタミナ
パスタ
- ほうれん草とベーコンのクリームパスタ 濃厚
- お吸い物パスタ 簡単
- 大葉とツナの醤油パスタ さっぱり

上記例をタグ付けしてみました。

ご覧の通り、タグというのはカテゴリーとは違い自由な切り口でカテゴリーを跨いで記事を分類することができます。

また、タグはカテゴリーのように親子関係を持たせることはできませんが、ひとつの記事に複数つけることができます。

とはいえ、むやみになんでもかんでもタグを付けないように注意しましょう。ニーズのある切り口でタグを作成するようにしましょう。

カテゴリーとタグの違いを述べましたが、今回はカテゴリーに触れていきます。

カテゴリーの作成

ここまででは、カテゴリーとはなんなのかなぜ必要なのか解説しました。このセクションからは、実際にWordPressでカテゴリーの作成のやり方を解説していきます。

カテゴリーの作成は管理画面をより操作を行うので、まず管理画面を開きます。

管理画面のサイドバーの「投稿 > カテゴリー」をクリックして「カテゴリー作成画面」を開きます。

この画面にてカテゴリーを新規に作成したり、既存のカテゴリーを編集することができ、デフォルトで「Uncategorized」というカテゴリーが存在しています。

今回は新規にカテゴリーを作成していきます。

カテゴリー名

カテゴリーの「名前」を設定します。

画像では「HTML」と設定しています。

スラッグ

カテゴリーの「スラッグ」を設定します。

画像では「html」と設定しています。

スラッグとは

スラッグとは、「パーマリンク」を構成するURL要素の一部を指します

https://example.com/スラッグ

例： https://example.com/html

親カテゴリー

「親カテゴリー」はカテゴリーに階層を持たせたい時に設定します。

HTMLカテゴリーに親カテゴリーがない場合は、「なし」で設定します。

カテゴリー説明

カテゴリーの「説明」を設定します。

画像ではある程度の文章の説明を設定します。

一通り項目に対して、値を設定することができたら、「新規カテゴリーを追加」ボタンを押下して作成完了になります。

作成ができると、右側のカテゴリーリストに追加されます。

投稿をカテゴライズ

カテゴリーを作成しても、投稿に紐づいていないと表示もすることができません。

作成したカテゴリーを投稿に対して紐づけていきます。

投稿一覧ページを開く

管理画面のサイドバーの「投稿 > 投稿一覧」をクリックして投稿一覧ページを開きます。

投稿を新規追加する

今回は、新しく投稿を作成して紐づけていきます。

「新規追加」ボタンを押下して新しく投稿を作成します。

投稿内容を設定する

投稿の「記事タイトル」「記事本文」を設定します。今回は適当な内容を設定します。

カテゴリーを設定する

投稿作成画面の右側の投稿設定の「カテゴリー」を開くと、先ほど作成した「HTML」という項目が追加されているので、チェックをいれて紐付けます。

投稿を公開する

右上の「公開」ボタンで諸々設定した投稿を公開します。

これで投稿に対するカテゴリーの紐付けが完了します。

作成したカテゴリーを表示

次に作成したカテゴリーをテーマにて表示します。

作成したカテゴリーを一覧で出力することを例に解説します。

get_categories()

作成したカテゴリーを表示するために今回使用する関数は、get_categories()になります。

この関数は、カテゴリー情報を取得する関数です。

index.php

<?php 
		// 全カテゴリー情報を取得
    $categories = get_categories();

		// $category変数の内容を表示
    var_dump($categories);
?>

出力結果

パッと見ると何が書いてあるか分からないですが、先ほどのカテゴリー作成時に設定した値を元に確認してみましょう。

赤枠部分がget_categories()の全体の出力結果です。データとして配列データになっています。

青枠部分がget_categories()で出力したカテゴリーデータの各データです。

青枠が2つあるのは、カテゴリーが2つあるということになります。

「HTMLカテゴリーしか作ってないのに..?」と思いますが、デフォルトで「Uncategorized」というカテゴリーもあったので、「HTMLカテゴリー」と「Uncategorizedカテゴリー」で合計２つのカテゴリーデータというふうになるわけです。

HTMLカテゴリーデータの中身

先ほど作成したHTMLカテゴリーのデータの中身をみてましょう。

青線の部分を見てもらうと分かるように、「HTML」や「html」や「HTMLとは、Webサイトを作るための~」などとデータが入ってるのが分かるかと思います。

これは、カテゴリー作成時に設定した内容と同様のデータで実際に出力することができています。

カテゴリーデータの単体出力

<?php 
    $categories = get_categories();

    foreach ($categories as $category) {
        // カテゴリーIDの出力
        echo 'カテゴリーID: ' . $category->term_id;

        echo "<br>";

        // カテゴリースラッグの出力
        echo 'カテゴリースラッグ: ' . $category->slug;

        echo "<br>";

        // カテゴリー名の出力
        echo 'カテゴリー名: ' . $category->name;

        echo "<br>-----<br>";
    }
?>

get_categories()で取得したカテゴリーデータ配列をforeachでループし、各データを出力しています。

$categoriesは配列データなので、ひとつひとつをループで$categoryという変数に代入しています。

$categoryに「カテゴリーID」や「スラッグ」や「カテゴリー名」などが入っているので、それらをechoで出力しています。

カテゴリーIDは、$category→term_id;

カテゴリースラッグは、$category→slug;

カテゴリー名は、$category→name;

で出力しています。

使用例

コード

<ul class="nav-list">
  <?php
		// 全カテゴリーの取得
    $cat_all = get_categories();
    foreach ($cat_all as $cat) :
      // カテゴリー名の取得
      $cat_name = $cat->name;
      // スラッグの取得
      $cat_slug = $cat->slug;
      // カテゴリーアーカイブリンク
      $cat_link = get_category_link($cat->term_id);
  ?>
  <li class="<?php echo $cat_slug; ?> nav-list-item">
    <a class="header-a" href="<?php echo $cat_link; ?>">
      <?php echo $cat_name; ?>
    </a>
  </li>
  <?php endforeach; ?>
</ul>

出力結果