Webデザイナーとして活動しているサブローのブログです。
  • HOME
  • WordPressで記事が属する複数のカテゴリを出力しつつクラスにスラッグ名を付けて色分けしたりする方法
2017 1 10

WordPressで記事が属する複数のカテゴリを出力しつつクラスにスラッグ名を付けて色分けしたりする方法

この記事は3分ほどで読めます
この記事をSNSでシェアする方はこちら

どうも、サブロー(@saburo_design)です。

タイトルがやたら長くなってしまいましたが書いてある通り、WordPressで記事が属する複数のカテゴリを出力しつつクラスにスラッグ名を付ける方法をご紹介したいと思います。私もこれを使う前はそのぐらい簡単に出来るだろとか思っていたんですが、インターネットで調べても調べてもそれらしき方法がなかなか見つからず、先日ようやくやり方が分かりました。

任意の場所にコードをコピペする

やりたかった事としては、記事が属するカテゴリーを色分けして出力したかったわけですが、カテゴリーを複数出力する方法とスラッグ名をクラスに付ける方法はそれぞれあっても両方を実現する方法がなかなか見つかりませんでした。ようやく実装できたのが以下のコードです。任意の場所にコピペしてください。

<ul>
<?php
$terms = get_the_terms( $post->ID, 'category' );
if ($terms && ! is_wp_error($terms)): ?>
<?php foreach($terms as $term): ?>
<li class="<?php echo $term->slug; ?>"><a href="<?php echo get_term_link( $term->slug, 'category'); ?>"><?php echo $term->name; ?></a></li>
<?php endforeach; ?>
<?php endif; ?>
</ul>

すると以下のようにHTMLタグが出力されるはずです。

<ul>
<li class="Aスラッグ名"><a href="Aリンク">記事が属するカテゴリーA</a></li>
<li class="Bスラッグ名"><a href="Bリンク">記事が属するカテゴリーB</a></li>
<li class="Cスラッグ名"><a href="Cリンク">記事が属するカテゴリーC</a></li>
</ul>

まとめ

あとはclassのスラッグ名を指定してcssで色を変えるなりカスタマイズすればやりたかった事は実装できました。リンクなしで出力したい場合もaタグを削除するだけなので簡単ですね。

この記事をSNSでシェアする方はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Profile

Web・グラフィックデザイナー
Webデザイナーやってます。WordPressの技術録やプラグインの紹介、ブログを運営して分かったことからプライベートな事まで、興味ある事・気になる事を色々書いて行こうと思います。ツイッターとかインスタグラムもやってますのでよければフォローしてください。
PAGETOP
Copyright © SABURO DESIGN All Rights Reserved.