FAQ manager の更新が止まってるので代替プラグインを探してみました。こっちの方がオススメ! Flexible FAQ

しばらく、FAQ表示にはFAQ managerというプラグインを利用していたのですが、更新がストップしていたこともあり、代替プラグインをさがしていました。

icons-faq

使い勝手の良さそうなプラグインがあったのでシェアします。
この記事公開時点では日本語の紹介記事は初かなと思います。

FAQにプラグインを導入するメリットというのは

FAQの並び替えがドラッグで出来る

FAQのカテゴリ分け表示が可能

ショートコードで簡単表示

デザインを変更できる

といったものがあると思います。これらにマッチしたFAQプラグインをご紹介します。

Flexible FAQ のダウンロード

プラグイン名
Flexible FAQ 0.2
プラグインサイト
https://wordpress.org/plugins/flexible-faq/

プラグイン > 新規追加 > Flexible FAQ で検索で出てきます。

Flexible FAQ の使い方

FlexibleFAQ_01

有効化するとFAQというメニューが追加されます。
カスタム投稿形式ですので、カテゴリを作ることも可能です。

まずはカテゴリの追加

FAQというのは代替カテゴリに分けて表示することになるでしょう。
まずはカテゴリを追加しましょう。

FAQ > Categories

作り方は通常の投稿カテゴリを作る方法と変わりありません。

カテゴリ『Aについて』・・・スラッグ about-a
カテゴリ『Bについて』・・・スラッグ about-b
という二つを作成します。

FlexibleFAQ_05

FAQ記事の作成

それぞれのカテゴリに、いくつか記事を追加していきます。

カテゴリ『Aについて』
 ・・・Aについての解答1
 ・・・Aについての解答2

カテゴリ『Bについて』
 ・・・Bについての解答1
 ・・・Bについての解答2

といった階層にしてみたいと思います。

FlexibleFAQ_08

この時点で、
FAQ > All FAQ
で記事一覧を表示してみましょう。
記事タイトルの横あたりにマウスを合わせるとカーソルが矢印に変化して、ドラッグで並び替えも可能になります。

FlexibleFAQ_11

さて、ここで一点留意して欲しいのは、
FAQ記事エントリーがページとしても表示可能であるということです。

Aについての解答1のスラッグを『answer-a』にしていますが、
/faq/answer-a
というページも生成されます。

FlexibleFAQ_15

これを変更するオプションは無いようなので、個別FAQ記事はインデックスさせたくない!
という場合は、例えばAll in One SEO Packのmeta robotsを変更するとか、そういった対策は必要になります。

FlexibleFAQ_18

FAQ Manager だとその辺も設定できたんですけどね。。

FAQの表示(ショートコード)

表示については、ショートコードで行うことができます。
固定ページ等に、ショートコードを貼り付けましょう。

1点注意が必要なのは、プラグインによって『faq』というスラッグが自動生成されている点ですね。
そのため、固定ページにfaqというスラッグをつけることはできません。
『qa』とかで問題ないと思います。

カテゴリを分けたりできますし、デザインもパターンが用意されています。

まぁ、ショートコードの使い方はプラグインサイト
https://wordpress.org/plugins/flexible-faq/
にある通りなのですが、ショートコードにID カテゴリ デザイン のパラメーターを追加するだけです!
まぁ、ID指定をすることは無い様な気がしますけどね。

デザインテンプレート

カテゴリを指定しないと、FAQは全て表示されます。

pretty・・・

デフォルトデザイン。パラメーターを指定しないとこれになります。
jQueryでQAが開閉するアコーディオンアクション付きです。

ショートコード・・・[[faq]]もしくは[[faq style=”pretty”]]
表示例・・・
FlexibleFAQ_22

list・・・

ページ内リンクでの表示になります。

ショートコード・・・[[faq style=”list”]]
表示例・・・
FlexibleFAQ_25

block・・・

ブロックで区切られて表示されます。

ショートコード・・・[[faq style=”block”]]
表示例・・・
FlexibleFAQ_28

カテゴリ、IDのパラメーター

[[faq category=”カテゴリスラッグ”]]

[[faq ids=”FAQ記事ID”]]

となります。

使用例

見出しと、カテゴリ分けのショートコードを固定ページに記入していきます。

記入例:

<h2>見出し:Aについて</h2>
[faq style="pretty" category="about-a"]
(カッコはコード表示の兼ね合いで全角にしてます)
<h2>見出し:Bについて</h2>
[faq style="pretty" category="about-b"]

表示例:
FlexibleFAQ_32

デザインのカスタマイズ

実際に利用した、そして利用機会が多いであろうprettyのデザインカスタマイズについて触れたいと思います。
CSSの上書きで可能です。

/* 余白の調整 */
.faq-pretty ul{
margin-left: 2%;
}
/* Question部分の画像置換え&枠線色変更 */
.faq-pretty .faq-question {
background: #FFF url(images/faq-bg.gif) no-repeat left center;
border-color:#9c1e0c;
color: #333;
}
/* Answer部分の画像置換え&枠線色変更 */
.faq-pretty .faq-item.highlight .faq-question {
background: #fff url(images/faq-bg-hover.gif) no-repeat left center;
border-color: #E99213;
border-bottom: 0;
color: #E99213;
}
.faq-pretty .faq-answer {
margin-left: 0px;
border-color:#E99213;
border-top: 0px;
}
.faq-pretty .faq-answer p{
margin-left: 0 !important;
margin-bottom:1em !important;
}

表示例:閉じている状態
FlexibleFAQ_35

表示例:回答を開いた状態
FlexibleFAQ_38

このように
・アイコン画像を作成し、任意のフォルダにアップして読み込む。
・枠線や余白のデザインを変更
といった形でサイトの雰囲気に合わせていきましょう。

まとめ

後から気付きましたが回答と解答が混在してますね。。。申し訳ない。。

色々なプラグインを試した結果、総合的にこのFlexible FAQ プラグインが便利だな~と思いました。
ご参考になれば幸いです!

コメントをどうぞ

  1. はじめまして

    英語が苦手なので、とても参考になりました。
    ありがとうございます。

    1. おおの様

      コメントありがとうございました!
      またお役に立てるような情報を更新していきたいと思います!

  2. はじめまして。
    こちらの記事を参考にプラグインを導入させていただいたのですが、
    【デザインのカスタマイズ】部分で「CSSの上書きで可能です。」とありますが、厳密にはどこに書けばいいのでしょうか?
    当方初心者で、かなり初歩的な質問になります。ご容赦ください…^^;

  3. ヤマシタ様
    はじめまして。コメントありがとうございます!
    やり方は色々ありますが自分の場合は、子テーマに独自のCSSを読み込むようにして、そこにプラグインなどの上書き用CSSを追加することが多いです^^
    オリジナルのテーマをそのままカスタマイズしている場合は、テーマのstyle.cssに追記することで上書き出来ます。
    ダッシュボードから行っているのであれば、「外観」>「テーマ編集(style.css)」となります。
    プラグインのCSSに直接上書きすることもできますが、プラグインの更新で変更内容が失われてしまいます。
    オリジナルのテーマのstyle.cssに上書きした場合も、テーマのアップデートで変更内容が失われてしまうのご注意ください。

    もし、書いたのに上書きされない・・ということでしたら、ブラウザのキャッシュか、cssの読み込まれる順番が関係しているかもしれません。
    テーマのstyle.cssの後に、プラグインのcssが読み込まれている場合などがそれにあたります。
    (せっかく追加したCSSの後に、元のCSSで上書きされて、意味がなくなってしまっている)
    その場合は、

    #main .faq-pretty ul{
    }
    

    のように、#main(テーマによりますが、おそらく大概のテーマに使われています)といったIDセレクタを付けてあげることで、CSSの読み込み優先順位を強めてあげるとスタイルが効くかもしれません。

    ご参考になれば幸いです!

コメントを残す

メールアドレスが公開されることはありません。

スパム対策にご協力ください *

コメントの前にご確認ください。なにか不具合などあればtwitterまでご連絡ください

  • 具体的なエラー画面などがある場合は添付してください。(1ファイルの上限は2メガバイト・3枚までUP可能です。)
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 実作業は行いません。ご依頼の場合はお問い合わせからお願い致します。
  • コメントの回答による一切の不利益および損害に関し、責任を取ることはできません。(実作業をご依頼いただいた場合は別です。)