しばらく、FAQ表示にはFAQ managerというプラグインを利用していたのですが、更新がストップしていたこともあり、代替プラグインをさがしていました。
使い勝手の良さそうなプラグインがあったのでシェアします。
この記事公開時点では日本語の紹介記事は初かなと思います。
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 の使い方
有効化するとFAQというメニューが追加されます。
カスタム投稿形式ですので、カテゴリを作ることも可能です。
まずはカテゴリの追加
FAQというのは代替カテゴリに分けて表示することになるでしょう。
まずはカテゴリを追加しましょう。
FAQ > Categories
作り方は通常の投稿カテゴリを作る方法と変わりありません。
カテゴリ『Aについて』・・・スラッグ about-a
カテゴリ『Bについて』・・・スラッグ about-b
という二つを作成します。
FAQ記事の作成
それぞれのカテゴリに、いくつか記事を追加していきます。
カテゴリ『Aについて』
・・・Aについての解答1
・・・Aについての解答2
カテゴリ『Bについて』
・・・Bについての解答1
・・・Bについての解答2
といった階層にしてみたいと思います。
この時点で、
FAQ > All FAQ
で記事一覧を表示してみましょう。
記事タイトルの横あたりにマウスを合わせるとカーソルが矢印に変化して、ドラッグで並び替えも可能になります。
さて、ここで一点留意して欲しいのは、
FAQ記事エントリーがページとしても表示可能であるということです。
Aについての解答1のスラッグを『answer-a』にしていますが、
/faq/answer-a
というページも生成されます。
これを変更するオプションは無いようなので、個別FAQ記事はインデックスさせたくない!
という場合は、例えばAll in One SEO Packのmeta robotsを変更するとか、そういった対策は必要になります。
FAQ Manager だとその辺も設定できたんですけどね。。
FAQの表示(ショートコード)
表示については、ショートコードで行うことができます。
固定ページ等に、ショートコードを貼り付けましょう。
1点注意が必要なのは、プラグインによって『faq』というスラッグが自動生成されている点ですね。
そのため、固定ページにfaqというスラッグをつけることはできません。
『qa』とかで問題ないと思います。
カテゴリを分けたりできますし、デザインもパターンが用意されています。
まぁ、ショートコードの使い方はプラグインサイト
https://wordpress.org/plugins/flexible-faq/
にある通りなのですが、ショートコードにID カテゴリ デザイン のパラメーターを追加するだけです!
まぁ、ID指定をすることは無い様な気がしますけどね。
デザインテンプレート
カテゴリを指定しないと、FAQは全て表示されます。
pretty・・・
デフォルトデザイン。パラメーターを指定しないとこれになります。
jQueryでQAが開閉するアコーディオンアクション付きです。
ショートコード・・・[[faq]]もしくは[[faq style=”pretty”]]
表示例・・・
list・・・
ページ内リンクでの表示になります。
ショートコード・・・[[faq style=”list”]]
表示例・・・
block・・・
ブロックで区切られて表示されます。
ショートコード・・・[[faq style=”block”]]
表示例・・・
カテゴリ、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"]
デザインのカスタマイズ
実際に利用した、そして利用機会が多いであろう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; }
このように
・アイコン画像を作成し、任意のフォルダにアップして読み込む。
・枠線や余白のデザインを変更
といった形でサイトの雰囲気に合わせていきましょう。
まとめ
後から気付きましたが回答と解答が混在してますね。。。申し訳ない。。
色々なプラグインを試した結果、総合的にこのFlexible FAQ プラグインが便利だな~と思いました。
ご参考になれば幸いです!
はじめまして
英語が苦手なので、とても参考になりました。
ありがとうございます。
おおの様
コメントありがとうございました!
またお役に立てるような情報を更新していきたいと思います!
はじめまして。
こちらの記事を参考にプラグインを導入させていただいたのですが、
【デザインのカスタマイズ】部分で「CSSの上書きで可能です。」とありますが、厳密にはどこに書けばいいのでしょうか?
当方初心者で、かなり初歩的な質問になります。ご容赦ください…^^;
ヤマシタ様
はじめまして。コメントありがとうございます!
やり方は色々ありますが自分の場合は、子テーマに独自のCSSを読み込むようにして、そこにプラグインなどの上書き用CSSを追加することが多いです^^
オリジナルのテーマをそのままカスタマイズしている場合は、テーマのstyle.cssに追記することで上書き出来ます。
ダッシュボードから行っているのであれば、「外観」>「テーマ編集(style.css)」となります。
プラグインのCSSに直接上書きすることもできますが、プラグインの更新で変更内容が失われてしまいます。
オリジナルのテーマのstyle.cssに上書きした場合も、テーマのアップデートで変更内容が失われてしまうのご注意ください。
もし、書いたのに上書きされない・・ということでしたら、ブラウザのキャッシュか、cssの読み込まれる順番が関係しているかもしれません。
テーマのstyle.cssの後に、プラグインのcssが読み込まれている場合などがそれにあたります。
(せっかく追加したCSSの後に、元のCSSで上書きされて、意味がなくなってしまっている)
その場合は、
のように、#main(テーマによりますが、おそらく大概のテーマに使われています)といったIDセレクタを付けてあげることで、CSSの読み込み優先順位を強めてあげるとスタイルが効くかもしれません。
ご参考になれば幸いです!
データ移行はどのようになりますでしょうか?
Wordpress FAQ Manager のコンテンツがかなりあるため、この点が気になっています。
それ以外は、Wordpress5.0、PHP7 の環境で不具合が多発しているので、代替プラグインを探していましたので、こちらの記事は大変参考になりました。
>阿部様
コメントありがとうございます。
データ移行についてはプラグイン自体はサポートしていないかと思います。
手動でやるか、エクスポートしたデータを書き換える / 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のどちらかになってくるかもしれません。
参考にして頂ければ幸いです。