アトリエロワ

ACFでカラーピッカーを使ってカテゴリーごとに色を付け、TOPページのループ内で表示。styleでbackground-colorを変える

ACFカラーピッカーの表示

ACFでカラーピッカーを使ってカテゴリーごとに色を設定し、TOPページのループ内で表示。
下記、styleでbackground-colorを変える場合

<ul>
<?php if ( have_posts() ) : query_posts('cat=1,20&showposts=3'); ?>
<?php while (have_posts()) : the_post(); ?>

<li>
<span class="date"><?php echo get_the_date('Y.m.d'); ?></span>

<span class="cate">
<?php
$category = get_the_category();
if ( $category[0] ) {

echo '<a href="' . get_category_link( $category[0]->term_id ) . '" class="' .$category[0]->category_nicename . '" ' ;
echo 'style="background-color:';
$this_category_color = get_field( 'cate_color', 'category_' . $category[0]->term_id );
$cat_id = get_queried_object()->cat_ID;
$post_id = 'category_'.$cat_id;
echo $this_category_color;
echo '"';						
echo '">' . $category[0]->cat_name . '</a>' ;
}
?>

</span>

<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
</li>

<?php endwhile; endif; ?>
<?php wp_reset_query();?>
</ul>

重要ポイント抜粋

<?php
$category = get_the_category();
if ( $category[0] ) {

$this_category_color = get_field( 'フィールド名', 'category_' . $category[0]->term_id );

$cat_id = get_queried_object()->cat_ID;
$post_id = 'category_'.$cat_id;
echo $this_category_color;  //←#xxxxxxが出る

}
?>

基本：カテゴリーに作成(設定)したカスタムフィールドを表示する

<?php $cat_id = get_queried_object()->cat_ID; $post_id = 'category_'.$cat_id; ?>
<?php the_field('フィールド名',$post_id); ?>

HOME > wordpress設計術 > ACFでカラーピッカーを使ってカテゴリーごとに色を付け、TOPページのループ内で表示。styleでbackground-colorを変える

wordpress設計術

wordpress設計術

+ More