例えば、TOPページの新着記事一覧やアーカイブページなど記事の一覧部分に該当するカテゴリを表示させたい場合のメモ。
WordPressのループ内でカテゴリリストを出す場合は下記のコードで十分
1 | <?php the_category(); ?> |
上記コードで＜ul＞と＜li＞がセットで出力される。
【出力例】
1 | <ul class="post-categories"> |
2 | <li><a href="×××××" rel="category tag">カテゴリA</a></li> |
3 | <li><a href="×××××" rel="category tag">カテゴリB</a></li> |
＜ul＞と＜li＞の中身のclass名とかをいじりたい場合
よくあるやり方だったら、カテゴリごとに帯の色を変えたい場合とか
「function.php」に以下のコードを追加する
2 | function categories_label() { |
3 | $cats = get_the_category(); |
4 | foreach($cats as $cat){ |
5 | echo '<li><a href="'.get_category_link($cat->term_id).'" '; |
6 | echo 'class="'.esc_attr($cat->slug).'">'; |
7 | echo esc_html($cat->name); |
そしてカテゴリのリストを表示させたい場所に以下のコードを追加
1 | <ul class="category_list"> |
2 | <?php categories_label() ?> |
これで各カテゴリリストにはスラッグ名がclassに追加されるので、個別にCSSで色をつけていけばOK。
【出力例】
1 | <ul class="category_list"> |
2 | <li><a href="×××××" class="slug_A">カテゴリA</a></li> |
3 | <li><a href="×××××" class="slug_B">カテゴリB</a></li> |
【CSSで色わけ】
2 | background-color: #f00; |
5 | background-color: #ccc; |
