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

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

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

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

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

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

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

ACF PROのインストール

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

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

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

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

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

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

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

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

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

Advanced Custom Fieldsの繰り返しフィールドの編集画面

スクショの通り、よくある質問を登録することができます。編集箇所はフィールド内だけで、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(テキストエリアフィールド)質問に対する回答を登録するためのサブフィールド
回答が長くなった場合でも改行を行い読みやすくするためにテキストエリアにしています

その他参考

今回はよくある質問ページを例に、ACFの繰り返しフィールドを紹介しました。この実装方法を応用することで、投稿やカスタム投稿を作成するまでもない場合に代用することができます。
例えば、店舗一覧や施設一覧、商品一覧など、本来は投稿で作成するような内容も対応できます。

ACFの繰り返しフィールドを採用情報ページに活用した方法も紹介していますので、よかったらご覧ください。

ACFの繰り返しフィールドで採用情報ページを作ってみた

カテゴリー