企業様のホームページ案件でしばしば依頼されるのが、よくある質問ページの作成。
今回は投稿者が簡単に追加、修正、削除ができる使い勝手の良いよくある質問ページを作成する方法をご紹介します。
Smart Custom Fieldsプラグインの繰り返し機能を使って作ります。
CSSとJS(JQuery)は割愛します。
記事作成当時のWordPressのバージョンは5.4
よくある質問ページ作成に必要なプラグイン
- Smart Custom Fields（バージョン 4.1.3）
カスタムフィールドを管理するプラグイン
1. 固定ページでよくある質問ページを作成
タイトル：よくある質問
スラッグ：faq
2. Smart Custom Fieldsで質問と回答の繰り返しフィールドを作成
Smart Custom Fieldsプラグインの設定ページで新規追加をクリックして、フィールド編集画面に行きます。
タイトルは「よくある質問」にして、以下の設定を行っていきます。
カスタムフィールドの設定
繰り返しを有効にして、グループ名を「faq_group」にする。
「サブフィールドを追加」で2つのフィールドを作ります。
1つめのフィールドの設定
タイプ：テキスト
ラベル：質問
名前：question
上記以外未入力でOK。
2つめのフィールドの設定
タイプ：テキストエリア
ラベル：回答
名前：answer
行：5
上記以外未入力でOK。
右サイドバーの表示条件（投稿）項目の設定
投稿タイプ：固定ページ
投稿 / 固定ページの ID欄：1.で作成したよくある質問の固定ページを選択
ここまでやったら「公開」ボタンを押して保存してください。
3. 固定ページ：よくある質問ページで質問と回答の設定
1.で作成した固定ページを開き直すと、質問と回答を入力するフィールドができているはずです。
（できてない場合は、リロードしてみて、それでもダメなら手順を見直してください）
＋ボタンで追加、×ボタンで削除、3本線のハンバーガーアイコンをドラッグすると並べ替えもできます。
とりあえずダミーでも良いので、質問と回答を何個か入力してください。
編集後は、更新ボタンを押して保存するのを忘れないように気をつけてください。
4. 質問と回答フィールドを取得するテンプレートファイルの作成
ここが一番のポイントですが、カスタムフィールドに入力した質問と回答を取得して表示する必要があるので、これをプログラムで処理します。
以下のコードを貼り付けたテンプレートファイルを作成します。
作成したテンプレートファイルはテーマフォルダ内に「parts」というフォルダを作成してその中に入れてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <?php /* * よくある質問のリピートカスタムフィールドを取得する * slugをキーにして、値に質問と回答が入った配列を入れる */ $faq_page_id = get_page_by_path("faq", OBJECT, "page"); $faq_page_id = $faq_page_id->ID; $faqs = SCF::get( 'faq_group', $faq_page_id ); ?> <div class="faqlist-wrapper"> <ul class="faqlist"> <?php foreach($faqs as $faq) { ?> <li class=""> <div class="question"><?php echo $faq['question']; ?></div> <div class="answer"> <div class="answer_text"><?php echo nl2br(do_shortcode($faq['answer'])); ?></div> </div> </li> <?php } ?> </ul> </div> |
5. 固定ページ：よくある質問ページでテンプレートファイルの呼び出し
4.で作成したテンプレートをよくある質問の固定ページで呼び出して使います。
1 2 3 | <section id="faq-area"> [get_template_part slug="parts/scf" name="page-faq"] </section> |
コードの2行目でテンプレートをショートコードで呼び出してますが、このショートコードは以下のページを参考に設定してください。
仕事で使えるWordPressショートコード集
よくある質問ページにアクセスすると入力した質問と回答が表示されていると思います。
あとはCSSを当てて整形してください。
JS(JQuery)を使えばアコーディオンタイプ（質問をクリックすると回答が表示される）のような動きのあるページを作ることも可能です。
さいごに
どうでも良いかもしれませんが、ページタイトルを「よくある質問」ではなく「Q&A」にしているサイトも多々ありますが、未だにどちらが良いのかわかりません。
「Q＆A」と「FAQ」って実は微妙に意味が違うらしく、「Q＆A」は質問と回答という意味で、「FAQ」はよくある質問という意味だそうです。
調べれば調べるほど結局一緒じゃない？って思ってしまっているのですが、今は「よくある質問」の方が企業サイトっぽいかなと思っているので、今回の説明文にはそちらを採用しました。
