ヒロックラボの竹村です。カテゴリー背景色を変更する方法は調べるとたくさん見つかりますが、以下の条件に適したものが見つからずとても苦労しました。試行錯誤しながらできた方法をご紹介したいと思います。

  • ・管理画面から色の指定ができる
  • ・カテゴリーを複数表示させる場合にも適応している
  • ・カスタムタクソノミーに対応したもの

「Advanced Custom Fields」での操作方法

「Advanced Custom Fields」で投稿のカテゴリー一覧ページからカテゴリー(タクソノミー)の色を設定できる欄を作成していきます。以下の画像のように登録していきます。

このように設定していくと、投稿＞カテゴリー一覧の画面に色を設定する欄が表示されます。
これで「Advanced Custom Fields」での設定は終了になります。

PHPファイルの編集

タクソノミーを表示させたい部分に以下のコードを貼り付けます。

タクソノミーを1つ表示

<?php
　$this_terms = get_the_terms( $post->ID, 'tech-type' );
　if ( $this_terms ) {
	　$this_term_color = get_field( 'color', 'tech-type_' . $this_terms[0]->term_id );
	　$this_term_name  = $this_terms[0]->name;
	　foreach ( $this_terms as $this_term ) {
	　　echo '<li class="article__category" style="' . esc_attr( 'background:' . $this_term_color ) . ';"><a href="'.get_term_link($this_term).'">'.$this_term->name.'</a></li>';
　　}
　}
?>

タクソノミーを2つ以上表示

<?php
  $this_terms = get_the_terms( $post->ID, 'tech-type' );
	if ( $this_terms ) {
	　$i = 0;
	 $this_term_name  = $this_terms[0]->name;
	 foreach ( $this_terms as $this_term ) {
		　echo '<li class="article__category" style="' . esc_attr( 'background:' . get_field( 'color', 'tech-type_' . $this_terms[$i]->term_id ) ) . ';"><a href="'.get_term_link($this_term).'" >'.$this_term->name.'</a></li>';
	　　$i++;
	　}
  }
?>

タクソノミー1つだけ表示させる場合と2つ以上表示させる場合の違いを解説していきます。

2つ以上表示させる場合は「$this_terms[]」という部分を変更する必要があります。1つのみ表示の場合は「$this_terms[0]」ですが2つ以上のときは「$this_terms[$i]」というように変更します。

get_field( 'color', 'tech-type_' . $this_terms[$i]->term_id )

「$this_terms」というのは変数で、この変数の中には表示されている投稿のカテゴリーが入っています。「$this_terms」の因数に連番を取得する変数を「$i」を定義することでカテゴリーを複数表示することができます。ちなみにカテゴリーを複数登録しているにも関わらず「$this_terms[0]」というように記載すると一番最後に登録したカテゴリーのみ表示されます。