![](https://cxg-design.jp/wp-content/uploads/2024/04/colorchart_thumb01-1.png)
ACFのカラーピッカーで、製品の色を表示するカラーチャートを作成
以前、ACFのカラピッカーで、背景を変更する方法を紹介しました。今回は、ACFのカラーピッカーで色を選択することで、カラーチャートを作成する方法を紹介します。
今回のDEMOは、5色のカラーチャートを表示しています。
色を選択した場合のみカラーチャートが表示されます。
ACF設定
フィールドグループ名をカラーチャートにして、カラーピッカーフィールドを5つ作成しました。フィールドタイプは、カラーピッカーです。フィールドラベルは、編集画面に表示されるので、わかりやすい名前にします。フィールド名は、PHPに記入するので、ローマ字で、他のACFのフィールド名と被らない名前にします。初期値は空欄にしておきます。戻り値は、16進値文字列にします。
![](https://cxg-design.jp/wp-content/uploads/2024/04/ef2f476e12f7b649a9728b164dc211f6.png)
フィールドタイプは、カラーピッカー
![](https://cxg-design.jp/wp-content/uploads/2024/04/2e4e8f3c44f79e2c3b4e0c7418dd57d7.png)
フィールドを5つ作成
コード
投稿シングルページのループ内に下記コードを記入します。
<div class="colorchart_box">
<div class="acf_heading">COLOR CHART</div>
<div class="colorcharts" >
<?php if (get_field('add_colorchart01')): ?>
<span class='colorchart_circle' style="background-color: <?php the_field('add_colorchart01'); ?>;">
</span>
<?php endif; ?>
<?php if (get_field('add_colorchart02')): ?>
<span class='colorchart_circle' style="background-color: <?php the_field('add_colorchart02'); ?>;">
</span>
<?php endif; ?>
<?php if (get_field('add_colorchart03')): ?>
<span class='colorchart_circle' style="background-color: <?php the_field('add_colorchart03'); ?>;">
</span>
<?php endif; ?>
<?php if (get_field('add_colorchart04')): ?>
<span class='colorchart_circle' style="background-color: <?php the_field('add_colorchart04'); ?>;">
</span>
<?php endif; ?>
<?php if (get_field('add_colorchart05')): ?>
<span class='colorchart_circle' style="background-color: <?php the_field('add_colorchart05'); ?>;">
</span>
<?php endif; ?>
</div>
</div>
CSSでスタイルを整えます。
.colorchart_box{
width: 100%;
padding-right:10%;
padding-left:10%;
}
.acf_heading{
margin: auto;
margin-bottom: 1.5em;
border-bottom: solid 1px #272727;
font-size:1.7em;
font-weight:500;
letter-spacing:0.1em;
}
.colorcharts{
display:flex;
flex-wrap: wrap;
gap: 0.45em;
}
.colorchart_circle{
width:3em;
height:3em;
border-radius:3em;
}
設置
ブロックエディター下にカラーチャートフィールドが表示され、カラーピッカーが5つ表示されています。今回のDEMOは、5つのフィールド全てのカラーを設定しています。
![](https://cxg-design.jp/wp-content/uploads/2024/04/c86016ccd4fea31510890e28a468c28e.png)
カラーピッカーで色指定
![](https://cxg-design.jp/wp-content/uploads/2024/04/ac50e2b7174eb63deda0554934a42b9d.png)
5つのフィールド全てのカラーを設定
3つのみ指定したい場合は、4、5つ目を指定せず、3つのフィールドのみ指定します。
![](https://cxg-design.jp/wp-content/uploads/2024/04/1f9c4dc8899ef82136b070418a4e612e-1.png)
3つのフィールドのみ指定
![](https://cxg-design.jp/wp-content/uploads/2024/05/colorchart_thumb02-1.png)
3つのみ表示されます。
以上で今回の説明は終了です。カラーは、製品ごとに変わることが多いので、カラーピッカーで簡単に変更できると便利ですね。