MENU
他にはない情報だと自負しています
お問い合わせ
お問い合わせ
  1. ホーム
  2. SWELL
  3. SWELL FAQブロックをカスタマイズ｜アコーディオン（開閉式）にする【有料級】

SWELL FAQブロックをカスタマイズ｜アコーディオン（開閉式）にする【有料級】

SWELL
カスタマイズ

SWELLのFAQブロックは皆さん利用していますか？

SWELLのFAQブロックは、JSON-LDの構造化データを出力できるので利用しているSWELLユーザーは多いと思います。

SWELLのFAQブロックをアコーディオンのような開閉式にしたいと思ったことはないでしょうか？

残念ながらSWELLのFAQブロックは開閉式には対応していません。

この記事では、SWELLのFAQをアコーディオンのような開閉式にするカスタマイズをご紹介します。

SWELL FAQブロックの欠点

SWELLのFAQブロックはQとAが常に見えていて、項目が増えてくると記事が長くなってしまいます。

そうすると質問を探すのがとても大変になります。

FAQは、Qの部分だけ見えていて、興味があればAを見るという風にした方がユーザーフレンドリーだと思います。

しかし、SWELLのFAQブロックはQとAをどちらも表示するしかなく、Qだけ表示することができません。

SWELLのフォーラムでも同じような要望・質問がありました。

FAQをアコーディオン機能で折りたたみたいんですが

方法はあるでしょうか？

Qのみ表示させ、

Aを隠しておきたいんです

ご存じの方おられましたら

教えていただけると助かります

FAQをアコーディオンで折りたたみたい < SWELLに関する質問

この質問に対して、SWELL公式としてはコメントもないまま、有料記事のカスタマイズが紹介されて終わっています。

SWELL作者も確信犯でSWELLのFAQブロックのアコーディオンは実装しないようです。

FAQブロックのアコーディオン(開閉式)は他のテーマには無いのか？

Lightning ProなどのテーマではFAQブロックが開閉式のものがあります。

SWELLのコンペチタのLightning Proが対応しているのであれば、遅かれ早かれSWELLのFAQブロックが開閉式に対応する可能性は高いと思います。

技術的には難しくはないと思いますが、開閉動作にjavascriptが必要なので、直ぐに対応とはいかないかもしれません。

しかし、それを待つよりも自分でカスタマイズする方が早いでしょう。

SWELLのFAQブロックを開閉式にするカスタマイズ

SWELLのFAQブロックを開閉式にカスタマイズするのはそれほど大変ではありません。

少しのCSSとJavascriptで対応でき、テーマのHTMLを変更する必要はありません。

FAQのQをクリックされたら、Aにclassfaq-openを追加する処理をjavascriptで書けばいいです。

add_action('wp_footer',function(){
?>
<script>
	document.addEventListener("DOMContentLoaded", function() {
		document.querySelectorAll('.swell-block-faq__item .faq_q').forEach(function(element) {
			element.addEventListener("click", function() {
				var answer = this.nextElementSibling;
				this.classList.toggle('faq-open');
			});
		});
	});

</script>

<?php
});

CSSで、faq-openの有無で動きを変えてあげれば、開閉式のFAQが完成します。

.swell-block-faq__item .faq_q{
	cursor: pointer;
	padding-right:1rem;
}
.swell-block-faq__item .faq_q::after {
    position: absolute;
    top: 50%;
    right: .25rem;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    content: '';
    -webkit-transform: translate(0px,-2px) rotate(135deg);
    transform: translate(0px,-2px) rotate(135deg);
    border-top: 2px solid #000;
    border-right: 2px solid #000;
		transition:.5s;
}
.faq_q.faq-open::after {
	transition:.5s;
    -webkit-transform: translate(0px,2px) rotate(-45deg);
    transform: translate(0px,2px) rotate(-45deg);
}
.faq_a{
		transition:.5s;
}
.faq_q:not(.faq-open)+.faq_a{
    padding-top: 0;
    padding-bottom: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
	transition:.5s;
}

FAQブロックのその他のカスタマイズ

FAQブロックのQをH3やH4の見出しにするカスタマイズや、JSON-LD出力を一括して有効化するカスタマイズなどを他の記事でご紹介しています。

あわせて読みたい
SWELLカスタマイズ｜FAQブロックの項目を見出しH3に変更する SWELLのFAQブロックはdlタグで出力されます。 FAQブロックの各質問を見出しのH3とかにしたら便利そうですよね、という記事がありました。 元記事：https://motoki-desig…
あわせて読みたい
SWELLカスタマイズ｜faqブロックの「FAQの構造化データを出力する」をすべての記事でオンにする SWELLのフォーラムにそういえばそうだよね！という投稿がありました。 お世話になっております。1点質問になります（不具合ではございません） 「FAQの構造化データを出…

FAQをアコーディオンにするプラグインを導入する

FAQをアコーディオンにする際に、よく使われているプラグインがあります。

チマチマカスタマイズするのが面倒ということであれば、プラグインを導入するのもいいかもしれません。

WordPress.org
Accordion FAQ – Compatible With All Page Builder (Elementor, Gutenberg) Accordion And Collapse is the most easiest drag & drop accordion builder for WordPress. You can add multiple accordion and collapse with this.

ただし、デザインはSWELとは異なりますので、自分でCSSをカスタマイズするのは必須でしょう。

まとめ

SWELLのFAQブロックをアコーディオンのように開閉式にカスタマイズする方法をご紹介しました。

今回のカスタマイズは、FAQブロック全てに適用されてしまうので、特定のページのFAQブロックにだけ適用したい場合はページや記事ごとに限定して、CSSやjavascriptを適用すればいいと思います。

もしくは、FAQブロックの追加CSSに特殊なクラスを追加して、カスタマイズを限定的に適用できるように目印をつけるのも手だと思います。

なぜSWELLのFAQブロックには開閉式のアコーディオンが無いのか？

SWELL作者が不要だと判断しているためです。

SWELLのFAQブロックをアコーディオンで開閉式にカスタマイズしたい

この記事でカスタマイズコードを紹介しています。

SWELL
カスタマイズ
他の人にもシェアしてね
コメントを閉じる

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

クリックできる目次