WordPress カテゴリー名とスラッグを取得して表示する

  WordPress

WordPressで投稿のカテゴリーごとにスタイルシートの装飾を変更して表示してみます。

カテゴリーごとにスタイルを変更するには、get_the_category() を使って「スラッグ」もしくは「カテゴリーID」を取得してそれをCSSのクラスに使用してスタイルを指定していきます。

 

get_the_category()

get_the_category() を使ってカテゴリー名とスラッグを取得します。

オブジェクト(カテゴリー)の配列を返します。各オブジェクトは現在の投稿が属するカテゴリーを表します。 このタグはパラメータとして投稿 ID を渡すことで、ループの外でも使うことができます。

WordPress Codex : テンプレートタグ/get the category

get_the_category( $id )

 

パラメータ
引数 説明
$id
整数
オプション
投稿 ID
初期値: $post->ID (現在の投稿の ID)
戻り値
配列 カテゴリーのオブジェクトの配列

 

返されるオブジェクトのメンバー変数 説明
term_id
整数
カテゴリー ID
name
文字列
カテゴリー名
slug
文字列
カテゴリーのスラッグ
term_group
整数
カテゴリーのグループ
term_taxonomy_id
整数
カテゴリーのタクソノミー ID
taxonomy
文字列
タクソノミー名 ‘category’
description
文字列
カテゴリーの説明
parent
整数
親カテゴリーの ID
count
整数
カテゴリーに登録されている投稿の数
object_id
整数
オブジェクト ID
cat_ID
整数
カテゴリー ID (term_id にも同じ値が入る)
category_count
整数
カテゴリーに登録されている投稿の数(count にも同じ値が入る)
category_description
文字列
カテゴリーの説明(description にも同じ値が入る)
cat_name
文字列
カテゴリー名(name にも同じ値が入る)
category_nicename
文字列
カテゴリースラッグ名 – カテゴリー名から生成されたスラッグ(slug にも同じ値が入る)
category_parent
整数
親カテゴリーの ID – 親がなければ 0 が入る(parent にも同じ値が入る)

 

カテゴリー名とスラッグの取得と表示

個別投稿【single.php】の中にその投稿のカテゴリー名を表示して、特定のカテゴリーの装飾を変更して表示してみます。

 

スラッグを使って表示する

今回は「スラッグ」を使って表示します。
※すでに運用しているサイトで、スラッグに日本語を使っている場合などスラッグがCSSのクラス名に使いづらい場合は「カテゴリー ID」を使います。

 

まず、ダッシュボードでカテゴリーを作成します。
※このときカテゴリーのスラッグを半角英数字で文字数を短くしておくと、後でスタイルシートに書くときにラクです。

カテゴリー名 スラッグ
Linux linux
Mac mac
Windows win

 

【style.css】にそれぞれのスラッグに対応したCSS指定を追加します。

.category {
  border-color: #F5F5F5;
  border-left-style: solid;
  border-left-width: 1em;
  padding: 10px;
}
.linux{
  border-color: #FF5722;
}
.mac {
  border-color: #424242;
}
.win {
  border-color: #2196F3;
}

 

次に【single.php】のループの中でカテゴリー名を表示させたい場所に以下を書きます。

<?php if(have_posts()): while(have_posts()) : the_post(); ?>
 ・・・略・・・
  <?php 
    $cat = get_the_category();
    $cat_slug = $cat[0]->slug;
    $cat_name = $cat[0]->name;
  ?>
  <div class="category <?php echo $cat_slug; ?>" ><?php echo $cat_name; ?></div>
 ・・・略・・・
<?php endwhile; ?>
<?php endif; ?>

 

カテゴリーが「Windows」だった場合、出力は

 ・・・略・・・
  <div class="category win" >Windows</div>
 ・・・略・・・

となります。

 

カテゴリー IDを使って表示する

スタイルシートで装飾を変更したいカテゴリーのIDを確認します。
ダッシュボードの「投稿」>「カテゴリー」を開き、確認したいカテゴリー名をクリックして編集画面を表示します。

ブラウザから表示している「カテゴリー編集画面」のURLを確認します。

http://{WordPressのURL}/wp-admin/term.php?taxonomy=category&tag_ID=6&post_type=・・・

URLの中にある tag_ID= の後ろの数字が「カテゴリーID」になります。

 

スタイルシートで装飾を変更したいカテゴリーIDに対してスタイルを指定します。

【style.css】

.category {
  border-color: #F5F5F5;
  border-left-style: solid;
  border-left-width: 1em;
  padding: 10px;
}
.cat-4 {
  border-color: #FF5722;
}
.cat-5 {
  border-color: #424242;
}
.cat-6 {
  border-color: #2196F3;
}

 

【single.php】のループの中でカテゴリー名を表示させたい場所に以下を書きます。

<?php if(have_posts()): while(have_posts()) : the_post(); ?>
 ・・・略・・・
  <?php 
    $cat = get_the_category();
    $cat_id = $cat[0]->term_id;
    $cat_name = $cat[0]->name;
  ?>
  <div class="category cat-<?php echo $cat_id; ?>" ><?php echo $cat_name; ?></div>
 ・・・略・・・
<?php endwhile; ?>
<?php endif; ?>

 

カテゴリー「Windows」のカテゴリーIDが「6」だった場合、出力は

 ・・・略・・・
  <div class="category cat-6" >Windows</div>
 ・・・略・・・

となります。

 

以上で完了です。

 

  WordPress     by