無料の範囲内で、ACFをもっと便利に、もっと実用的に使いたい！という方向けの記事です。
ACF 6.x以降では、投稿タイプを管理画面から作成できる機能が追加されています。本記事ではこの機能を使用します。
今回のゴール：固定ページに「Q&A」を作成
簡易的なQ&Aを作成します。新規投稿すると、Q&A欄に追加されていくようなイメージです。
１．リピートフィールドの代わりとなるカスタム投稿タイプの作成
プラグインを追加から「Advanced Custom Fields」をダウンロードし、有効化します。
サイドバーに「ACF」が追加されました。
クリックしましょう。
投稿タイプを選択し、[＋新規追加]から新しい投稿タイプを作成します。
複数ラベル：Q&A
単数ラベル：Q&A
投稿タイプキー：question-and-answer
複数ラベルと単数ラベルの違いは、
単数ラベル：1件を指す表示用
複数ラベル：一覧・集合を指す表示用
です。
例えば英語では
複数ラベル：Products
単数ラベル：Product
のように明確に使い分けるため、その名残として分かれています。が、日本語では同じ文言でOKです。
今回使用する「投稿タイプキー」はPHPで記述する際に使用していきます。PHPとフィールドグループで異なったフィールド名を使うとエラーが出ますので、ハイフンやアンダーバーなど間違えないように気を付けましょう。
入力できたら右上[変更内容を保存]を押します。
投稿タイプ一覧に「Q&A」が追加されました。
サイドバーに「Q&A」が表示されました。
これで投稿タイプの設定は完了です。
２．「1件＝1行」になるフィールドグループを作成
サイドバー「ACF」からフィールドグループを[＋新規追加]していきます。
フィールドグループタイトルは「Q&A」とします。
フィールドタイプ：テキスト
フィールドラベル：質問
フィールド名：question
入力できたら[閉じて新しいフィールドを追加]をクリックします。
今回使用する「フィールド名」はPHPで記述する際に使用していきます。PHPとフィールドグループで異なったフィールド名を使うとエラーが出ますので、ハイフンやアンダーバーなど間違えないように気を付けましょう。
フィールドタイプ：テキストエリア
フィールドラベル：回答
フィールド名：answer
入力できたら[フィードを閉じる]をクリックします。
フィールド下にある設定です。
ルールを
投稿タイプ 等しい Q&A にします。
先ほど作成した投稿タイプです。
選択できたら、右上の[変更内容を保存]を押して登録します。
作成したフィールドグループが追加されていればOKです。
これで下準備は完了しました！いよいよ情報を入力していきます。
先ほど作成した投稿タイプを選択して、[新規Q&Aを追加]をクリックします。
今回は3件のQ&Aを追加してみます。
画面下部に、フィールドグループ「Q&A」が生成されていると思います。
質問と回答を入力していきましょう。
入力できたら右上の[公開]をクリックして公開してください。
1件目
2件目
3件目
3件作成した状態です。
３．固定ページに紐づける
現時点では、まだ、データを入力したのみで表示できていません。
編集画面で入力したデータを固定ページに表示させるようにします。
表示したい固定ページが決まっている場合は、そのページのPHPが書ければ問題ないです。
今回は固定ページを新規作成し、PHPの紐づけを行いました。
PHPと固定ページを紐づける方法はいくつかありますが、スラッグを使っています。
固定ページの右上、「スラッグ」を、今回は「acf_repeat」にします。
変更できたらページを公開しましょう。
使用しているテーマ（推奨：子テーマ）配下に「page-acf_repeat.php」を作成します。
（例えばスラッグを「abc」にしたら、php名は「page-abc.php」、
スラッグを「fashion」にしたら、php名は「page-fashion.php」となります。）
PHPのコード
<?php
get_header();
$args = [
'post_type' => 'question-and-answer',
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'ASC',
];
$query = new WP_Query($args);
if ($query->have_posts()):
?>
<div class="qa-list">
<?php while ($query->have_posts()): $query->the_post();
$question = get_field('question');
$answer = get_field('answer');
?>
<details class="qa-item">
<summary class="qa-question">
<?php echo esc_html($question); ?>
</summary>
<div class="qa-answer">
<?php echo wpautop(esc_html($answer)); ?>
</div>
</details>
<?php endwhile; ?>
</div>
<?php
wp_reset_postdata();
endif;
get_footer();固定ページを読み込むと、データが表サイトに表示されました。
このままだと見にくいので、少しだけCSSも書いていきましょう。
.qa-list{
width: 50%;
margin: 5rem auto;
}
.qa-item {
border-bottom: 1px solid #ddd;
padding: 10px 0;
}
.qa-question {
cursor: pointer;
font-weight: bold;
position: relative;
padding-right: 30px;
list-style: none;
}
/* デフォルトの三角アイコンを消す */
.qa-question::-webkit-details-marker {
display: none;
}
.qa-question::after {
content: '+';
position: absolute;
right: 0;
top: 0;
}
details[open] .qa-question::after {
content: '-';
}
.qa-answer {
margin-top: 10px;
}[▶]が消えて、[＋]ボタンができました。
クリックするときちんと回答が表示されます。
簡易的なQ&Aのため、より整える場合はjavascriptなどで制御するのが望ましいです。
ついでに、投稿を増やしても問題なく表示されるか確認しましょう。
先ほどと同じ手順で「服装は自由ですか」を追加・公開しました。
再読み込みするときちんと表示されました。
表示自体はこれで完成です。
４．この方法のメリット・デメリット
メリット
- ACF無料版で完結－ACF Proは年間49＄（約7,000円）～掛かります。多少のリピートであれば、十分代用が可能です。
- 再利用コンテンツには強い－複数ページで表示したい場合や様式を共通パーツにする場合は、リピートフィールドよりも管理がしやすいです。
デメリット
- 操作性－ドラッグで入れ替えることができず、柔軟性に欠けます。表示している固定ページから追加・編集するのではなく、投稿タイプからの操作になるので非エンジニアには負担が大きいです。
- コンテンツ管理－サイドバーに投稿タイプが表示されてしまうため、Aページ専用、Bページ専用などの切り分けができません。
５．まとめ
今回は、ACF無料版のみを使って、リピートフィールドの代替となる実装方法を紹介しました。
1件のQ&Aを1投稿として管理することで、
リピートフィールドがなくても「一覧表示」「追加」「再利用」が可能になります。
特に、
- Q&A
- よくある質問
- 用語集
- 注意事項一覧
といった 構造がシンプルで件数が増えるコンテンツには相性の良い方法です。
ACF無料版でも、設計次第で十分実用的な構成が組めますので、
「Proを使う前の選択肢」として、ぜひ活用してみてください。