2025.09.25最終更新日：2025.09.25

【ACF】チェックボックスを全項目出力しつつ、チェック済みにだけクラスを付ける方法

Advanced Custom Fieldsの項目全部表示＆チェックだけデザイン変更

こんにちは。五平餅くんです。

WordPress のカスタムフィールドを便利に管理できるプラグイン Advanced Custom Fields (ACF)。
チェックボックス項目を作成すると、「選択された項目」だけを出力するのが一般的ですが、「全ての候補を表示しつつ、チェックされている項目にだけクラスを付与したい」というケースもあります。

例えば、商品ページで「原材料一覧」を表示するときに、チェックがついたものだけアイコンやスタイルを変えるといったデザインが可能になります。

こんなイメージです。

ACF のチェックボックスで 「バナナ」「マンゴー」「りんご」 などを登録
画面には「全ての原材料候補」を表示
チェックがついている項目だけ、CSSでチェックマークを表示

完成イメージはこんな感じです。

✅ 項目名 … チェックあり
⬜️ 項目名 … チェックなし

今回の記事の完成形は↓になります。

デモはこちら

それでは、カスタムフィールドのチェックボックスで全項目を出力しつつ、チェックボックスを全項目出力しつつ、チェック済みにだけクラスを付けてcssでデザインを整える方法をご紹介します！

1 結論：実装方法
2 コード解説
3 CSSでチェックマークを追加
4 まとめ

結論：実装方法

それではいきなり結論ですが、実装方法を順番に見てきましょう。

手順1：カスタムフィールドを登録

まずはAdvanced Custom Fields (ACF)でチェックボックスを登録します。

手順2：記事にチェックを入れる

そしてカスタム投稿記事の編集ページで、カスタムフィールドにチェックを入れます。

手順3：コードを追加

以下のコードを、該当するテンプレートファイル（例：single.php や content-single.php）に追加します。

<?php if( get_field('product_materials') ) : ?>
<div class="materials">
	<h2>原材料</h2>
	<div class="materials-main">
		<div class="layout-box">
			<ul class="materials-list">
				<?php
				// チェックボックスフィールドの情報を取得
				$materials_obj   = get_field_object('product_materials');
				$materials_field = get_field('product_materials');
				$materials_items = $materials_obj['choices'];

				// 全項目をループ
				foreach ( $materials_items as $key => $value ):
					// チェックされているか判定
					$checked = in_array( $key, $materials_field ) ? 'checked' : '';
				?>
				<li class="materials-item">
					<p class="materials-txt <?php echo $checked; ?>">
						<?php echo $value; ?>
					</p>
				</li>
				<?php endforeach; ?>
			</ul>
		</div>
	</div>
</div>
<?php endif; ?>

コード解説

とりあえず実装できればOKという方は、ここから先は飛ばしてOKです。

1. `get_field('product_materials')` で値があるかチェック

<?php if( get_field('product_materials') ) : ?>

get_field() は ACF で作ったフィールドの値を取得する関数です
チェックボックスで何も選ばれていない場合は false になるので、ここで「値がある場合だけ表示する」という条件を付けています

2.フィールド情報と選択済み値を取得

$materials_obj   = get_field_object('product_materials');
$materials_field = get_field('product_materials');
$materials_items = $materials_obj['choices'];

get_field_object() … チェックボックスの「設定情報」を取得
選択肢の名前や値を確認できます
$materials_field … 実際にチェックされている値の配列
$materials_items … チェックボックスで設定した全選択肢の配列
つまり「全候補」と「チェックされた値」を分けて扱っています

3. `foreach` で全項目をループ

foreach ( $materials_items as $key => $value ):

$materials_items の項目名（ $key => $value ）を全て順番に表示する
これで「全ての候補」を順番に出力できます

4. チェック済みか判定してクラス付与

$checked = in_array( $key, $materials_field ) ? 'checked' : '';

in_array(値, 配列) … 配列に値が含まれているか調べる関数
チェックされている場合は 'checked' というクラス名を付与
付与したクラスは CSS でチェックマーク表示に使います

5. HTMLに出力

<li class="materials-item">
	<p class="materials-txt <?php echo $checked; ?>">
		<?php echo $value; ?>
	</p>
</li>

<li> でリストのアイテムを作成
<p> に checked クラスを追加して、CSSで見た目を変えます
$value でラベル名（例：バナナ、マンゴー、りんご）を表示

ここまでのコードを組みわせて、最終的にはこんな感じになります。

<?php if( get_field('product_materials') ) : ?>
・・・
<?php
// チェックボックスフィールドの情報を取得
$materials_obj   = get_field_object('product_materials');
$materials_field = get_field('product_materials');
$materials_items = $materials_obj['choices'];

// 全項目をループ
foreach ( $materials_items as $key => $value ):
	// チェックされているか判定
	$checked = in_array( $key, $materials_field ) ? 'checked' : '';
?>
<li class="materials-item">
	<p class="materials-txt <?php echo $checked; ?>">
		<?php echo $value; ?>
	</p>
</li>
<?php endforeach; ?>
・・・
<?php endif; ?>

※一部htmlを省略しています。

CSSでチェックマークを追加

cssで装飾すれば完成です。

.materials {
  margin-top: 40px;
}

.materials-list {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}
@media screen and (max-width: 767px) {
  .materials-list {
    grid-template-columns: 1fr;
  }
}

.materials-main {
  margin-top: 20px;
}

/* チェックボックス風 */
.materials-txt {
  position: relative;
  padding-left: 1.25em;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: .03em;
}
.materials-txt::before {
  content: '';
  position: absolute;
  top: .4em;
  left: 0;
  height: 1em;
  width: 1em;
  border: 2px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* チェック済み */
.materials-txt.checked::after {
  content: '';
  position: absolute;
  left: .3em;
  top: .5em;
  width: .4em;
  height: .6em;
  border: 2px solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

このcssを適用すると、↓の感じになります。

デモはこちら

※表示されているチェックの色などは、サンプルと多少違っています。