📌

WordPress カラーピッカーでカテゴリーの色を変更する

2023/08/13に公開

WordPress カラーピッカーでカテゴリーの色を変更します

ACFでカテゴリーに対してカラーピッカーを設定する

カテゴリー一覧画面

それぞれの色を編集画面で変えます

コード

get_fieldで色コードを抜き出し、stlyeを付与します

category.php
<?php if( have_posts() ) : ?>
<ul class="p-blog-list__items">
  <?php while( have_posts() ) : 
    the_post($args);
  ?>
  <li class="p-blog-list__item p-blog-item">
    <a href="<?php the_permalink(); ?>" class="p-blog-item__link">
      <!-- 中略 -->
      <div class="p-blog-item__footer">
      <?php 
        $category = get_the_category();
        $taxonomy_name = "category";
        $cats_term_id = $category[0]->term_id;
        $cats_color = get_field("color_picker", $taxonomy_name . "_" . $cats_term_id);
        $styleBg = 'style="background: ' . esc_attr($cats_color) . ';"';
      ?>
        <p class="p-blog-item__tag" <?php if($cats_color) { echo $styleBg; } ?>>
        <?php
          if ( $category[0] ) {
            echo $category[0]->cat_name;
          }
        ?>
        </p>
        <time class="p-blog-item__date" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y-m-d'); ?></time>
      </div>
    </a>
  </li>
  <?php
    endwhile;
    wp_reset_postdata();
  ?>
</ul>

色分けできた

Discussion