よくある質問ページをACFの繰り返しフィールドで実装する方法

ACF（Advanced Custom Fields）のPRO版（有料版）の機能、繰り返しフィールドを活用して、よくある質問ページにおけるFAQリストを作成し、管理画面で楽に管理できる方法を紹介します。

WordPressの通常の固定ページなどのコンテンツエディタを使用して、HTMLで組んでいくことももちろん可能ですが、HTMLがあまり得意ではない方でも管理しやすいようにカスタムフィールドで実装します。

管理画面ではコードを編集する必要が無くなるため、クライアントにサイトを渡した後にレイアウトが崩れてしまったり、サイトが表示されなくなってしまうリスクなどを軽減することができます。

ACF PROの繰り返しフィールドの基本的な使い方と応用方法

繰り返しフィールドを利用したFAQリストの実装手順
- ACF PROのインストール
- 編集画面での繰り返しフィールド
繰り返しフィールドで作成したFAQリスト出力方法
- ACF繰り返しフィールド詳細
その他参考

繰り返しフィールドを利用したFAQリストの実装手順

ACF PROのインストール

有料版のACF PROの購入とインストール方法、その他基本的な使い方についてはこちら

インストール後、メニュー→カスタムフィールド→フィールドグループ→「新規追加」を押します。
フィールドを追加し、「繰り返しフィールド」を選択します。※有料版のみ選択可能

上述したコードと下記の表を参考にフィールドを追加します。

フィールドラベル	よくある質問
フィールド名	faq
フィールドタイプ	繰り返しフィールド

繰り返しフィールド内の質問と回答のフィールドも追加します。

Advanced Custom Fieldsの繰り返しフィールドのサブフィールド作成画面

編集画面での繰り返しフィールド

ACFでよくある質問用のフィールド設定が済んだ後は、固定ページで実際に情報を登録していきます。
ここでは、事例の通りよくある質問ページを用意しています。

スクショの通り、よくある質問を登録することができます。編集箇所はフィールド内だけで、HTMLを編集したり追加したりする必要はありません。
回答のフィールドをテキストエリアにしているので、改行も可能です。

繰り返しフィールドで作成したFAQリスト出力方法

繰り返しフィールドの設定、編集画面での入力が完了したら、実際にサイト上にFAQリストを出力する方法を紹介します。

<?php if( have_rows('faq') ): ?>
  <?php while ( have_rows('faq') ) : the_row(); ?>
    <dl>
      <dt><?php the_sub_field('question'); ?></dt>
      <dd><?php the_sub_field('answer'); ?></dd>
    </dl>
  <?php endwhile; ?>
<?php endif; ?>

よくある質問の固定ページを作成し、こちらの記述を貼り付けると、管理画面にて入力した繰り返しフィールドのよくある質問が出力されます。

ACF繰り返しフィールド詳細

faq（繰り返しフィールド）	よくある質問ごとに情報を登録するための繰り返しフィールド
question（テキストフィールド）	質問を登録するためのサブフィールド
answer（テキストエリアフィールド）	質問に対する回答を登録するためのサブフィールド回答が長くなった場合でも改行を行い読みやすくするためにテキストエリアにしています