【 更新 】おすすめ記事はこちら

WordPress

【WordPress】色分けしたカテゴリラベルを作る

お知らせ一覧などのリスト表示で見かける、カテゴリラベルの作成、設置方法をご紹介！

カテゴリごとにCSSで色分けするので、記事が分類でき、関連性も分かりやすくなります。

本記事では「リンクなし」でラベルを出力します。リンクをつけるときは以下をチェック。

関連記事【WordPress】リンク付きカテゴリを表示する

表示するのが、1つのリストにつき、1つのラベルなら、1つだけラベルを設置の見出しを。

1つのリストにつき、複数のラベルなら、2つ以上ラベルを設置の見出しをご覧ください。

はじめに

以下内容を読んでから、ラベルの数に応じた見出しに移ると作業がスムーズです。

カテゴリ情報を取得

まずはget_the_category()でカテゴリ情報を取得。情報は「配列」で返ってきます。

取得した全情報は、categoryの省略形で$catと命名した変数に代入。

<?php
$cat = get_the_category();
?>

カテゴリを複数取得するときは、変数名を$catsに変えると後々分かりやすいですよ！

スラッグを取得

次にカテゴリ情報が入った$catに配列の1番目[0]を指定し、slugを取り出します。

取り出したデータは、$cat_slugと命名した変数に代入。

<?php
$cat = get_the_category();
$cat_slug = $cat[0] -> slug; // 追加
?>

同じように、カテゴリを複数取得するときは、$cats_slugと複数形に変えておきます。

スラッグを表示

取得したスラッグをechoで出力して内容を確認します。

HTMLタグがないため、スタイルなしで表示されますが、エラーが出ていなければOK。

<?php echo esc_html($cat_slug); ?>

1つだけラベルを設置

今回はお知らせ一覧などの繰り返し表示を想定しているため、以下のループ内で使用します。

<?php if(have_posts()): ?>
    <?php while(have_posts()): the_post(); ?>
        <!-- 繰り返し処理する内容 -->
    <?php endwhile; ?>
<?php else: ?>
    <!-- 取得できない場合に処理する内容 -->
<?php endif; ?>

PHPとCSSファイルの完成形はこちら。詳細はこのコードより後の見出しで解説しています。

<?php
$cat = get_the_category();
$cat_slug = $cat[0] -> slug;
$cat_name = $cat[0] -> name;
?>
<span class="c-label c-label--<?php echo esc_html($cat_slug); ?>">
    <?php echo esc_html($cat_name); ?>
</span>
@charset "utf-8";

/* ラベル共通 */
.c-label {
    display: inline-block;
    padding: 0.2em 0.5em;
    font-size: 0.8em;
    background-color: #cccccc;
}
/* ラベルカテゴリ別 */
.c-label--yourcategoryslug {
    background-color: #fff100;
}

カテゴリ名を取得

スラッグを取得のときと同じようにカテゴリ名を取得します。

$catに配列の1番目[0]を指定し、nameでカテゴリ名を取り出してください。

<?php
$cat = get_the_category();
$cat_slug = $cat[0] -> slug;
$cat_name = $cat[0] -> name; // 追加
?>

取り出したデータを$cat_nameに代入して、取得作業は完了です。

カテゴリ名を表示

取得したカテゴリ名をechoで出力します。

HTMLタグがないため、スタイルなしで表示されますが、エラーが出ていなければOK。

<?php echo esc_html($cat_name); ?>

ラベルスタイルを設定

見た目を整えたものがこちら。$cat_nameは<span>で囲み、$cat_slugはタグに出力しています。

$cat_slugについては、クラス名の一部とすることで、スラッグ（＝カテゴリ）ごとにスタイルを指定できる仕様にしています。

<?php
$cat = get_the_category();
$cat_slug = $cat[0] -> slug;
$cat_name = $cat[0] -> name;
?>
<span class="c-label c-label--<?php echo esc_html($cat_slug); ?>">
    <?php echo esc_html($cat_name); ?>
</span>

CSSは自由に変えてください。あとで調整しやすいよう配置関連のプロパティはつけていません。

@charset "utf-8";

/* ラベル共通 */
.c-label {
    display: inline-block;
    padding: 0.2em 0.5em;
    font-size: 0.8em;
    background-color: #cccccc;
}
/* ラベルカテゴリ別 */
.c-label--yourcategoryslug {
    background-color: #fff100;
}

2つ以上ラベルを設置

今回はお知らせ一覧などの繰り返し表示を想定しているため、以下のループ内で使用します。

<?php if(have_posts()): ?>
    <?php while(have_posts()): the_post(); ?>
        <!-- 繰り返し処理する内容 -->
    <?php endwhile; ?>
<?php else: ?>
    <!-- 取得できない場合に処理する内容 -->
<?php endif; ?>

PHPとCSSファイルの完成形はこちら。詳細はこのコードより後の見出しで解説しています。

<ul class="p-labels">
    <?php
    $cats = get_the_category();
    $cats_slug = '';
    $cats_name = '';
    foreach ($cats as $cat) :
        $cats_slug = $cat -> slug;
        $cats_name = $cat -> name;
    ?>
        <li class="p-labels__item">
            <span class="c-label c-label--<?php echo esc_html($cats_slug); ?>">
                <?php echo esc_html($cats_name); ?>
            </span>
        </li>
    <?php endforeach; ?>
</ul>
@charset "utf-8";

/* ラベル共通 */
.c-label {
    display: inline-block;
    padding: 0.2em 0.5em;
    font-size: 0.8em;
    background-color: #cccccc;
}
/* ラベルカテゴリ別 */
.c-label--yourcategoryslug {
    background-color: #fff100;
}

カテゴリ名を取得

先に空っぽの$cats_nameを用意して、foreachで取り出していく要素（各カテゴリ名）を入れられるようにしておきます。

<?php
$cats = get_the_category();
$cats_slug = $cats[0] -> slug;
$cats_name = ''; // 追加
?>

foreachのカッコには、$catsから要素を1つずつ取得し、$catに保存するという処理を記述。

<?php
$cats = get_the_category();
$cats_slug = $cats[0] -> slug;
$cats_name = '';
foreach($cats as $cat): // 追加
?>

その処理内容に、$catからnameでカテゴリ名を取り出して、$cats_nameに代入する旨を書き加えます。

<?php
$cats = get_the_category();
$cats_slug = $cats[0] -> slug;
$cats_name = '';
foreach($cats as $cat):
    $cats_name = $cat -> name; // 追加
?>

スラッグの取得方法を変更

さらに、スラッグもカテゴリごとに取得する必要があるので、foreachの中に移動します。

このとき、空の$cats_slugも併せて用意してください。

<?php
$cats = get_the_category();
// $cats_slug = $cats[0] -> slug; // 削除
$cats_slug = ''; // 追加
$cats_name = '';
foreach($cats as $cat):
    $cats_slug = $cat -> slug; // 追加
    $cats_name = $cat -> name;
?>

Foreach文で先頭の要素から順に処理（カテゴリ1、カテゴリ2…）していくため、配列[0]は書かなくてOK。

最後に終了宣言であるendforeachを忘れずに追記してください。

<?php
$cats = get_the_category();
$cats_slug = '';
$cats_name = '';
foreach($cats as $cat):
    $cats_slug = $cat -> slug;
    $cats_name = $cat -> name;
?>
<?php endforeach; ?><!-- 追加 -->

カテゴリ名とスラッグを表示

取得したカテゴリ名をechoで出力します。

HTMLタグがないため、スタイルなしで表示されますが、エラーが出ていなければOK。

<?php echo esc_html($cats_slug); ?>
<?php echo esc_html($cats_name); ?>

カテゴリを複数取得するため、foreachとendforeachのPHPブロック間に入れます。

ラベルスタイルを設定

見た目を整えたものがこちら。ラベルを複数表示するため、全体を<ul>で囲み、<li>でラベル本体の<span>を囲みます。

$cats_slugについては、クラス名の一部とすることで、スラッグ（＝カテゴリ）ごとにスタイルを指定できる仕様にしています。

<ul class="p-labels">
    <?php
    $cats = get_the_category();
    $cats_slug = '';
    $cats_name = '';
    foreach ($cats as $cat) :
        $cats_slug = $cat -> slug;
        $cats_name = $cat -> name;
    ?>
        <li class="p-labels__item">
            <span class="c-label c-label--<?php echo esc_html($cats_slug); ?>">
                <?php echo esc_html($cats_name); ?>
            </span>
        </li>
    <?php endforeach; ?>
</ul>

CSSは自由に変えてください。あとで調整しやすいよう配置関連のプロパティはつけていません。

@charset "utf-8";

/* ラベル共通 */
.c-label {
    display: inline-block;
    padding: 0.2em 0.5em;
    font-size: 0.8em;
    background-color: #cccccc;
}
/* ラベルカテゴリ別 */
.c-label--yourcategoryslug {
    background-color: #fff100;
}

おわりに

カテゴリラベルに色をつけることで記事が分類され、関連性がより分かりやすくなりました！

サンプルのコードは、タグやスタイルのカスタマイズにも対応できるよう、取得と出力とで分けて書いています。

分けずにそのまま埋め込みたいというときは、一例ですが、以下のような書き方をしてもOK。

<?php $cat = get_the_category(); echo esc_html($cat[0] -> name); ?>

今回の内容をベースに、<span>を<div>に変える、ラベル内にスラッグを表示するなど、色々と作り変えてみてください。