[WordPress]記事一覧でカテゴリ名を色分け・文言を変えて表示する方法

WordPressを使っている方向けに、記事一覧を表示する際に、各記事のカテゴリ名も併せて表示させる方法を紹介します。

  • カテゴリページへのリンクあり/無しで表示する方法
  • カテゴリ毎に色を変えて表示する方法
  • カテゴリ名と、表示する文言を変える方法(カテゴリ名が長い方へおすすめ)

上の2つは他サイトでも紹介されていますが、3つ目は無かったので参考になる方がいれば幸いです。

カテゴリの表示(リンクあり・無し)

リンクあり

the_category(); でカテゴリ名を取得できます。自動的に、カテゴリページへのリンクも表示されます。

ただ、テキストの装飾がしづらくなるので、個人的にはあまり好きではありません(白文字にしたくて無理やり !importantを使っても変わってくれなかったり)

表示例
WordPressでカテゴリ名を表示する

リンク無し

get_the_category(); を使います。カテゴリーIDやカテゴリーの説明など様々な値を取得できます。今回はカテゴリ名 cat_name を取り出します。

記事タイトルを取得するget_posts()ループは省略していますが、1つ目のコードと同様です。

表示例
WordPressでカテゴリ名を表示する

カテゴリ毎に色を変えて表示する

このように、カテゴリ毎に色を変えて表示すると視覚的に見分けやすくなります。

表示例
WordPressでカテゴリ名を表示する

まず、get_the_category(); から記事のカテゴリスラッグ slug を取得し、変数catslugに格納しておきます。
カテゴリ名を囲うspanタグのclassにこのcatslugの値を使うことで、カテゴリ単位でCSSを適用できるようにしています。
先程と同様に、get_posts()ループの中で記述します。

※スラッグとは、urlで使う文字列のことです。投稿ページの「投稿」->「カテゴリ」にて、カテゴリ一覧の「スラッグ」という項目を確認して下さい。

リンクありで表示したい場合は、<!– 記事タイトル –> の <span>~</span> の間を <?php the_category(); ?> に置き換えてください。

次にCSSのサンプルです。floatを使わずシンプルにinline-block で並べています。
(本人もfloatの使い方が怪しくなったのが正直なところです…)

サンプルでは、”wordpress” “personal-diary” “childcare” がカテゴリスラッグにあたります。

カテゴリ名の文言を変えて表示

カテゴリ名が長い場合に、記事一覧に表示すると場所をとったり文字を小さくすると見にくくなったりしますよね。

WordPressでカテゴリ名を表示する

カテゴリ名は変えたくないけど、記事一覧で表示するときは文言をシンプルにしたい、という方にオススメです。
(ただし、ご紹介できるコードはリンク無しバージョンのみです。)

カテゴリ名をget_the_category(); で取得したあとに、if文を使って特定のカテゴリ名の時だけ、echoで出力する値を別途指定しています。カテゴリが3つ以上あるときは、elseif の行を増やしてください。

今までのコードの、<!– カテゴリ名 –> ~ <!– 記事タイトル –>の間のコードを以下と置き換えます。

まとめ

全部合わせると、以下のようになります。

参考になりましたら幸いです。

あとがき

今回、初めてコードを掲載する記事を書くにあたって、コードのを埋め込み方法としてはプラグインがメジャーのようですが、検索する中でプラグインレスのGistを使う方法が紹介されていたので、少し敷居が高い気もしたのですが挑戦してみました。

WordPressでコードをお手軽に表示するにはプラグイン要らずのGistがオススメ!シンタックスハイライトも最近の言語に即対応

見栄えもいいですし、コード管理も楽なのでこのまま使っていこうと思います。

ちなみにGistは、GitHub(ソースコード管理サービス)の提供する、断片コードの管理・共有サービスです。

私が以前に”GitHub”の名に触れたのは、GravatarがGitHubにも対応していた事と、ちょうど最近、元CHAGE and ASKAのASKA容疑者が再逮捕される前の電話取材にて「ギフハブという組織が・・・」といっていたのがGitHubの事なんじゃないかとニュースで取り上げられていた時ですね・・・。タイムリーなのか何なのか。

それにしても今は便利なコード管理ツールがあるんですね。学生時代の卒業研究でソフトを作っていた時のコード管理は単独作業であっても面倒だし、それは悲惨なものでした・・・。

コメントを残す

※表示されるアバターの変更は、こちらをご覧ください。

JPEG画像のみ添付することができます

*