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

  • Plugin

    • 以前紹介した、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にチェックを入れます。

    Group FAQs by Categoryは、最初のみ表示

    Group FAQs by Categorymのチェック項目は、インストール、有効化した後のみ表示されるので、忘れずチェックしておきましょう。

    設定画面が表示

    FAQ Toggle、Group FAQs by Categoryにチェック

    FAQ Categories

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

    FAQs＞FAQ Categoriesをクリック

    名前とスラッグを入力して、Add New FAQ Categoryボタンをクリック

    ２つのカテゴリーを作成

    Add New

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

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

    FAQs＞Add Newをクリック

    タイトル部分に質問、テキスト欄に答えを記入

    FAQ＞FAQ Categoriesのカテゴリーにチェック

    設置

    編集画面を開きブロックエディターから、Display FQAsをクリックします。これで設置完了です。

    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にチェックを入れます。これで完成です。

    FAQs＞Settingをクリック

    Custom CSSにCSSコードを入力

    DisplayのHide Categoriesにチェック

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

    You may also like