【WordPress】アコーディオンスタイルのFAQプラグインHTML5 Responsive FAQ

WordPress

March 5, 2017

HTML5 Responsive FAQはサイトによくある質問をアコーディオンスタイルで作成するプラグイン。ショートコードで設置でき、カテゴリー分けも可能。

HTML5 Responsive FAQプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> HTML5 Responsive FAQを検索
有効化にするとResponsive FAQとFAQsが追加されます。

Responsive FAQ

Category/Main title font size カテゴリ/メインタイトルのフォントサイズ
Text color of question 質問のテキストの色
Background color of question 質問の背景色
Text size of question (in pixels) 質問のテキストサイズ(ピクセル)
Select heading type for question 質問の見出しの種類を選択します
Text color of answer 回答のテキストの色
Background color of answer 回答の背景色
Text size of answer (in pixels) 回答のテキストサイズ(ピクセル)
Select style of bullet 箇条書きのスタイルを選択
Background color of bullet +の背景色
Gap between 2 FAQs (in pixels) 次の質問との余白(ピクセル単位)

FAQs

後程FAQを分けて表示させたい場合はカテゴリーは追加しておきます。

FAQのタイトルと答えを入力、カテゴリー分けする場合はカテゴリーを選択し、最後に公開をクリックします。

ショートコード

ショートコードを表示させたい投稿や固定ページにコピペします。

  1. [hrf_faqs] すべてのFAQを表示。
  2. [hrf_faqs category='uncategorized'] uncategorizedというカテゴリーのFAQのみ表示。
  3. [hrf_faqs category='uncategorized,wordpress,plugins'] uncategorized,wordpress,pluginsという3つのカテゴリーのいずれか1つでも該当するFAQを表示。
  4. [hrf_faqs category='uncategorized,wordpress,plugins' title='My Awesome Title'] 上記と同じようにカテゴリー分けし、My Awesome Titleというタイトルを表示。

表示例

[hrf_faqs]で表示。展開前

展開後。


[hrf_faqs category=’uncategorized,wordpress,plugins’ title=’My Awesome Title’]の例。
タイトルはMy Awesome Title、カテゴリー分けをし、この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。-2を該当しないカテゴリーに変更しています。
画像も問題なく挿入できるみたいです。テーマはTwenty Fourteenを使用。

ソース

Responsive FAQの設定はデフォルト状態です。

<div class="hrf-faq-list">
<h2 class="frq-main-title">My Awesome Title</h2>

<article class="hrf-entry" id="hrf-entry-517">
<h3 class="hrf-title close-faq" data-content-id="hrf-content-517"><span></span>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。-1</h3>
<div class="hrf-content" id="hrf-content-517">
<p>ここに答えが入ります。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
ここに答えが入ります。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
ここに答えが入ります。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
ここに答えが入ります。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
ここに答えが入ります。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</div>
</article>

<article class="hrf-entry" id="hrf-entry-519">
<h3 class="hrf-title close-faq" data-content-id="hrf-content-519"><span></span>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。-3</h3>
<div class="hrf-content" id="hrf-content-519">
<p>ここに答えが入ります。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
</div>
</article>

</div>

Latest Posts

Related Posts