Avadaで簡単手軽に作成できるよくある質問ページの作り方

How to create FAQs

ホーム/Fusion Core/FAQs/Avadaで簡単手軽に作成できるよくある質問ページの作り方
  • FAQsページの作り方

このコンテンツでは、【FAQsページの作り方】について解説をしています。
FAQとは『Frequently Asked Questions』の略で、日本語の『よくある質問』にあたります。
大まかな流れとしては、FAQs投稿ページで1つ1つのよくある質問を作成し、投稿ページまたは固定ページにFAQsエレメントでまとめて表示します。

なお、FAQsはFusion Coreプラグインの導入が必須です。AvadaをインストールしたらFusion Coreのインストールも促されるので、しっかりとインストールしておきましょう。

FAQs投稿ページ = 1つ1つのよくある質問
FAQsエレメント = FAQ投稿ページをまとめて表示できる機能

FAQs 投稿ページの作り方

FAQs 投稿ページの追加

『WordPress 左メニューのFAQs』 → 『Add New(新規追加)』をクリックすると、一般的な投稿ページのような画面に遷移し作成することができます。

FAQs 質問と回答

タイトルが質問部分となり、テキストブロックなどで回答部分を作成します。

回答部分は、投稿ページや固定ページと同様にFusion Builderを使うことができますので、プレーンテキストだけでなく、カラムを変更したり様々なエレメントを挿入することもできます。

FAQs 動画の埋め込み

動画をFAQsに表示したい場合は、回答部分となるFusion Builderに動画用のエレメント(YouTubeやVimeo)を使用し作成しましょう。

次の手順では、FAQs投稿ページ単一での表示はできますが、FAQsエレメントでは表示することができないので注意しましょう。『Fusion Page Options』 → 『Video Embed Code(動画の埋め込み)』

なお、アイキャッチ画像については、後述するエレメントオプションでFAQsに表示することが可能です。

FAQsエレメントを使用する

FAQsエレメントの追加

FAQsを固定ページまたは投稿ページに表示することはとても簡単です。

次の手順で作成することができます。

  1. Fusion Builderの【+コンテナ】をクリック
  2. コンテナの大きさを選択
  3. 【+エレメント】をクリック
  4. FAQsを選択

ステップ4のFAQsエレメント選択後については、次のセクションで解説しています。

FAQsエレメントのオプション解説

FAQsエレメントのオプション

このセクションでは、【FAQsエレメントを使用する】のステップ4『FAQsを選択』すると表示されるオプションを、実際にFAQsエレメントをページ内に挿入し、デモを交えながら各オプションの解説をしています。

Display Filters / フィルタの表示

FAQのカテゴリフィルターを表示または非表示を選択することができます。

フィルターを表示する場合は、すべてのカテゴリが表示される”All”(すべて)があるパターンとないパターンから選択できます。

ALL / 表示

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Show without All / 『すべて』はなしで表示

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Hide / 表示しない

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Display Featured Images / アイキャッチ画像の表示

各FAQの投稿ページでは、通常の投稿ページや固定ページ同様にアイキャッチ画像を設定することができます。このオプションを有効にすると、FAQsエレメントでFAQをまとめて表示している場合も、回答にアイキャッチ画像を表示することができます。

Yes / はい

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

No / いいえ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quam felis, vehicula eget purus eget, pretium eleifend nisl. Praesent enim massa, lobortis quis lorem a, molestie condimentum lectus. Etiam consectetur interdum dolor sit amet condimentum. Mauris ornare rutrum auctor. Phasellus mattis maximus maximus. Duis a ultrices nisl. Morbi fringilla aliquet justo, a semper purus sollicitudin a. Morbi ac elit a diam dictum auctor. Mauris non mollis tortor.

Categories・Exclude Categories / カテゴリ・除外カテゴリ

FAQsに表示したい、または表示させたくないカテゴリをそれぞれ選択することができます。

何も選択しなければFAQsの投稿ページで制作したものがすべて表示されます。

カテゴリやFAQの並びについて

FAQs カテゴリの順番

作成したFAQの投稿ページは、作成順にFAQsに表示されます。
順番の並びを変更したい場合はPost Types Order等のプラグインで、投稿順を変更することで表示順を変更することができます。

同様に画像のようにカテゴリの順番もCategory Order and Taxonomy Terms Order等のプラグインで、順番を変更することで表示順を変更することができます。

以上がAvadaのFusion Coreプラグインを導入して作成できる FAQsページの作り方 となります。

2017/05/06|カテゴリー: Fusion Core, FAQs|タグ: , , , |

コメントする