WordPress ACF PROを使ってみた。 | ネクストページブログ

日頃からお世話になっているWordPress、時代はGutenberg。
Gutenbergを駆使したサイトをいつか作ってみたいと思いつつも
既に入力項目が決まっているページの場合はカスタムフィールド（ACF PRO）にお世話になっているので、使い方の一部を紹介します。

試したフィールドタイプ

Clone （クローン）
Repeater（繰り返し）
Post Object（投稿オブジェクト）

Clone

同じ項目を同じ階層で使用したい場合は、専用のフィールドグループを作成し、フィールドグループを表示する条件に追加すれば可能です。

同じ項目を、ページにより違う階層やそれぞれのグループ内に含めたい場合や、同じ項目を何度も記述するのが大変な場合に使用すればよいと思います。
項目の修正が発生した場合も、Clone元のフィールドグループを修正するだけで入力画面に反映します。（既にページ登録された後にフィールドを変更しても、変更後にページ更新をしないとページとしてのデータは元フィールドの値のままとなります）

DB内のフィールドを複製するのではなく、選択したフィールドを実行時にロードして表示します。
ACF 公式サイトクローンフィールド

複製していない所が気持ち的にもうれしいですね。

Prefixは使用場所判別上手く使えます — Prefixは使用場所判別に上手く使えます

Prefix Field Labelsを「はい」にすれば、入力画面にClone時のラベル+Clone元のラベルが表示されます。
Prefix Field Namesを「はい」にすれば、取得時のフォールド名がClone時の名前+Clone元の名前が表示されます。

サンプル出力コード

<?php
// 概要取得
$about_set = $group_set['about_set'];
?>
<!-- カテゴリ -->
<?php $category_set = $about_set['course_outline_sets']['category_set']; ?>
<div class="categoryArea">
    <!-- 対象 -->
    <?php
    $sets = $category_set['target'];
    if( $sets ): ?>
    <dl>
        <dt class="c-categoryLabel c-categoryLabel--target">対象</dt>
        <dd>
        <ul class="c-tagList">
            <?php foreach( $sets as $value ): ?>
            <li class="c-tag c-tag--course"><?php echo $value['label']; ?></li>
            <?php endforeach; ?>
        </ul>
        </dd>
    </dl>
    <?php endif; ?>
    <!-- 業種・職種 -->
    <?php
    $sets = $category_set['job'];
    if( $sets ): ?>
    <dl>
        <dt class="c-categoryLabel c-categoryLabel--target">業種・職種</dt>
        <dd>
        <ul class="c-tagList">
            <?php foreach( $sets as $value ): ?>
            <li class="c-tag c-tag--course"><?php echo $value['label']; ?></li>
            <?php endforeach; ?>
        </ul>
        </dd>
    </dl>
    <?php endif; ?>

    <!-- 分野 -->
    <?php
    $sets = $category_set['about'];
    if( $sets ): ?>
    <dl>
        <dt class="c-categoryLabel c-categoryLabel--about">分野</dt>
        <dd>
        <ul class="c-tagList">
            <?php foreach( $sets as $value ): ?>
            <li class="c-tag c-tag--course"><?php echo $value['label']; ?></li>
            <?php endforeach; ?>
        </ul>
        </dd>
    </dl>
    <?php endif; ?>
    <!-- 総時間数 -->
    <?php
    $sets = $category_set['time'];
    if( $sets ): ?>
    <dl>
        <dt class="c-categoryLabel c-categoryLabel--time">総時間数</dt>
        <dd>
        <ul class="c-tagList">
            <li class="c-tag c-tag--course"><?php echo $sets['label']; ?></li>
        </ul>
        </dd>
    </dl>
    <?php endif; ?>
    <!-- 総予算 -->
    <?php
    $sets = $category_set['price'];
    if( $sets ): ?>
    <dl>
        <dt class="c-categoryLabel c-categoryLabel--price">総予算</dt>
        <dd>
        <ul class="c-tagList">
            <li class="c-tag c-tag--course"><?php echo $sets['label']; ?></li>
        </ul>
        </dd>
    </dl>
    <?php endif; ?>
    <!-- 開催地 -->
    <?php
    $sets = $category_set['place'];
    if( $sets ): ?>
    <dl>
        <dt class="c-categoryLabel c-categoryLabel--place">開催地</dt>
        <dd>
        <ul class="c-tagList">
            <?php foreach( $sets as $value ): ?>
            <li class="c-tag c-tag--course"><?php echo $value['label']; ?></li>
            <?php endforeach; ?>
        </ul>
        <!-- 開催地注釈 -->
        <?php
        $note_sets = $category_set['note_set'];
        if( $note_sets['0']['note'] ): ?>
        <ul class="noteList">
            <?php
            foreach ($note_sets as $value) :
                $note = $value['note'];
                if ( $note ) :
                ?>
            <li><?php echo $note; ?></li>
                <?php endif; ?>
            <?php endforeach; ?>
        </ul>
        <?php endif; ?>
        </dd>
    </dl>
    <?php endif; ?>
    <!-- 受講に必要なスキル -->
    <?php
    $sets = $category_set['required'];
    if( $sets ): ?>
    <dl>
        <dt class="c-categoryLabel c-categoryLabel--about">受講に必要なスキル</dt>
        <dd>
        <div class="text"><?php echo $sets; ?></div>
        </dd>
    </dl>
    <?php endif; ?>
</div>

Repeater

リピーターフィールドを使用すると、コンテンツの編集中に何度でも繰り返すことができる一連のサブフィールドを作成できます。
ACF 公式繰り返しフィールド

繰り返したい項目の数が少ない時はレイアウトを表にして1件を1行で収める。
項目追加ボタンの文言が変更できるため項目名に変更する。（初期設定では「行を追加」）

サンプル出力コード

<?php
// コース情報取得
$group_set = get_field('course_set');
// 概要取得
$about_set = $group_set['about_set'];
?>
<!-- 身につく知識やスキル -->
<?php $skill_set = $about_set['course_outline_sets']['skill_set']; ?>
<?php if ( $skill_set['0']['text'] ) : ?>
<div class="skillArea">
    <h3 class="title">身につく知識やスキル</h3>
    <ul>
    <?php
    $sets = $skill_set;
    foreach ($sets as $value) :
        $text = $value['text'];
        $note = $value['note'];
        if ( $text ) :
        ?>
        <li><?php echo $text; ?><?php if ( $note ) : ?><span class="note"><?php echo $note; ?></span><?php endif; ?></li>
        <?php endif; ?>
    <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>

Post Object

投稿オブジェクトフィールドは、ページ+投稿+カスタム投稿タイプを選択できる選択フィールドを作成します。
ACF 公式投稿オブジェクト

サンプル出力コード

<?php
// コース情報取得
$group_set = get_field('course_set');
// 内容取得
$index_set = $group_set['index_set'];
?>

<!-- コース内容 -->
<?php if ( $index_set['text'] || isset($index_set['couse_set']['0']['link']) ) : ?>
    <?php
    $sets = $index_set['course_set'];
    if( $sets['0']['link'] ): ?>
        
    <div class="table c-tableBlock">
        <table>
        <thead>
            <tr>
            <th>講座名</th>
            <th>学習時間</th>
            <th>個人<br class="u-pcOnly">レッスン</th>
            <th>集合研修<br class="u-pcOnly">講師派遣</th>
            <th>公開講座</th>
            <th>eラーニング</th>
            </tr>
        </thead>
        <tbody>

        <?php
        foreach ($sets as $value) :
            $post_id = $value['link'];
            if ( $post_id ) :
                // 基本情報取得
                $base_set = get_field('base_set', $post_id);
                $lecture_set = get_field('lecture_set', $post_id);
                // 個人
                $private_set = $lecture_set['lesson_set']['private_set'];
                // 集合研修
                $training_set = $lecture_set['lesson_set']['training_set'];
                // 公開講座
                $seminar_set = $lecture_set['lesson_set']['seminar_set'];
                // eラーニング
                $elearning_set = $lecture_set['lesson_set']['elearning_set'];
                // 学習時間取得
                $houre = $value['houre'];
                if ( $houre ) :
                    $houre = $houre.'時間';
                endif;
        ?>
            <tr>
            <td class="couseTitle"><a href="<?php the_permalink($post_id); ?>"><?php echo $base_set['title']; ?></a></td>
            <td><?php echo $houre; ?></td>
            <td><?php if ( $private_set['onoff'] == '○' ) : echo $private_set['onoff']; endif; ?><?php if ( $private_set['online']) : ?><span class="online">オンライン講座有り</span><?php endif; ?></td>
            <td><?php if ( $training_set['onoff'] == '○' ) : echo $training_set['onoff']; endif; ?><?php if ( $training_set['online']) : ?><span class="online">オンライン講座有り</span><?php endif; ?></td>
            <td><?php if ( $seminar_set['onoff'] == '○' ) : echo $seminar_set['onoff']; endif; ?><?php if ( $seminar_set['online']) : ?><span class="online">オンライン講座有り</span><?php endif; ?></td>
            <td><?php if ( $elearning_set['onoff'] == '○' ) : echo $elearning_set['onoff']; endif; ?><?php if ( $elearning_set['online']) : ?><span class="online">オンライン講座有り</span><?php endif; ?></td>
            </tr>
            <?php endif; ?>
        <?php endforeach; ?>

            </tbody>
        </table>
    </div>
    <?php endif; ?>
<?php endif; ?>

登録画面を整理するために、繰り返しやグループを使用しますが
その際階層が深くなりすぎる場合があります。
get_sub_field()で取得できない場合、get_field()で親項目を取得後、配列で下層の項目を取得することが多いため、今回はまとめてみました。