ACFの真/偽で、アイコンをチェックボックスで選択して表示

  • Plugin

    • ACFでは、チェックボックス、ラジオボタンなどを選択して、文字などを表示することができます。前回は、チェックボックスで、リスト表示する方法を紹介しました。今回は、ACFの真/偽で、アイコンをチェックボックスで選択して表示する方法を紹介します。

     出典 : Advanced Custom Fields(ACF)

    今回のDEMOは、アレルゲンマークを表示しています。

    ACF ICON

    ICON

    7大アレルゲンをチェックボックで、必要なものをチェックすると、投稿に表示されます。今回は、全てのアイコンを表示しています。

    アイコン作成

    今回は、AIで卵、乳、小麦、えび、かに、落花生、そばのアレルゲンのアイコンを作成しました。SVGで書き出します。

    ACF設定

    まず、ACFの設定をします。新たなフィールドグループを作成し、フィールドグループ名にアレルゲンアイコンとします。フィールドグループを真/偽にします。編集画面に表示するフィールドラベルに卵、PHPに記入するフィールド名をadd_eggにし、保存します。

    フィールドグループを真/偽に。フィールドラベル、フィールド名を入力し保存。

    設定項目設定値
    フィールドタイプ真/偽
    フィールドラベル卵
    フィールド名add_egg
    メッセージ空欄
    初期値チェック無

    他の乳、小麦、えび、かに、落花生、そばも同じように、フィールドラベル、フィールド名を変えて、作成します。

    7つのフィールドを作成

    コード

    PHP、CSSの設定をしていきます。尚、コードはWeb制作時に設定するので、管理者には必要ありません。

    まず、設置したいシングルページのループ内に下記のコードを入力します。

    <div class="allergies_box">
	<div class="al_heading">ALLERGEN</div>
	<?php if (get_field('add_egg')): ?>
		<span class='allergen_icon'>
			<img src="<?php echo esc_url(get_theme_file_uri('/assets/images/egg01.svg')); ?>" alt="卵" >
		</span>
	<?php endif; ?>
	<?php if (get_field('add_milk')): ?>
		<span class='allergen_icon'>
			<img src="<?php echo esc_url(get_theme_file_uri('/assets/images/milk01.svg')); ?>" alt="乳" >
		</span>
	<?php endif; ?>
	<?php if (get_field('add_wheat')): ?>
		<span class='allergen_icon'>
			<img src="<?php echo esc_url(get_theme_file_uri('/assets/images/wheat01.svg')); ?>" alt="小麦" >
		</span>
	<?php endif; ?>
	<?php if (get_field('add_shrimp')): ?>
		<span class='allergen_icon'>
			<img src="<?php echo esc_url(get_theme_file_uri('/assets/images/shrimp01.svg')); ?>" alt="えび" >
		</span>
	<?php endif; ?>
	<?php if (get_field('add_crab')): ?>
		<span class='allergen_icon'>
			<img src="<?php echo esc_url(get_theme_file_uri('/assets/images/crab01.svg')); ?>" alt="かに" >
		</span>
	<?php endif; ?>
	<?php if (get_field('add_peanut')): ?>
		<span class='allergen_icon'>
			<img src="<?php echo esc_url(get_theme_file_uri('/assets/images/peanut01.svg')); ?>" alt="落花生" >
		</span>
	<?php endif; ?>
	<?php if (get_field('add_soba')): ?>
		<span class='allergen_icon'>
			<img src="<?php echo esc_url(get_theme_file_uri('/assets/images/soba01.svg')); ?>" alt="そば" >
		</span>
	<?php endif; ?>
</div>

    次に、CSSの設定をします。これは、投稿テンプレートのデザインに合わせて設定します。

    .allergies_box{
	width: 100%;
	padding-right:10%;
	padding-left:10%;
}

.allergies_box .al_heading{
	margin: auto;
	margin-bottom: 1.5em;
	border-bottom: solid 1px #272727;
	font-size:1.7em;
	font-weight:500;
	letter-spacing:0.1em;
}

.allergies_icons{
	display:flex;
	flex-wrap: wrap;
	gap: 0.45em;
}

.allergen_icon {
	width: 4.5em;
	height: 4.5em;	
}

.allergen_icon img{
	width: 4.5em;
	height: 4.5em;
}

    設置

    ブロックエディターの編集画面の下にアレルゲンアイコンのチェックボックスが表示されています。表示したいアレルゲンにチェックを入れると表示されます。これで完成です。

    表示したいアレルゲンにチェックを入れる

    DEMOでは、全てのアイコンを表示していますが、えび、落花生のチェックを外すと、非表示になります。

    えび、落花生のチェックを外すと

    非表示になります。

    これで、今回の説明は終了です。チェックボックスのみでアイコンを設置できるので、簡単ですね。テンプレートページでは、このようにACFで設定しておけば、レイアウト不要なのでとても便利です。

    You may also like