お知らせ一覧などのリスト表示で見かける、カテゴリラベルの作成、設置方法をご紹介!
カテゴリごとにCSSで色分けするので、記事が分類でき、関連性も分かりやすくなります。
本記事では「リンクなし」でラベルを出力します。リンクをつけるときは以下をチェック。
表示するのが、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>
に変える、ラベル内にスラッグを表示するなど、色々と作り変えてみてください。