![](https://cxg-design.jp/wp-content/uploads/2024/05/acficondisplaythumb.png)
ACFのチェックボックスで、CLASSを変更してアイコンを表示非表示
前回は、チェックボックスのチェック有無で、CLASSを付与してアイコンのスタイルを変更する方法を紹介しました。今回は、その応用でCLASSを変更して、チェックしたアレルゲンのみ表示する方法を紹介します。
今回のDEMOも、アレルゲンのアイコンです。
チェックボックスをチェックしたアイコンを表示、チェックしていないアイコンを非表示にしています。
ACF設定
フィールドタイプは、チェックボックスです。フィールドラベルに、編集画面に表示する名前、フィールド名にPHPに記入する名前を設定します。選択肢は、値 : ラベルで、改行して入力していきます。戻り値は値です。
![](https://cxg-design.jp/wp-content/uploads/2024/05/5de8ca124a44dce696871b6fc1050484.png)
フィールドタイプは、チェックボックス
設定項目 | 設定値 |
---|---|
フィールドタイプ | チェックボックス |
フィールドラベル | アレルゲン |
フィールド名 | allergen_addclass |
選択肢 | addnyu : 乳 addtamago : 卵 addkomugi : 小麦 addrakkasei : 落花生 addebi : えび addkani : かに addosoba : そば |
初期値 | 空欄 |
戻り値 | 値 |
コード
シングルページループ内に下記コードを入力します。
<div class="allergies_box">
<div class="al_heading">ALLERGEN</div>
<div class="allergenicon_box">
<!-- 乳 -->
<figure class="allergenicon
<?php
$colors = get_field('allergen_addclass');
if( $colors && in_array('addnyu', $colors)){
echo 'add_iconclass';
}
?>
">
<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/svg/allergen_milk_icon01.svg" alt="milk icon" />
<figcaption>MILK</figcaption>
</figure>
<!-- 卵 -->
<figure class="allergenicon
<?php
$colors = get_field('allergen_addclass');
if( $colors && in_array('addtamago', $colors)){
echo 'add_iconclass';
}
?>
">
<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/svg/allergen_egg_icon01.svg" alt="egg icon" />
<figcaption>EGG</figcaption>
</figure>
<!-- 小麦 -->
<figure class="allergenicon
<?php
$colors = get_field('allergen_addclass');
if( $colors && in_array('addkomugi', $colors)){
echo 'add_iconclass';
}
?>
">
<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/svg/allergen_komugi_icon01.svg" alt="komugi icon" />
<figcaption>WHEAT</figcaption>
</figure>
<!-- 落花生 -->
<figure class="allergenicon
<?php
$colors = get_field('allergen_addclass');
if( $colors && in_array('addrakkasei', $colors)){
echo 'add_iconclass';
}
?>
">
<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/svg/allergen_nats_icon01.svg" alt="nats icon" />
<figcaption>PEATUT</figcaption>
</figure>
<!-- えび -->
<figure class="allergenicon
<?php
$colors = get_field('allergen_addclass');
if( $colors && in_array('addebi', $colors)){
echo 'add_iconclass';
}
?>
">
<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/svg/allergen_ebi_icon01.svg" alt="ebi icon" />
<figcaption>SHRIMP</figcaption>
</figure>
<!-- かに -->
<figure class="allergenicon
<?php
$colors = get_field('allergen_addclass');
if( $colors && in_array('addkani', $colors)){
echo 'add_iconclass';
}
?>
">
<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/svg/allergen_kani_icon01.svg" alt="kani icon" />
<figcaption>CRAB</figcaption>
</figure>
<!-- そば -->
<figure class="allergenicon
<?php
$colors = get_field('allergen_addclass');
if( $colors && in_array('addosoba', $colors)){
echo 'add_iconclass';
}
?>
">
<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/svg/allergen_soba_icon01.svg" alt="soba icon" />
<figcaption>SOBA</figcaption>
</figure>
</div>
</div>
CSSでスタイルを整えます。
.allergies_box{
width: 100%;
padding-right:10%;
padding-left:10%;
background:none;
}
.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;
}
.allergenicon_box {
display: flex;
flex-wrap: wrap;
gap: 1em;
width: 100%;
}
.allergenicon {
width: 100px;
height: auto;
text-align: center;
color: #000;
font-weight: 400;
display: none;
}
.allergenicon.add_iconclass {
display: inline;
}
設置
編集画面にチェックボックスが表示されるので、表示させたいアイコンのチェックボックスにチェックします。今回は、乳、小麦、落花生、えび、かににチェックしています。これで完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/05/c3ff0a3deda40bdd8dbcd9b82c5e0cae.png)
表示させたいアイコンのチェックボックスにチェック
以上で今回の説明は終了です。CSSのディスプレイのみで表示非表示ができるようになるので、色々用途が広がりますね。ACFでCLASSを付与できるのでサイトに合わせて色々なデザインを制作することが出来ます。