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

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

SWELL
カスタマイズ
  • URLをコピーしました！

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

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

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

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

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

この記事を書いた人
フリーランサーのアバター フリーランサー

Wordpressのカスタマイズ歴10年のプロです。無料から有料までWordpressテーマの使用経験は豊富。SWELLやCocoon、Snowmonkey、Arkheなどテーマのカスタマイズに関する知見も深い。Webサイト制作からカスタマイズまで仕事を請け負った実績は多数あり。
第二種情報処理技術者試験（合格率：15.5％）、Google アナリティクス上級者向けコース、Google タグ マネージャーの基礎コース、上級ウェブ解析士、HTML5プロフェッショナル認定 レベル2

クリックできる目次

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の構造化データを出…

まとめ

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

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

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

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

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

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

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

SWELL
カスタマイズ

この記事が気に入ったら
いいねしてね！

役に立ったら他の人にもシェア！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする

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

クリックできる目次