【コピペでOK】SwellのFAQブロックをテーマ改造なしでアコーディオン化する方法【functions.phpの編集不要】

当サイトのコンテンツは広告が含まれる事があります。
SwellのFAQブロックをテーマ改修なしでアコーディオン化する方法
こまったくん
SwellでFAQブロックを使ってQ&Aを作っているんだけど、長くなってきたのでアコーディオン化したいんだよね。でもfunctions.phpは編集したくないし、どうしたらいいかな?
Jシス レッド
投稿ページにCSSとJavaScriptのコードを貼るだけでアコーディオン化できるぞ!
このページで解決すること・出来ること
SWELLのFAQブロックをfunctions.phpの編集不要で、JavaScriptコードのコピペだけでアコーディオン化できる。
目次

構造化データ

SWELLのFAQブロックは、標準でアコーディオン化出来ないため、QAが長くなると視認性が落ちる場合があります。

では、アコーディオンブロックを使えばいいのでは?という意見もあると思いますが、SWELLのFAQブロックは、JSON-LDの構造化データを出力できるという大きな利点があります。

構造化データとは?

構造化データを出力する事で、Google検索で「リッチリザルト」として表示される可能性を高める事ができます。(必ずリッチリザルトとして表示されるわけではありません。)

「リッチリザルト」として表示された検索結果には、検索キーワードに関連した質問やその回答の一覧が含まれます。これにより、ユーザーが求めている情報をより迅速かつ視覚的にわかりやすく提供する事ができます。

この記事では、functions.phpの編集やテーマ改造不要で、JavaScriptとcssのコードを投稿ページごとにコピペするだけで、FAQブロックをアコーディオン化できる方法をご紹介します。

投稿ページにコードを追加してアコーディオン化する

投稿ページのCSS,JSの入力欄にCSS、JavaScriptのコードを追加しましょう。
HTMLに関しては編集不要です。

CSSコードを挿入

このコードは追加する事でアコーディオン開閉時の「+ / -」アイコンを追加できます。

CSSは投稿ページ下部にある「CSS用コード」に入力しましょう。

.faq_q {
    cursor: pointer;
    position: relative;
    padding-right: 30px; /* アイコン分のスペースを確保 */
}

.faq_q::after {
    content: '+';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    font-weight: bold;
}

.faq_q.active::after {
    content: '-';
    font-size: 2em;
    font-weight: bold;
}

.faq_a {
    display: none;
}
CSSコードを挿入
画像をタップ/クリックで拡大

JSコードを挿入

このコードはSwellのFAQボックスをアコーディオン化するJavaScriptのコードです。

JavaScript(JS)は投稿ページ下部にある「JS用コード」に入力しましょう。

1つ目のQAのみ開いた状態にしたい場合

document.addEventListener('DOMContentLoaded', function() {
    // 全てのFAQ回答要素を初期状態で隠す
    const faqAnswers = document.querySelectorAll('.faq_a');
    faqAnswers.forEach(function(answer) {
        answer.style.display = 'none';
    });

    // 全てのFAQ質問要素を取得
    const faqItems = document.querySelectorAll('.faq_q');

    // 最初のFAQアイテムをデフォルトで開く
    if (faqItems.length > 0) {
        faqItems[0].classList.add('active');
        faqItems[0].nextElementSibling.style.display = 'block';
    }
    
    // 各FAQ質問要素にクリックイベントを追加
    faqItems.forEach(function(item) {
        item.addEventListener('click', function() {
            // クリックされた質問の次の兄弟要素(回答部分)を取得
            const answer = this.nextElementSibling;
            
            // 回答部分がfaq_aクラスを持つ場合のみトグルする
            if (answer && answer.classList.contains('faq_a')) {
                // 回答部分の開閉をトグルする
                if (answer.style.display === 'block' || answer.style.display === '') {
                    answer.style.display = 'none';
                    item.classList.remove('active');
                } else {
                    answer.style.display = 'block';
                    item.classList.add('active');
                }
            }
        });
    });
});

全てのQAを閉じた状態にしたい場合

document.addEventListener('DOMContentLoaded', function() {
    // 全てのFAQ回答要素を初期状態で隠す
    const faqAnswers = document.querySelectorAll('.faq_a');
    faqAnswers.forEach(function(answer) {
        answer.style.display = 'none';
    });

    // 全てのFAQ質問要素を取得
    const faqItems = document.querySelectorAll('.faq_q');
    
    // 各FAQ質問要素にクリックイベントを追加
    faqItems.forEach(function(item) {
        item.addEventListener('click', function() {
            // クリックされた質問の次の兄弟要素(回答部分)を取得
            const answer = this.nextElementSibling;
            
            // 回答部分がfaq_aクラスを持つ場合のみトグルする
            if (answer && answer.classList.contains('faq_a')) {
                // 回答部分の開閉をトグルする
                if (answer.style.display === 'block' || answer.style.display === '') {
                    answer.style.display = 'none';
                    item.classList.remove('active');
                } else {
                    answer.style.display = 'block';
                    item.classList.add('active');
                }
            }
        });
    });
});
JSコードを挿入
画像をタップ/クリックで拡大

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

質問内容です。

質問の回答です。

質問内容です。

質問の回答です。

質問内容です。

質問の回答です。

注意点

他のCSSやJavaScriptと干渉する場合があります。
コード利用に伴い生じたいかなる問題に関しても、当サイトは責任を負いかねますので、ご注意ください。

目次