MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


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

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

icons-faq

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

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

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

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

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

デザインを変更できる

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

Flexible FAQ のダウンロード

プラグイン名
Flexible FAQ 0.2
プラグインサイト
[browser-shot width=”600″ url=”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 プラグインが便利だな~と思いました。
ご参考になれば幸いです!

おすすめコンテンツ

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

  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の読み込み優先順位を強めてあげるとスタイルが効くかもしれません。

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

  4. データ移行はどのようになりますでしょうか?
    Wordpress FAQ Manager のコンテンツがかなりあるため、この点が気になっています。
    それ以外は、Wordpress5.0、PHP7 の環境で不具合が多発しているので、代替プラグインを探していましたので、こちらの記事は大変参考になりました。

    1. >阿部様
      コメントありがとうございます。
      データ移行についてはプラグイン自体はサポートしていないかと思います。
      手動でやるか、エクスポートしたデータを書き換える / DBを書き換える といった方法をとるしかないでしょう。
      このプラグインもかなり前から更新がストップしていますので、乗り換えても今後同様に不具合が出ることも考えられます。

      1.手動もしくはプラグインでアコーディオン型式のFAQを導入する
      現在のQAの表示形式にもよりますが、単純に折りたたみ式のFAQを利用したいのであればアコーディオンを手動またはプラグイン(ショートコードでアコーディオンにできる)で導入する方法が考えられます。
      「Shortcodes Ultimate」「Arconix Shortcodes」などにはそういった機能があります。(もちろん、JSを利用して独自に導入することも考えられます)
      1ページの中で全FAQを表示するのであればこちらの方がシンプルなこともありますが、1記事単位でFAQを管理・表示したい場合は向かないと思います。

      2.投稿タイプを変更する(DBを編集)
      プラグインの中には投稿タイプを変更できるものがあります。「Post Type Switcher」というプラグインはカスタム投稿を通常投稿にスイッチしたりできる機能があるため、FAQ Managerの投稿タイプをFlexible FAQにスイッチすることもできるかもしれません。※これは実際にはやったことがないので要検証です。
      DBを直接いじる方法もあるのかもしれませんが、僕はそこまではやったことがありません。

      1,2のどちらかになってくるかもしれません。
      参考にして頂ければ幸いです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA