Ultimate FAQ Accordionで、カテゴリー付アコーディオンを作成

以前紹介した、Accordion FAQなど、WordPressでは、アコーディオンプラグインがいくつもあります。今回は、Ultimate FAQ Accordionで、カテゴリー付アコーディオンを作成する方法を紹介します。

 出典 : Ultimate FAQ Accordion

今回のDEMOは、発送のFAQです。

ULTIMATE FAQ ACCORDION

ACCORDION

＋をクリックすると、テキストが出てきます。

初期設定

プラグインをインストール、有効化します。設定画面が表示されるので、4.Set Key Optionsの、　FAQ Toggle、Group FAQs by Categoryにチェックを入れます。

FAQ Categories

まず、カテゴリー設定をします。左サイドメニューのFAQs＞FAQ Categoriesをクリックします。名前とスラッグを入力して、Add New FAQ Categoryボタンをクリックします。今回は、発送について、返品についての２つのカテゴリーを作成します。

Add New

アコーディオンを作成します。２つのカテゴリーそれぞれ2つ、計4つのアコーディオンを作成します。左サイドメニューのFAQs＞Add Newをクリックします。

編集画面が表示されるので、タイトル部分に質問、テキスト欄に答えを記入します。右サイドバーのFAQ＞FAQ Categoriesに、設定したカテゴリーが表示されるので、チェックを入れ、保存します。4つ全てを同じように作成します。

設置

編集画面を開きブロックエディターから、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にチェックを入れます。これで完成です。

以上で今回の説明は終了です、比較的簡単な設定で、カテゴリー分けしたアコーディオンが作成されます。細かな設定は出来ませんが、CSSが使用できるので、スタイルを設定しておけば、アコーディオンの作成と設置のみで更新できます。