ACFのチェックボックスの使い方と実務で使える応用方法

WordPress（ワードプレス）の投稿や固定ページの入力項目をカスタマイズできるプラグイン、ACF（Advanced Custom Fields）の機能の一つにチェックボックスがあります。

本記事では、ACFのチェックボックスの設定方法や出力方法といった基本的な使い方から、条件分岐を使って選択肢によって表示内容を変える応用方法などを紹介していきます。

ACFチェックボックスフィールドの使い方と実装手順

ACFのインストール方法

それでは、ACFチェックボックスフィールドの使い方と実装手順を紹介します。まずはWordPressにACFをインストールします。

Advanced Custom Fields (ACF)

上記リンク先のWordPressプラグイン紹介ページからACFをダウンロードし、WordPress管理画面→メニュー→プラグイン→新規追加→プラグインをアップロードし、ACFのインストールと有効化を行うことが可能です。

もしくは、WordPress管理画面→メニュー→プラグイン→新規追加にて、「Advanced Custom Fields」をプラグイン検索し、インストールと有効化を行います。

ACFのインストール後、WordPress管理画面のメニューに「カスタムフィールド」が追加されます。

Advanced Custom Fieldsの基本的な使い方と全フィールドタイプの紹介

ACFチェックボックスフィールドの設定方法

ACFのインストールが完了したら、続いてはチェックボックスフィールドの設定を行います。

メニュー→カスタムフィールド→フィールドグループ→「新規追加」をクリックします。

フィールドを追加し、下記の通りにフィールド設定の各項目を設定します。

このフィールドグループを表示する条件では、基本的に「投稿」や「ページ」を使います。

WordPressデフォルトの投稿で使用する場合は、「投稿タイプ」等しい「投稿」といった組み合わせです。
固定ページで使用する場合は、「ページ」等しい「会社概要ページ」といった組み合わせです。

※返り値について、本記事では「Both」を選択した場合での内容になります。

Allow Custom

フィールドタイプの設定時とは別に、投稿や固定ページの編集画面上で選択肢を自由に追加できるのが「Allow Custom」です。

Allow Customで「はい」を選択すると、「Save Custom」という項目が表示されます。Save Customを有効にすると、編集画面で自由に追加した選択肢をWordPress内に保存し、他の投稿や固定ページで同じ選択肢を使い回すことができます。

ユーザーの手間を減らすため、サイト上での表記を統一するためにも、Allow Customを使用する場合はSave Customを有効にしましょう。

Allow Customを使用する場合、上記のように編集画面のチェックボックスフィールドに「Add new choice」というボタンが追加されます。

「Add new choice」をクリックすると、新たにチェックボックスとテキストフィールドが追加され、任意の選択肢を入力することができます。

Allow Customを使用する場合の注意点

Allow Customを使用する場合、編集画面で新たに追加される項目はラベルとなっています。例のように日本語が選択肢として追加されると、「読書」といった日本語が返り値となります。

チェックボックスの値（value）を元に条件分岐などを行なっている場合、英数字ではなく日本語を使用してしまうと、思わぬエラーの原因となるため、単純にラベルを出力させる以外では、Allow Customの使用は控えましょう。

編集画面でのACFチェックボックスフィールドの使い方

ACFチェックボックスフィールドの設定が完了したら、投稿や固定ページの編集画面でどのように表示されるかを紹介します。

投稿や固定ページのブロックエディタやコンテンツエディタの他に、上記スクショのように新たにチェックボックスが設置されます。

上記スクショでは、トグル設定を「はい」にしているため、「全て 選択 / 解除」の選択肢が追加されています。

ACFチェックボックスフィールドの出力方法

それでは、実際に編集画面で選択したチェックボックスフィールドをサイトに表示させる方法を紹介します。

チェックボックスのラベルの出力と使い方

まずはチェックボックスで選択したラベルを表示させる方法を紹介します。

<?php
// 選択したチェックボックスの情報を取得
$hobbies = get_field('hobbies');
if($hobbies): ?>
<ul>
  <?php foreach( $hobbies as $hobby ): ?>
    <li>
      <?php
      // チェックボックスのラベルを出力
      echo $hobby['label'];
      ?>
    </li>
  <?php endforeach; ?>
<ul>
<?php endif; ?>

「get_field」でチェックボックスのフィールド名を取得し、チェックボックスのラベルを出力しています。

チェックボックスの値（value）の出力と使い方

続いて、値の出力と使い方を紹介します。

<?php
// 選択したチェックボックスの情報を取得
$hobbies = get_field('hobbies');
if($hobbies): ?>
<style>
.baseball { color: #FF0000; }
.soccer { color: #0000FF; }
</style>
<ul>
  <?php foreach( $hobbies as $hobby ): ?>
    <li class="<?php
      // チェックボックスの値を出力
      echo $hobby['value'];
      ?>">
      <?php
      // チェックボックスのラベルを出力
      echo $hobby['label'];
      ?>
    </li>
  <?php endforeach; ?>
<ul>
<?php endif; ?>

上記の例では、選択したチェックボックスの値によって、ラベルの文字色が変わるようにclassを付与しています。

野球を選択した場合は、liにbaseballというclassが付与されて文字色が赤になります。サッカーを選択した場合は、liにsoccerというclassが付与されて文字色が青になります。

<?php
// 選択したチェックボックスの情報を取得
$facilities = get_field('facilities');
?>
<?php
foreach( $facilities as $facility ):
$facilityValue = $facility['value'];
?>
  <?php if($facilityValue === 'tv'): ?>
    <div>
      <h3><?php echo $facility['label']; ?></h3>
      <p>テレビの説明文を記述します。</p>
    </div>
  <?php elseif($facilityValue === 'onsen'): ?>
    <div>
      <h3><?php echo $facility['label']; ?></h3>
      <p>客室露天風呂の説明文を記述します。</p>
    </div>
  <?php elseif($facilityValue === 'balcony'): ?>
    <div>
      <h3><?php echo $facility['label']; ?></h3>
      <p>バルコニーの説明文を記述します。</p>
    </div>
  <?php else: ?>
  <?php endif; ?>
<?php endforeach; ?>

<?php
$args = array(
  'post_type' => 'post',
  // カスタムフィールドを取得します
  'meta_query' => array(
    array(
      // チェックボックスフィールドを取得
      'key'   => 'hobbies',
      'value' => 'baseball',
      'compare' => 'LIKE'
    )
  )
);
$the_query = new WP_Query( $args );
?>
<?php if ($the_query->have_posts()): ?>
  <?php while($the_query->have_posts()): $the_query->the_post(); ?>
    <h2><?php the_title(); ?></h2>
  <?php endwhile; ?>
<?php else: ?>
  <p>投稿がありません。</p>
<?php endif; ?>