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

  • Plugin

    • 以前、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;
}

    設置

    ブロックエディター下にカラーチャートフィールドが表示され、カラーピッカーが5つ表示されています。今回のDEMOは、5つのフィールド全てのカラーを設定しています。

    カラーピッカーで色指定

    5つのフィールド全てのカラーを設定

    3つのみ指定したい場合は、4、５つ目を指定せず、3つのフィールドのみ指定します。

    3つのフィールドのみ指定

    3つのみ表示されます。

    以上で今回の説明は終了です。カラーは、製品ごとに変わることが多いので、カラーピッカーで簡単に変更できると便利ですね。

    You may also like