「Lightning」は株式会社ベクトルが開発した無料のWordPressテーマです。
＊Lightning シンプルでカスタマイズしやすいBootstrapベースのWordPress公式テーマ
前回に引き続き、Lightningのカスタマイズ「その９」。
前回まではトップページを制作してきましたが、最終回の今回は「よくある御質問（FAQ）」ページを作成します。
このように作る予定です↓
＊よくある御質問 | 北福岡歯科クリニック
（架空のサンプルサイトです）
～ 目次 ～
- よくある御質問（FAQ）ページの作成
- プラグイン「Ultimate FAQ」の追加
- 「Ultimate FAQ」の設定
- 初期表示はダサい
- CSSでカスタマイズ
- カテゴリー分けの手順
- 本シリーズはここまで
よくある御質問（FAQ）ページの作成
この歯科サイトのサブページは全部で４つあります。
「診療案内」
「よくある御質問」
「お問合せ」
「スタッフブログ」
このうち「診療案内」は、普通に記述してるだけで特別なカスタマイズは何もしてません。
「お問合せ」は、定番プラグイン「Contact Form 7」でフォームを実装しています。
「Contact Form 7」に関してはネット上に山のように解説記事があるので、分からない方はググって参照してください。
「スタッフブログ」もLightningの投稿ページをそのまま使ってます。
なので、この３ページはあえて解説不要でしょう。
問題は「よくある御質問」のページで、ここはちょいと手がかかっています。
このページは「Ultimate FAQ」というプラグインを使ってます。
アコーディオンタイプのFAQコーナーで、質問事項をクリックすると答えがパカッと開く形式にしてあります。
これの作成方法とCSSカスタマイズを解説します。
プラグイン「Ultimate FAQ」の追加
まず、プラグイン「Ultimate FAQ」を新規追加します。
WP管理画面「プラグイン」⇒「新規追加」
検索欄に「Ultimate FAQ」と入れます。
インストールして有効化します。
ちなみにFAQ系のプラグインは有名なものが幾つかありますが、その大半が最終更新「一年前」などで、放置されているとしか思えないものが多いです。
これに対して「Ultimate FAQ」は更新が多めなので安心です。
さて、有効化するとWP管理画面左サイドに「FAQs」という項目が追加されます。
「FAQs」を開くとレビュー（プラグインの感想）を求める画面が表示されますが、こいつは無視してけっこうです。
「Never ask me again（二度と聞くな！）」をクリックしましょう。
すると「Ultimate FAQ」のトップ画面が表示されます。
英語で何が何だか分かりませんが、大丈夫です。
必要な項目だけ記入すればOKです。
まず、上辺のタブから「Add New」をクリックします。
「よくある御質問」の新規投稿画面が開きます。
普通の投稿と同じように記入します。
タイトル欄に「質問」
コンテンツ欄に「回答」
を入れます。
この調子で必要な数だけ投稿します。
サイトには投稿が新しい順に上から表示されるので、そこらへんの順番を意識して投稿していってください。
「Ultimate FAQ」の設定
全ての投稿が完了したら、今度は「Settings」タブを開きます。
「Ultimate FAQ」の設定画面が表示されます。
項目が多く、かなり詳細な設定が可能となっています。
ですが、大半が初期設定のままで大丈夫です。
初期設定から変更する項目のみ解説します。
また、変更が必要なのは、左横タブの「Basic」内の項目のみです。
それ以外の左横タブは開く必要はありません。
「Scroll To Top」Yes⇒Noに変更
これは質問事項をクリックして回答を開くと、その項目がブラウザのトップに来るように画面をスクロールさせますか？という設定です。
（何を言ってるんだか分からないと思いますがｗ）
これは実用性が無く非常にウザいので「No」にします。
「Include Permalink Icon」Yes⇒Noに変更
回答欄の下にリンクアイコンを出しますか？という設定です。
必要無いので出しません。
「FAQ Accordion」No⇒Yesに変更
回答欄の開閉はアコーディオン方式か？という設定です。
Yesにすると一度に開く質問は１つのみになります。
「Display Post Author」Yes⇒Noに変更
質問の作成者名を表示しますか？という設定です。
必要ありません。
「Display Post Date」Yes⇒Noに変更
質問の作成日時を表示しますか？という設定です。
サイトを見るお客様からすると、作成日時など必要無いのでここは非表示にします。
「Hide Categories」No⇒Yesに変更
質問のカテゴリーを非表示にしますか？という設定です。
質問事項をカテゴリー分け（＊後述）する場合は、これを非表示に変えておきます。
以上の項目を変更し終わったら、最下部の「Save Changes」ボタンをクリックして保存します。
これで設定の変更は完了です。
初期表示はダサい
そして、「よくある御質問」ページの編集画面を開き、
FAQセクションを入れたい箇所に
[ultimate-faqs]
というショートコードを記入してください。
これでFAQセクションが表示されます。
では「よくある御質問」ページを見てみましょう。
どういう風に表示されているのか？
・・ダサいですね (^_^;)
しかも質問事項をクリックすると回答欄が開くのは良いのですが、なんか余計な表示までがくっついてきます。
これは個々の質問事項が一つのページと認識されてるので、
「お問い合わせ情報」
「SNSボタン」
この２つが質問事項ごとに設置されるわけです。
このままでは使いものになりません。
CSSでカスタマイズします。
CSSでカスタマイズ
コードを子テーマCSSに追加していきます。
まず、「質問」の方から変えていきます。
質問の左にあるアイコンを消します。
.ewd-ufaq-post-margin-symbol { display:none; }
アイコンが消えました。
質問のデザインを変更します。
.ufaq-faq-title { background-color:#f8a834; } .ufaq-faq-title-text h4 { background-color:#f8a834; color:#fff; }
スッキリしました。
次に、「回答」の方を変えます。
あの邪魔な「お問い合わせ情報」「SNSボタン」を消します。
.ufaq-faq-list .veu_contact { display:none; } .ufaq-faq-list .veu_socialSet { display:none; }
消えました。
回答欄がスッキリした分、味気なくなったので軽く枠線で囲います。
.ufaq-faq-body { border:solid 1px #f8a834; border-top:none; padding-top:30px !important; padding-left:10px; }
枠線が表示されました。
カテゴリー分けの手順
本サイトでは質問事項は５つのみ掲載してますが、サイトによっては多くの質問を載せる場合もあると思います。
その場合は質問事項をカテゴリー分けします。
以下、カテゴリー分けに関して軽く触れておきます。
質問事項のカテゴリーは「Categories」から記述します。
「名前」と「スラッグ（英数字）」を記入して作成します。
例として２つカテゴリーを作りました。
各カテゴリー名をクリックしてみると、ページ上部にそれぞれショートコードが記述されています。
（＊このコードの内容はそれぞれの記入したスラッグによって異なります）
このコードを「よくある御質問」ページの編集画面に記述すると、そのカテゴリーに属する質問のみが表示されます。
そして、各質問事項をカテゴリー別に分けていきます。
投稿画面のカテゴリー欄にて該当するものにチェックを入れて更新します。
こういう感じで質問をカテゴリー分けしていきます。
表示例↓（質問事項の色は変えてあります）
本シリーズはここまで
さて、今回のカスタマイズ結果です。
「よくある御質問」ページを作成しました。
この種のページは、サイト閲覧者にとって便利というだけではありません。
サイト運営側にとっても閲覧者からの問合せの手間（メールや電話対応）を減らすというメリットがあります。
それと私の経験則的に、このページが有るとSEO的にかなりプラスになるように感じます。
なので、企業や店舗サイトを作る際には、よくある御質問（FAQ）ページの設置はお薦めです。
さてさて、今回にて「Lightningカスタマイズ」シリーズは終了です。
Lightningに関していろいろ欠点も上げてきましたが、同テーマは国産の無料WPテーマの中では最優秀の一つだと思います。
