サイトによってはカテゴリごとにデザインを微調整したいことがあります。
例えば記事一覧ページにあるカテゴリ名のテキストの色やその背景色を変更したいとか。
そんなときのためにWordPressでカテゴリIDやカテゴリ名などを取得する方法をご紹介します。
カテゴリID・カテゴリ名・カテゴリのスラッグを取得する
WordPressでカテゴリIDやカテゴリ名、カテゴリのスラッグを取得する記述は以下の通りです。
カテゴリ名を取得
<?php $catgory = get_the_category(); $cat_name = $catgory[0]->cat_name; echo $cat_name; ?>
カテゴリIDを取得
<?php $catgory = get_the_category(); $cat_ID = $catgory[0]->cat_ID; echo $cat_ID; ?>
カテゴリのスラッグを取得
<?php $catgory = get_the_category(); $category_nicename = $catgory[0]->category_nicename; echo $category_nicename; ?>
記述例
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink() ?>">
<div class="tile-text">
<span class="tile-cat tile-cat-<?php $catgory = get_the_category(); $cat_ID = $catgory[0]->cat_ID; echo $cat_ID; ?>" itemprop="keywords"><?php $catgory = get_the_category(); $cat_name = $catgory[0]->cat_name; echo $cat_name; ?></span>
<h2 class="tile-title"><?php the_title(); ?></h2>
</div>
</a>
<?php endif; ?>
1行目がループを始めますよっていう記述、2行目からが記事一覧をタイル型のUIにしたい場合のタイル1つの記述例です。
4行目を見ると、カテゴリ名をspanで囲って、そのspanにカテゴリIDを出すことで「tile-cat-カテゴリID」というクラスをつけるということをやってます。
これは実際に僕が良く使っている方法です。
カテゴリ名やカテゴリIDを取得してどんなことに活用できるのか
カテゴリ名やカテゴリIDを取得してどんなことに活用できるのかというと、例えばこんなことができます。
- ループの中でカテゴリ名の装飾をする
- カテゴリ一覧ページの背景色を変更する
delaymaniaでは色を統一してますが、こういうところをカテゴリに応じてデザインを変えることができるようになります。
アイデア次第でいろいろできると思いますが「カテゴリごとの区別をするため」にデザインを変更したいときにご活用ください。
最後に
サイトによってはカテゴリごとに色を変えたいことってあると思うのでぜひ使ってみてください。
うまく使えばカテゴリのヘッダー画像をカテゴリごとに設定することもできますので、僕も何かの機会に使いたいなと思って引き出しにしまっております。(意外とそういうサイトを作ったことはまだありませんが。)