• このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

WPプラグインを使って簡単にFAQページを作る!①

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

こんにちは、プロクラスの渡辺です!
ここ最近ワードプレスのプラグインを使う楽しさを覚えたのでいろんなプラグインを探し求めているのですが、今回はFAQページ(よくある質問ページ)を作ろうと思います!

img

とはいっても、なかなかイイ感じのFAQプラグインに出会えず、一度は普通に固定ページで作ろうかとも思ったものです。でもまあそれも面倒だなと思ったのでやっぱり探してたどり着いたのが「Ultimate FAQ」というプラグインです!

Ultimate FAQを使えるようにする

まずはプラグインをインストールします!

01

❶プラグイン > 新規追加 で新規追加ページを開く
❷「faq」とキーワードを入れる
❸「Ultimate FAQ」を見つけたら「インストール」する
❹そのまま「有効化」する
完了!

簡単ですね!ワードプレスのこういうところがとっても好きです。
ところで、FAQプラグインってその他にもあるんですが、今回「Ultimate FAQ」を選んだのにはいくつか理由があります。

1.最終更新日が近い

02
これって結構見落としがちになりそうだな~と思ったのですが、確かに最終更新日が2年前とかだと「大丈夫…?」ってなりますよね。WPも更新され続けているものなので、こういうところも見て判断するときっといいんだと思います!

2.有効済みインストール

03
使ってる人が多いってことは、いいプラグインなんだろうなっていう、ただそれだけなんですけど。
きっと間違いないと思うんですよね!

FAQページを作る

もう作っちゃいます。早い。
その前に、左メニューにきちんと「FAQs」が表示されているか確認します!(画像はばっちりです!)
04

表示されている「FAQs」をクリックしたらダッシュボードが右側に出てきて、左メニューも開きます。

QAをつくります

では早速、QAを作っていこうと思います!とっても簡単です。
05

左メニューなら「Add New」、ダッシュボードはタブの中に「ADD NEW」が出ていると思うので、これをクリックします。

次に投稿ページや固定ページのようなものが表示されます。
06

❶「質問内容」を入力します。
❷「答え」を入力します。使い方は投稿と一緒です!
❸「公開」をします。
これで一つQAが完成しました!! 😉

普段使いなれている投稿と同じ感じで使えるのがとってもわかりやすくていい感じです 😳 
次は、QAをのせるページを作ります!

QAの一覧ページをつくる

07

固定ページで新規追加を選んで、新しい固定ページを作ります。

08

タイトル部分は「FAQ」でも「よくあるご質問」でもなんでもいいと思います。
本文にはこのショートコードを入力します!

[ultimate-faqs]

私は線を引いたところに、よくある質問です~的な文章を入力しました!

で、固定ページをみるとこんな感じです。
09ちょっと表示とかおかしいのは、質問内容を入力したところが<h4>タグで表示されているのですが、このサイトでは<h4>タグでボタンのデザインを使用している事・フォントをcssで変えているためこのようになっています。そういったことを一切されていない場合は特に問題なく表示されていると思います!

そのため、cssをいろいろいじって最終的にこうなりました! 😎 
10結構cssをいじっているので、全然違う~!!ってなるかもしれないんですけど、大丈夫です!
css以外でもできることがあるので下でまとめます!
ともあれ、FAQページが完成しました!!! 😳 
ちなみに、有料だと簡単にデザインを変更できるみたいなんですが、ちょっとでもcssを書ける人は、cssを追加するところがあるので、自力でどうにでもできるのもいいところですね 😆

FAQ Settings(OPTIONS)でいろいろ変えてみる

このプラグイン、無料でも結構オプションがちゃんとしているので思い通りにしてみ下さい 😉 
ちゃんとした説明は第2回でしようと思いますが、簡単に説明します!

11

Custom CSS FAQのデザインをCSSで追加・上書きできます。
私はここでいろいろ調整しました!
Scroll To Top

ブラウザを開いたときにFAQの一番上にスクロールする。
これがONになっていると、質問を開くたびにスクロールしちゃう感じみたいです。
うっとおしいなと思ったのでOFFにしました! 😉

Show Editor Helper WordPressページ/ポストエディタの上にショートコードビルダーを表示する
Turn On Comment Support コメントをサポートする
Include Permalink

パーマリンクアイコンを表示する
パーマリンクアイコンはいらなかったので「None」で削除しています。
その他の選択肢はどこに表示させるか、という感じみたいです。

Permalink Destination いまいちわからなかったので「Main FAQ Page」にしていますがこれで特に問題はないと思います。
Set Access Role これもいまいちわからないので初期値にしています。

FAQ Toggle クリックされたときによくある質問を表示する
FAQ Accordion FAQはアコーディオンにするか(一度に開くことができるFAQは1つのみ)
FAQ Category Toggle FAQをカテゴリ別にグループ化
FAQ Category Accordion カテゴリのアコーディオンの有無(だとおもう)
FAQ Expand/Collapse All FAQすべてを展開/折りたたむ

Hide Categories 各FAQのカテゴリを非表示にする
Hide Tags 各FAQのタグを非表示にする
Display All Answers すべての回答を表示
Display Post Author

投稿者の表示名をFAQのタイトルの下に表示
初期値はONになっているので、OFFにしました。

Display Post Date

投稿が作成された日付をFAQのタイトルの下に表示
初期値はONになっているので、OFFにしました。

Display ‘Back to Top’

ページの先頭に戻るリンクを表示
質問数が多くなってきたらもしかしたら便利かも…?

これだけのことが無料版で設定できるのでありがたいですね!
その他にもいろいろあるみたいなので、第2回でその辺もご紹介できたらいいな~と思います! 😉 

おわりに

簡単にFAQページが作れたと思います!
そもそもワードプレスの使い方がわからないよ~!という方には、プロクラスで定期的に開催している、「簡単ホームページ制作!はじめてのWORD PRESS」講座をぜひご検討ください!
一日でホームページが作れちゃうのでとってもおススメです!! 😉

▼ここから応募していただけます!
https://proclass.jp/class/detail1301/

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
各地で開催中!

【簡単ホームページ制作!はじめてのWordPress講座】
好評につき、大阪会場もスタート!

WordPress東京
【簡単ホームページ制作!はじめてのWordPress】講座詳細はこちら