ACFのカラーピッカーで、製品の色を表示するカラーチャートを作成

2024.05.02

プラグイン

以前、ACFのカラピッカーで、背景を変更する方法を紹介しました。今回は、ACFのカラーピッカーで色を選択することで、カラーチャートを作成する方法を紹介します。

出典 : Advanced Custom Fields(ACF)

今回のDEMOは、5色のカラーチャートを表示しています。

ACF COLOR CHART

COLOR

色を選択した場合のみカラーチャートが表示されます。

ACF設定

フィールドグループ名をカラーチャートにして、カラーピッカーフィールドを5つ作成しました。フィールドタイプは、カラーピッカーです。フィールドラベルは、編集画面に表示されるので、わかりやすい名前にします。フィールド名は、PHPに記入するので、ローマ字で、他のACFのフィールド名と被らない名前にします。初期値は空欄にしておきます。戻り値は、16進値文字列にします。

フィールドタイプは、カラーピッカー

フィールドを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;
}