WordPress個別サポート

FAQ(よくある質問)に限りませんが、次のような開閉式のコンテンツ(いわゆるアコーディオン)を作りたいこともあります。

開閉式コンテンツ(アコーディオン)の例

開閉式コンテンツ(アコーディオン)の例

jQueryやCSSを駆使して自作すれば勉強になりますが、WP Canvas - Shortcodesプラグインを使うと、簡単に開閉式のFAQを設置することができます。

以下、手順を簡単に紹介します。

スポンサーリンク

開閉式(アコーディオン)コンテンツの作成

「プラグイン」‐「新規追加」メニューからWP Canvas - Shortcodesプラグインをインストール、有効化します。

インストールが完了したら、FAQを設置したい投稿または固定ページの編集画面をビジュアルエディタで開き、ツールバーに表示されたWP Canvasメニューから「jQuery 」‐「Accordion」をクリックします。

開閉式コンテンツの作成(「jQuery 」‐「Accordion」)

開閉式コンテンツの作成(「jQuery 」‐「Accordion」)

次のような開閉式コンテンツのテンプレートが作成されます。

開閉式コンテンツのテンプレート

開閉式コンテンツのテンプレート

「Section 1」「Section 2」が見出し(FAQの質問など)、「Sample Content」が内容(FAQの回答など)にあたります。表示してみるとピンとくるはずです。

サンプルFAQの表示結果

サンプルFAQの表示結果

あとは「Section 1」「Section 2」や「Sample Content」を修正すればFAQを構築できそうですが、質問を増やしたり減らすときに、どのブロックを追加したり削除すればよいかわかるようにテンプレートの構造を以下にまとめておきます。

開閉式コンテンツのテンプレート構造

開閉式コンテンツのテンプレート構造

  • wc_accordion(1) --- 全体のブロックです。
  • wc_accordion_section(2)(3) --- 個別項目のブロックです。
  • Section 1(4)/Section 2(5) --- 個別項目の見出しです。
  • Sample Content(6)(7) --- 個別項目の内容です。

テンプレートには2項目が含まれていますが、wc_accordion_sectionブロックをコピーすれば項目を増やすことができます。

開閉式コンテンツの動作イメージ

作成した開閉式コンテンツは次のようなブロックとして動作します。見出しをクリックすると、内容を見ることができます。

開閉式(アコーディオン)のコンテンツブロックです。WP Canvas - Shortcodesプラグインで作成しています。見出しをクリックすると内容が表示される仕組みです。

開閉式のFAQ(よくある質問)の構築などに役立ちます。一覧表示された質問をクリックして回答を参照できるコンパクトなFAQです。

はい。WordPress個別サポートで一緒に作業させていただきます。使い方がよくわからない場合やコードの編集がうまくいかない場合はご相談ください。

あとは自由にカスタマイズしてFAQなどの開閉式コンテンツを作ってみてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート