ACFのグループフィールドの使い方と実装例の紹介

WordPressの投稿や固定ページの入力項目をカスタマイズできるプラグイン、Advanced Custom Fields（ACF）のグループフィールドの使い方と実装例を紹介します。

カスタムフィールドが増えすぎて編集画面が使いにくくなった場合でも、ACFグループ（Group）フィールドを使うことで入力項目が整理されて視認性が向上し、編集しやすくなります。

本記事では、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デフォルトの投稿で使用する場合は、「投稿タイプ」等しい「投稿」といった組み合わせです。
固定ページで使用する場合は、「ページ」等しい「会社概要ページ」といった組み合わせです。

テキストフィールドや画像フィールドなどを同じグループとして使いたい場合に、グループフィールドを活用します。グループフィールドのサブフィールドとして、テキストや画像フィールドをまとめます。

本記事では、会社概要というグループフィールドを例とし、サブフィールドに会社名（テキストフィールド）と所在地（テキストエリアフィールド）を設定します。

編集画面でのACFグループフィールドの使い方

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

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

会社名、所在地がサブフィールドとして、会社概要（グループフィールド）にまとめられています。

レイアウトを「行」で設定しているため、視認性も向上しています。

ACFグループフィールドの出力方法

それでは、実際に編集画面で入力したグループフィールドを出力し、サイトに表示させる方法を紹介します。

<?php
$companyInfo = get_field('company_info');
?>
<h3>会社概要</h3>
<dl>
  <dt>会社名</dt>
  <dd><?php echo $companyInfo['company_name']; ?></dd>
  <dt>所在地</dt>
  <dd><?php echo $companyInfo['company_location']; ?></dd>
</dl>

get_fieldでグループフィールドのフィールド名を取得し、$companyInfoに代入しています。

会社名や所在地は、$companyInfo（グループフィールド「company_info」）の配列として返ってくるので、フィールド名で指定すると出力することができます。

<h3>会社概要</h3>
<?php if( have_rows('company_info') ): ?>
  <?php while( have_rows('company_info') ): the_row(); ?>
    <dl>
      <dt>会社名</dt>
      <dd><?php the_sub_field('company_name'); ?></dd>
      <dt>所在地</dt>
      <dd><?php the_sub_field('company_location'); ?></dd>
    </dl>
  <?php endwhile; ?>
<?php endif; ?>

ACFグループフィールドを条件分岐させる方法

編集画面でグループフィールドに入力がなかった場合に表示を変更させる条件分岐の方法を紹介します。

活用シーンとしては、不動産サイトで物件情報をカスタム投稿で作り、準備中（建設中）の表示をしたい場合などです。

<?php
$propertyInfo = get_field('property_info');
?>
<?php if($propertyInfo): ?>
<h3>物件情報</h3>
<dl>
  <dt>物件名</dt>
  <dd><?php echo $propertyInfo['property_name']; ?></dd>
  <dt>所在地</dt>
  <dd><?php echo $propertyInfo['property_location']; ?></dd>
</dl>
<?php else: ?>
<p>現在準備中です。</p>
<?php endif; ?>

「get_field」でグループフィールドのフィールド名を取得して$propertyInfoに代入し、if文で$propertyInfo（グループフィールド）に入力がある場合とそうでない場合で、表示内容を変える方法です。

サブフィールドに対しても条件分岐を使用することも可能です。

<?php
$propertyInfo = get_field('property_info');
?>
<?php if($propertyInfo): ?>
<h3>物件情報</h3>
<dl>
  <dt>物件名</dt>
  <dd>
    <?php if($propertyInfo['property_name']): ?>
      <?php echo $propertyInfo['property_name']; ?>
    <?php else: ?>
      <p>未決定</p>
    <?php endif; ?>
  </dd>
  <dt>所在地</dt>
  <dd><?php echo $propertyInfo['property_location']; ?></dd>
</dl>
<?php else: ?>
<p>現在準備中です。</p>
<?php endif; ?>

物件名に入力がなかった場合に、「未決定」といった表示をすることも可能です。

グループフィールドの中でグループフィールドを使う方法

グループフィールドの中でさらにグループフィールドを使用し、出力させる方法を紹介します。情報をよりまとめて整理したい場合などに活用することができます。

<?php
$shopInfo = get_field('shop_info');
if($shopInfo):
?>
  <dl>
    <dt>店舗名</dt>
    <dd><?php echo $shopInfo['shop_name']; ?></dd>
    <dt>所在地</dt>
    <dd><?php echo $shopInfo['shop_location']; ?></dd>
    <?php
    $shopTrafficInfo = $shopInfo['traffic_info'];
    ?>
    <dt>交通情報</dt>
    <dd>
      <dl>
        <dt>電車の場合</dt>
        <dd><?php echo $shopTrafficInfo['traffic_info_train']; ?></dd>
        <dt>車の場合</dt>
        <dd><?php echo $shopTrafficInfo['traffic_info_car']; ?></dd>
      </dl>
    </dd>
  </dl>
<?php endif; ?>

店舗情報というグループフィールドの中に、交通情報というグループフィールドを用意した例となります。

「shop_info」というグループフィールドの配列の要素の一つである、グループフィールドの「traffic_info」を取得し、さらに配列の要素の一つである「traffic_info_train」や「traffic_info_car」を取得して出力させています。