Helpie FAQ:ライブ検索機能を備えたよくある質問ページが作れる

2019年7月13日

ライブ検索機能を備えたアコーディオン型の FAQ ページが作れる WordPress 用プラグインの紹介です。
それは「Helpie FAQ」です。
その導入手順から日本語化・使い方と設定などを解説していきます。

Helpie FAQ

Helpie FAQ - WordPress.org

Helpie FAQ は、ライブ検索機能を備えたレスポンシブなアコーディオン型のよくある質問(FAQ)ページが作れます。

作成した個別の FAQ ページは、カテゴリーでグループ分けができます。
カテゴリーでのグループ分けだけでなくて、専用グループでのグループ化も可能。

専用のウィジェットも搭載しており、
人気もしくは最近追加/更新された FAQ をウィジェットで表示できます。
※Elementor Page Builder が必要です。

WooCommerce とも統合可能で、
WooCommerce の商品ページに「よくある質問」タブを追加できます。
Gutenberg エディターにも対応しています。

Helpie FAQ DEMO – HelpieWP.com

文字色・背景色・枠線の色などよく使う色があるのであれば、
色を一元管理できるプラグイン「Central Color Palette」があると便利かも。
Central Color Palette の使い方 – WordPress 活用術

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

Gutenberg エディターでの動作

Gutenberg エディターに専用ブロックが追加されます。

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

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

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

インストール手順

Helpie FAQ をインストールするには 2 種類の方法があります。
下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化する。
Helpie FAQ – WordPress.org

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

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

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

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

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

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

日本語化

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

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

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

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

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

有効化すると

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

「Skip」をクリックしましょう。

専用メニュー

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

管理画面の「コメント」メニューの下に追加されています。

管理画面

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

使い方

FAQ ページを作成した後に FAQ を表示させたい場所にショートコード[helpie_faq]を記述するだけです。
FAQ ページの内容を絞り込みたいときには、
後述のショートコードビルダーを使用すると良いでしょう。
Gutenberg エディターでは、専用ブロックを使用しての表示も可能です。

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

個別の FAQ ページのタイトルと内容を入力します。

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

WordPress 標準のカテゴリーでは無くて、
FAQ 専用のカテゴリーを作成して設定することができます。

FAQ グループ(FAQ Groups)

グループ用ショートコードで表示することができます。

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

FAQ カテゴリー(FAQ Category)

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

WordPress 標準のカテゴリーと同じなので説明は省略します。

Insights

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

Pro 版のみの機能です。

設定(Settings)

一般(General)

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

  • Helpie FAQ Slug
    FAQ ページのスラッグを入力します。
  • Title
    FAQ ページのタイトルを入力します。
  • Show Search in FAQ
    FAQ 用のライブ検索バーを表示するかどうか。
  • Search Placeholder text
    検索バーでのプレースホルダー文字列を入力します。

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

  • Toggle
    開閉アイコンを表示するかどうか。
  • FAQ Open By Default
    デフォルトでのアコーディオンの開閉モードを選択します。最初の項目だけを開くか全てを開くかを選択できます。「None」だと全ての項目が閉じています。
  • Add FAQ Url Attribute
    FAQ の URL に属性を追加するかどうか。
  • Display Mode
    FAQ ページの表示モードを選択します。

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

  • Sort By
    個別ページの並び順を選択します。
  • Order
    昇順か降順かを選択します。
  • Limit(number of items)
    表示する FAQ ページの項目数を入力します。
    初期値:5

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

  • Enable wpautop
    自動整形機能(wpautop)を有効にするかどうか。
  • FAQs Shows Products Only
    商品のみ表示するかどうか。

スタイル(Style)

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

  • Theme
    AQ セクションのレイアウトで使用するテーマを選択します。
  • Toggle Icons
    Pro 版のみの機能。

ユーザー投稿(User Submission)

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

Pro 版のみの機能です。

統合(Integrations)

Heipie KB

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

Helpie KB との統合を有効化できます。

  • Enable FAQ in Helpie KB
    Helpie KB で FAQ を有効にするかどうか。
  • Show FAQ in Helpie KB Category Page
    Helpie KB のカテゴリーページで FAQ ページを表示するかどうか。

WooCommerce

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

WooCommerce との統合を有効化できます。

  • Show FAQ in WooCommerce
    WooCommerce で FAQ を表示するかどうか。
  • Show FAQ Search
    FAQ の検索機能を表示するかどうか。
  • Tab Title
    WooCommerce の商品ページで追加される FAQ タブのタイトルを入力します。

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

  • Product FAQ Relations
    Pro 版のみの機能。

ロードマップ(Roadmap)

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

Affiliation

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

表示例

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

実際に表示させると上のような感じで表示されます。

ショートコードビルダー

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

投稿編集画面からショートコードビルダーを起動できます。
※クラシックエディターの場合。

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

  • Title
    FAQ ページのタイトルを入力します。
  • Show Search in FAQ
    FAQ 用のライブ検索バーを表示するかどうか。
  • Search Placeholder text
    検索バーでのプレースホルダー文字列を入力します。

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

  • Toggle
    開閉アイコンを表示するかどうか。
  • FAQ Open By Default
    デフォルトでのアコーディオンの開閉モードを選択します。最初の項目だけを開くか全てを開くかを選択できます。「None」だと全ての項目が閉じています。
  • Add FAQ Url Attribute
    FAQ の URL に属性を追加するかどうか。
  • Display Mode
    FAQ ページの表示モードを選択します。

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

  • Sort By
    個別ページの並び順を選択します。
  • Order
    昇順か降順かを選択します。
  • Limit(number of items)
    表示する FAQ ページの項目数を入力します。
    初期値:5

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

  • Enable wpautop
    自動整形機能(wpautop)を有効にするかどうか。
  • FAQs Shows Products Only
    商品のみ表示するかどうか。
  • Categories
    カテゴリーで絞り込めます。

「Insert Shortcode」ボタンをクリックすると、
上記の設定でショートコードが生成されて挿入されます。

ショートコード

下記のショートコードを使用すると、任意の投稿や固定ページで FAQ ページを表示できます。

[helpie_faq]
[helpie_faq group_id='38'/]

専用ブロック

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

ブロックを設置するとプレビューで、上のような感じで表示されます。

Query Settings

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

設定できる項目の説明は省略します。

Title Settings

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

FAQ セクションのタイトルの文字色・揃え位置・枠線の色・背景色を選択します。

Single Item – Header Settings

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

各項目のタイトルの背景色・文字色・揃え位置・枠線の色を選択します。

Single Item – Body Settings

WordPressプラグイン「Helpie FAQ」の導入から日本語化・使い方と設定項目を解説している画像

各項目の内容の背景色・文字色・揃え位置を選択します。

代替プラグイン

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

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

URL

Helpie FAQ – WordPress.org

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