こまったくん
SwellでFAQブロックを使ってQ&Aを作っているんだけど、長くなってきたのでアコーディオン化したいんだよね。でもfunctions.phpは編集したくないし、どうしたらいいかな?
投稿ページに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;
}
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');
}
}
});
});
});
FAQブロック アコーディオン化のサンプル
注意点
他のCSSやJavaScriptと干渉する場合があります。
コード利用に伴い生じたいかなる問題に関しても、当サイトは責任を負いかねますので、ご注意ください。