【SWELL】FAQブロックをアコーディオン化するカスタマイズ(コピペでOK)

2024年9月1日2024年10月20日

SWELLのFAQブロックをアコーディオン化するカスタマイズ方法をご紹介します。

SWELLのFAQブロックは、シンプルでキレイなデザインの上、FAQの構造化データも出力できるので、とても重宝するブロックです。

ただ、他の一部のテーマにあるようなアコーディオン式(開閉式）には対応していません。

FAQの内容が長いと、閉じられるようにしたいと思う方も少なくないと思います。

ここでは、CSSとJavascriptコードの追加だけで実現します。テーマファイルは編集しません。

WordPressテーマ「SWELL」公式サイトはこちら

SWELLの対応状況と他のテーマについて

SWELLのアコーディオンブロック対応状況

SWELLには、アコーディオンブロックというオリジナルブロックがありますが、FAQブロックはアコーディオン式になっていません。

アコーディオンブロックの要望は少なくないようですが、今のところ、SWELLテーマでは、制作者の方針として対応する必要はないとしているようです。

自分もFAQのアコーディオン化は制作側のエゴだと思ってる派なのでブロックにも実装してないんですが（要望多いのでいつも迷うけど…）、

まさか『アコーディオンを知らない人からは答えを掲載していないように見える』ことさえあるとは…🙄

やっぱFAQにはアコーディオン機能なくてよさそうかな🤔

了🌊SWELL | Arkhe開発（X）より

他のテーマのアコーディオンブロック対応状況

アフィンガー、Cocoonなども、SWELLのように、アコーディオンやトグル等の名称のブロックがあり、FAQブロックはアコーディオン化されていません。

一方、LIghtningの有料版で利用できる「VK Blocks Pro」や新しいテーマGOLD BLOG等は、アコーディオン化されたFAQブロックが実装されています。

VK Blocks Pro（アコーディオン）

GoldBlog（プリセットパーツ-アコーディオン）

特にGOLD BLOGは、18種類ものアコーディオンブロックが用意されています。
オリジナルブロックの種類が圧倒的に多いのが特徴のテーマで、価格が1万円以下とコスパも圧倒的にいいテーマです。

アコーディオン化したFAQブロックのサンプル

アコーディオン化したFAQブロックのサンプルです。
（２つめの回答に少し長いテキストが入っています）

閉じて質問だけ表示されている状態で、クリックすると回答が開き、もう一度クリックすると閉じます。

また、クリックが必要なことが分かりやすいよう、右側に＋マークを入れています。(開くと－マークになります）

スタイルは「ストライプ」ですが、他のスタイルにしても問題ありません。

質問1

回答1

質問2

回答2

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

２つのカスタマイズ方法

カスタマイズについては自己責任で行ってください。
カスタマイズにより予期しない動作が発生した際の対応は行っておりません。

FAQブロックの動作や表示は同じですが、ページごとにカスタマイズするか、サイト全体でカスタマイズするかで、少し内容が変わります。

ページ単位でカスタマイズ
ページの下部にある「カスタムCSS＆JS」にそれぞれコードを追加します。

アコーディオン化したいFAQブロックがあるページ、それぞれにコードを追加する必要があります。
サイト全体でカスタマイズ
JavaScriptはfunctions.phpを使ってサイト全体に読み込むようにします。

これにより、サイト全体でSWELLのQ&Aブロックがアコーディオン形式になります。

ページ単位でカスタマイズする方法

ページの下部にある「カスタムCSS＆JS」のそれぞれに、CSSコード、JSコードを追加するだけです。

カスタマイズのポイント

JavaScriptでアコーディオン動作を実装
質問のクリックによって、activeクラスの追加、削除を行い、該当する答え部分の表示・非表示が切り替わります。
CSSで表示とスタイルを制御
CSSでは、activeクラスの有無によって答え部分の表示/非表示を切り替えています。
- 非表示の答え部分: FAQの答え部分（ddタグ）はデフォルトではdisplay: none;に設定され、非表示になります。これはアコーディオンの閉じた状態を表します。
- アクティブ状態の答え表示: FAQアイテムにactiveクラスが付与されたとき、そのアイテム内のdd要素はdisplay: block;に変更され、答えが表示されます。
質問部分の装飾
::after疑似要素で質問部分に「＋」または「－」のアイコンを表示し、アコーディオンが開いているか閉じているかを視覚的に示しています。

ページの下部「CSS用コード」に追加するコード

.swell-block-faq dd {
  display: none;
  padding: 0 15px;
}

.swell-block-faq .active dd {
  display: block;
}

.swell-block-faq .faq_q {
  position: relative;
  cursor: pointer;
  padding-right: 30px;
}

.swell-block-faq .faq_q::after {
  content: '＋';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

.swell-block-faq .active .faq_q::after {
  content: '－';
}

ページの下部「js用コード」に追加するコード

document.addEventListener('DOMContentLoaded', function() {
  const faqItems = document.querySelectorAll('.swell-block-faq__item');

  faqItems.forEach(function(item) {
    const question = item.querySelector('.faq_q');

    question.addEventListener('click', function() {
      item.classList.toggle('active');
    });
  });
});

カスタマイズは以上で完了です。

サイト全体でカスタマイズする方法

多くのページでFAQブロックを使っていて、全てをアコーディオンにしたい場合、サイト全体でカスタマイズします。

子テーマのCSSコードとfunction.phpにコードを追加します。
個別ページでコードを追加する必要はありません。

ページ単位の場合と同じjs、CSSコードを使っています。

カスタマイズのポイント

アコーディオン式にする仕組みについては、ページ単位のカスタマイズのところで説明しており、それ以外のポイントです。

アクションフックの利用
add_action('wp_footer', function() { ... });
このコードを使うことで、JavaScriptコードをページのフッター部分に直接追加します。これにより、全てのページに適用され、functions.phpから簡単に管理できます。
JavaScriptコードの埋め込み
PHPの<?php ?>タグの中で、<script>タグを使用して、JavaScriptコードをページのフッターに埋め込んでいます。

子テーマのCSSに追加するコード

子テーマのCSSまたは、追加CSS(カスタマイザー）に以下のコードを追加します。
※「ページ単位でカスタマイズする方法」の場合のCSSコードと同じです。

.swell-block-faq dd {
  display: none;
  padding: 0 15px;
}

.swell-block-faq .active dd {
  display: block;
}

.swell-block-faq .faq_q {
  position: relative;
  cursor: pointer;
  padding-right: 30px;
}

.swell-block-faq .faq_q::after {
  content: '＋';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

.swell-block-faq .active .faq_q::after {
  content: '－';
}

function.phpにコードに以下のコードを追加

functions.phpの編集は自己責任でお願いします。
編集する前は、編集前に必ずバックアップを取って保存してください。もし編集後、エラーが出るようでしたら、バックアップファイルを元に復元してください。

次に、function.phpに以下のコードを追加します。

/* FAQアコーディオン化 */
add_action('wp_footer', function() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const faqItems = document.querySelectorAll('.swell-block-faq__item');
      
        faqItems.forEach(function(item) {
          const question = item.querySelector('.faq_q');
      
          question.addEventListener('click', function() {
            item.classList.toggle('active');
          });
        });
    });
    </script>
    <?php
});

カスタマイズは以上で完了です。