Q&Aのページを簡単にきれいに更新できるようにするプラグインFlexible FAQ

昨日のことですがコワーキングスペース8Beatの「よくある質問」ページが更新されたというお知らせを見て、どれどれ…と見に行ったところ、ちょっと見づらいなぁ…と思いました。
以前からQ&A(もしくはfaq)のプラグインに興味があって使ってみたいなと思っていたのでこの機会にプラグインをいれてページをきれいにしてみました(^^)/

8Beatでは会員様は1日100枚まで印刷無料！というお知らせ(^^)/

それは、

というすばらしいお知らせでした(^^)/。これは月額会員になるメリットが大きいですよね！

サイトを見てみると、

うーん、残念。画像の周りの文字回り込みや、改行がうまくいってないところがあります。

固定ページで書いているのですが、こういうQ&Aページは追加や削除が多くあると思うので、プラグインを利用した方が使い勝手が良いと思われます。ということでプラグインを入れる事にしました。

Q&A(faq)プラグインはたくさんありすぎて、その中からFlexible FAQを選んだ訳

ダッシュボード プラグイン＞新規追加　で　faq　を検索してみると、

こんな感じで、2,380個もプラグインがあるようです。

WordPress　faq　プラグイン　でググると良く出てくる　faq Manager　もあるのですが、

最終更新が3年前というところが気になります。そこで、他にないのか探して、

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

こちらの記事を見つけました。

今時点だと1年以上更新していないということですが、まぁ3年前よりいいし、記事を見たときに折りたたみで表示するデザインが気に入ったのでこのプラグインを使うことにしました。

Flexible FAQ のインストール

ダッシュボード プラグイン＞新規追加　で　Flexible FAQ　と入力して検索し、

今すぐインストールをクリック。

プラグインを有効化　をクリック。これでインストール終了です。

Q&Aの記事を入力する

ダッシュボード　に新しくできたメニュー　FAQ　をクリック

投稿や固定ページのように記事が書けそうです。ここではQ&Aの1組ごとに1つの記事を書いていきます。

新規追加　をクリック

こんな感じに普通に記事を書きます。公開 をクリック

この記事を普通に表示すると

普通の投稿ページのように見えます。Q&Aのページでどのように表示されるかを確認するには

新しく固定ページを作って、

こんな風に　

[faq]

とだけ入力します。これを表示すると、

先ほど FAQ　で追加した記事のタイトルだけ表示されています。

+　をクリック

質問に対する答えが表示されました。このデザインが良いなーと思ってFlexible FAQを使おうと思いました。

FAQで記事をどんどん追加します。そして先ほどの　よくある質問　ページを見ると

追加したQ&Aの一覧が表示されました！これでQ&Aページの作成は終了です。

ここで一つ注意があるのですが

[faq]

を入力して表示するページのスラッグには決して　faq　という名前を付けてはいけません(^_^;。すでにそのスラッグを使っていたら変更しておいてください。このFlexible FAQプラグインが　faq　というスラッグを使うので同じスラッグを使ってしまうと表示が、

こんな感じになって「え～！なんで～なんで～さっきまでうまく表示されていたのに…(頭混乱)」となります(実話)。

追加したQ&Aのページをメニューに追加する

追加したQ&Aのページをメニューに追加します。

ダッシュボード　外観＞メニュー をクリック

今回の場合、置き換えなので先に現在のメニューにある　よくある質問　を削除します。

左側固定ページにある　新しく作った　よくある質問　にチェックを入れて　メニューに追加　をクリック

右側のメニュー一番下に追加されました。これを先ほどの位置にクリックしてドラッグ

ドロップします。

忘れずに右下の　メニューを保存　をクリック

表画面のメニューで、

今追加した　よくある質問　をクリックすると、

Flexible FAQ　で作った新しい　よくある質問　ページが表示されました(^^)/

まとめ:Flexible FAQを使うとかんたんにかわいいQ&Aページができる

こんな感じで簡単にQ&Aページを作ることができました(^^)/

表示方法は他に

list　という指定で、

こんな感じになったり、

block　という指定で

こんな感じになったりします。

他にカテゴリー別に表示させたり、CSSを追加して色などをカスタマイズすることもできるようです。それについてはまた機会があったら書いてみたいと思います(^^)/。

[amazon_searchlink search=”WordPressデザイン”]