![](https://cxg-design.jp/wp-content/uploads/2024/06/ultimatefqa_thumb03.png)
Ultimate FAQ Accordionで、カテゴリー付アコーディオンを作成
以前紹介した、Accordion FAQなど、WordPressでは、アコーディオンプラグインがいくつもあります。今回は、Ultimate FAQ Accordionで、カテゴリー付アコーディオンを作成する方法を紹介します。
今回のDEMOは、発送のFAQです。
+をクリックすると、テキストが出てきます。
初期設定
プラグインをインストール、有効化します。設定画面が表示されるので、4.Set Key Optionsの、 FAQ Toggle、Group FAQs by Categoryにチェックを入れます。
Group FAQs by Categoryは、最初のみ表示
Group FAQs by Categorymのチェック項目は、インストール、有効化した後のみ表示されるので、忘れずチェックしておきましょう。
![](https://cxg-design.jp/wp-content/uploads/2024/06/ee376ef40cc8262f2c56a5f5fa1b9549.png)
設定画面が表示
![](https://cxg-design.jp/wp-content/uploads/2024/06/e8768c8c7aec9b4efa94b6a32f7a2b9f.png)
FAQ Toggle、Group FAQs by Categoryにチェック
FAQ Categories
まず、カテゴリー設定をします。左サイドメニューのFAQs>FAQ Categoriesをクリックします。名前とスラッグを入力して、Add New FAQ Categoryボタンをクリックします。今回は、発送について、返品についての2つのカテゴリーを作成します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/4b67bada67342897e401d117acab8018.png)
FAQs>FAQ Categoriesをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/a45957e1e0bdb216944d2fafa0b47e70.png)
名前とスラッグを入力して、Add New FAQ Categoryボタンをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/e74f2dc5e941f9152aa19cd4dba89438.png)
2つのカテゴリーを作成
Add New
アコーディオンを作成します。2つのカテゴリーそれぞれ2つ、計4つのアコーディオンを作成します。左サイドメニューのFAQs>Add Newをクリックします。
編集画面が表示されるので、タイトル部分に質問、テキスト欄に答えを記入します。右サイドバーのFAQ>FAQ Categoriesに、設定したカテゴリーが表示されるので、チェックを入れ、保存します。4つ全てを同じように作成します。
![](https://cxg-design.jp/wp-content/uploads/2024/06/535c3357e91bb10b19805c0d7ff3e9cb.png)
FAQs>Add Newをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/7db9a1b3712c8c088e465674f3fcaf91.png)
タイトル部分に質問、テキスト欄に答えを記入
![](https://cxg-design.jp/wp-content/uploads/2024/06/b79b4a18e29f7a29aea58311888fe01e.png)
FAQ>FAQ Categoriesのカテゴリーにチェック
設置
編集画面を開きブロックエディターから、Display FQAsをクリックします。これで設置完了です。
![](https://cxg-design.jp/wp-content/uploads/2024/06/c80774652e38134026bfb771a2e51b63.png)
Display FQAsをクリック
Setting
最後に、スタイルを整えます。左サイドメニューFAQs>Settingをクリックします。設定画面が表示されるので、Custom CSSにCSSコードを入力します。今回は、カテゴリーをグリーンにして、+と質問の高さの調整をしました。
.ewd-ufaq-faqs h3{
color: #00680f;
margin-bottom: 1em;
}
.ewd-ufaq-faq-title-text{
margin-top:-0.35em;
}
最後に、DisplayのHide Categoriesにチェックを入れます。これで完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/06/2da212cce71f1ded445015092b7183f3.png)
FAQs>Settingをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/06/0bf722dcb32a995677dbe858c39dfcd3.png)
Custom CSSにCSSコードを入力
![](https://cxg-design.jp/wp-content/uploads/2024/06/e494ef23190b8a583cf71d4e58beb120.png)
DisplayのHide Categoriesにチェック
以上で今回の説明は終了です、比較的簡単な設定で、カテゴリー分けしたアコーディオンが作成されます。細かな設定は出来ませんが、CSSが使用できるので、スタイルを設定しておけば、アコーディオンの作成と設置のみで更新できます。