Accordion FAQ:アコーディオン形式のよくある質問ページが作れる

2019年7月9日

アコーディオン形式のよくある質問(FAQ)ページが作れる WordPress 用プラグインの紹介です。
それは「Accordion FAQ」です。
そのインストール手順から日本語化・使い方と設定などを解説していきます。

Accordion FAQ

Accordion FAQ - WordPress.org

Accordion FAQ は、レスポンシブに対応したアコーディオン形式のよくある質問(FAQ)ページが作れます。
作成した FAQ はショートコードを使用して表示できます。

Accordion FAQ DEMO – WpShopMart.com

記事を作成もしくは更新時点でのバージョン:v 2.1
マルチサイトでの利用:可

Gutenberg エディターでの動作

Gutenberg エディターに追加される機能は無いので、気にする必要は無いです。

Gutenbergでのショートコードの挿入手順

このプラグインは、ショートコードを使用します。
挿入手順については、下記の記事にて詳しく解説していますので、御覧ください。

Gutenberg でのショートコードの挿入手順 – WordPress活用術

インストール手順

下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
Accordion FAQ – WordPress.org

もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。

ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Accordion FAQ」と入力します。

アコーディオン形式のFAQが作れる:Accordion FAQ

検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。

プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。

WordPressプラグインのインストール手順を解説 – WordPress活用術

日本語化

Accordion FAQ を有効化した際に日本語化されない場合には、
日本語化用の言語パックを translate.wordpress.org から入手できる場合があります。

WordPress と関連プロジェクト(テーマ・プラグイン)用の翻訳プラットフォームとして、
translate.wordpress.org (GlotPress) が導入されています。

※ボランティアで翻訳されている場合が多いので、
全てのプラグインで、必ずしも日本語化用の言語パックが用意されているわけでは無いです。
また、用意されていても 100% 翻訳されている保証もありません。

日本語化用の翻訳ファイルの探し方は、下記の記事を参照してください。

WordPress公式での日本語化用の翻訳ファイルの探し方 – WordPress活用術

専用メニュー

アコーディオン形式のFAQが作れる:Accordion FAQ

ダッシュボードの「投稿」メニューの下に追加されています。

管理画面

アコーディオン形式のFAQが作れる:Accordion FAQ

使い方

FAQ を作るには「Add New Accordion」メニューを選択します。

アコーディオン形式のFAQが作れる:Accordion FAQ

管理画面で識別できるタイトルを入力します。

アコーディオン形式のFAQが作れる:Accordion FAQ

ページのテンプレートを選択します。
選択しますと言っても Free 版は一択しか無いです。

アコーディオン形式のFAQが作れる:Accordion FAQ

  • Accordion Title
    タイトルを入力します。
  • Accordion Description
    説明を入力します。
  • Accordion Icon
    タイトルの前に表示するアイコンを選択します。
  • Display Above Icon
    アイコンを表示するかどうか。

Use WYSIWYG Editor
クラシックエディター(HTML と テキストエディター)で編集できます。

右下のゴミ箱アイコンをクリックすると削除できます。
複数個ある場合には、ドラッグアンドドロップで順番を入れ替えることもできます。

アコーディオン形式のFAQが作れる:Accordion FAQ

アコーディオンエリアを追加したり、全てのアコーディオンエリアを削除できます。

個別削除と全削除は、確認画面が表示されてからの削除となります。

アコーディオン形式のFAQが作れる:Accordion FAQ

管理画面からでも確認できますが、
このアコーディオン群を表示するためのショートコードが表示されます。
カスタム CSS コードの入力もできます。

設定(Accordion Settings)

アコーディオン形式のFAQが作れる:Accordion FAQ

Display Accordion Section Title
セクションタイトルを表示するかどうか。

Accordion Open/Close Icon Alignment
アコーディオンの開閉アイコンの表示位置を選択します。

アコーディオン形式のFAQが作れる:Accordion FAQ

Display Open Close Icon
開閉アイコンを表示するかどうか。

Display Accordion Title Font Icon
フォントアイコンを表示するかどうか。

アコーディオン形式のFAQが作れる:Accordion FAQ

Enable Accordion Radius
アコーディオンエリアの四隅を丸めるかどうか。

Enable Accordion Margin/Space
他のアコーディオンエリアとの間にマージンもしくはスペースを取るかどうか。

アコーディオン形式のFAQが作れる:Accordion FAQ

Enable Toggle/Collapse
切り替えもしくは折りたたみを有効にするかどうか。

Display Accordion Border
アコーディオンエリアの枠線を表示するかどうか。

アコーディオン形式のFAQが作れる:Accordion FAQ

Expand/Collapse Accordion Option On Page Load
ページ読み込み時のアコーディオンの開閉状態を選択します。

Accordion Styles
アコーディオンのスタイルを選択します。

アコーディオン形式のFAQが作れる:Accordion FAQ

Accordion Title Background Colour
タイトルの背景色を選択します。

Accordion Title/Icon Font Colour
タイトルとタイトルのフォントアイコンの色を選択します。

アコーディオン形式のFAQが作れる:Accordion FAQ

Accordion Description Background Colour
説明部の背景色を選択します。

Accordion Description Font Colour
説明部の文字のフォントカラーを選択します。

アコーディオン形式のFAQが作れる:Accordion FAQ

Title/Icon Font Size
タイトルのフォントサイズとアイコンフォントのサイズを指定できます。

Description Font Size
説明部のフォントサイズを指定できます。

アコーディオン形式のFAQが作れる:Accordion FAQ

Font Style/Family
フォントのスタイル・フォントファミリーを選択します。

Page Scroll To Accordion
Premium 版のみでの機能。

アコーディオン形式のFAQが作れる:Accordion FAQ

ON Hover Accordion
Premium 版のみでの機能。

Open Close Icon
開閉ボタンアイコンを選択します。

アコーディオン形式のFAQが作れる:Accordion FAQ

Content Animation
Premium 版のみでの機能。

表示例

アコーディオン形式のFAQが作れる:Accordion FAQ

デフォルトの設定のままで表示させると上のような感じで表示されます。

代替プラグイン

Accordion FAQ にほしい機能が無かった場合には、
Accordion FAQ 以外にもよくある質問ページを作成できるプラグインを記事にしています。
以下では、Accordion FAQ を含めて 7 個を簡単に紹介しています。

よくある質問ページを作成できるWordPressプラグイン一覧

URL

Accordion FAQ – WordPress.org

本ページはアフィリエイトプログラムによる収益を得ています