【wordpress】取得カテゴリーによって色を変更する方法
wordpressを使っていると記事カテゴリーによって色を変えたい、そんな時があると思います。
本記事では、難しい説明はせずすぐに使えるコードを公開しています、勉強中の方、初心者の方は参考にどうぞ。
使ったことのある処理は随時記事にしていこう、ということで備忘録も兼ねています。
カテゴリーによって色分けする？そんなシュチュエーションあるの？
あります、ってかありました。
基礎的な部分だからこそ使えます、実務で使う事もあるので読むだけ読んだほうがいいですよ。
取得したカテゴリーによって分岐させる
タイトルの「カテゴリーによって色を変更する」より、「カテゴリーによって分岐させる」と言った方が正しいです。
色を変更するのは分岐させた上での話にですからね。
さっさとコード見せろって話
論よりコードですよね、以下になります。
single.php
<?php $cats = get_the_category(); ?>
<div class="<?php if($cats[0]->slug == 'news') echo 'news-color'; ?>"></div>まぁそもそもどういう状況なんだという話ですよね。
どういう時に使えるの？実装例を知りたい
いろいろありますが、せっかくなので実例を紹介しますね。
このテーマ管理画面からいろいろ設定できて便利なんだけどカテゴリーに1色しか適応できない
このカテゴリーだけこの色を適応するようにしてくれ
という事が実際にあり、クライアントからお願いされました。
まぁテーマで簡単に実装できた分、かゆい所に手が届かないって話です。
簡単に解決したの？
はい、超簡単な話です。
クライアントは「個別記事(single.php)」内でカテゴリーによって色分けしたいといとのこと。
ちょっとphpをかじっていたらしく自分でやろうとしたものの諦めたみたいです。
専用のファイルで管理されているページの場合（front-page.phpやpage-〇〇.php）はそれぞれにCSSでスタイルを適用すればいい話ですが、
個別記事を管理する「single.php」に関してはそういうわけにはいきません。
それは、
記事の構成は同じでもカテゴリーは異なることがあるから
クラスを指定しただけでは思ったような動きにはなりません、どうすればいいか？
まさに、取得したカテゴリーによって分岐させればいいという話になります。
手順を詳しく解説
さきほどのコードをもう一度見てみましょう。
single.php
<?php $cats = get_the_category(); ?>
<div class="<?php if($cats[0]->slug == 'news') echo 'news-color'; ?>"></div>1行目、ファイルの一番上で記事カテゴリーを取得します。
3行目、ここでカテゴリーのスラッグによって分岐させています。
今回の場合カテゴリーのスラッグが「news」であればnews-colorというクラスを付与する、という事になります。
簡単ですね。
終わりに
この記事を書いてて思った事は「カテゴリー分岐は簡単」ですが。
それ以上に「人に説明するのって難しい」ってことです。
このブログも勉強題材として使っていますが、その一つにライティングスキルがあります。
つくづく書くのって難しい、日本語って難しいなと思います。
内容がごちゃごちゃしている記事ばかりですが、温かい目で見守ってくれればなと思います。
長くなりましたが、以上になります。
Twitterでも情報や経過を発信していますのでフォローよろしくお願いします。
不明点やアドバイスなどありましたら、コメントかTwitterからお願いします。
get_the_categorywordpressシングル分岐取得記事