ACFのテキスト、リッチエディターで、アニメーション付きアコーディオンを作成

  • Plugin

    • 以前のBLOGでも紹介しましたが、アコーディオンは、Easy Accordionなどのプラグインで実装できます。今回は、ACFのテキスト、リッチエディターでアニメーション付アコーディオンを作成する方法を紹介します。

     出典 : Advanced Custom Fields(ACF)

    今回のDEMOは、シンプルなデザインのFQAです。

    ACF ACCORDION

    ACCORDION

    3つのアコーディオンが連動していて、一つのアコーディオンが開くと、他のアコーディオンが、アニメーションで閉じる仕組みになっています。また、右の＋マークが回転しながらーマークに変わります。

    ACF設定

    質問、回答、それぞれ3つのフィールドを作成します。

    質問は、フィールドタイプをテキストに設定します。フィールドラベルに、編集画面に表示する名前を設定し、フィールド名にPHPに記入する名前を設定します。

    質問は、フィールドタイプをテキストに設定

    設定項目設定値
    フィールドタイプテキスト
    フィールドラベル質問01
    フィールド名add_question01
    初期値空欄

    回答は、フィールドタイプをリッチエディター(WYSIWYG)に設定します。フィールドラベルに、編集画面に表示する名前を設定し、フィールド名にPHPに記入する名前を設定します。

    回答は、フィールドタイプをリッチエディター(WYSIWYG)に設定

    設定項目設定値
    フィールドタイプリッチエディター(WYSIWYG)
    フィールドラベル回答01
    フィールド名add_answer01
    初期値空欄

    同じように残りの質問、回答のフィールドを作成します。これで、ACF設定は終了です。

    同じように残りの質問、回答のフィールドを作成

    コード

    シングルページループ内に下記コードを記入します。

    <div class="section acf_accordion">
	<?php if (get_field('add_question01')): ?>
  		<div class="accordion_one">
    		<div class="accordion_header"><?php the_field('add_question01'); ?><div class="i_box"><i class="one_i"></i></div></div>
    		<div class="accordion_inner">
      			<div class="box_one">
     				<?php the_field('add_answer01'); ?>
      			</div>
			</div>
		</div>
	<?php endif; ?>
	<?php if (get_field('add_question02')): ?>
  		<div class="accordion_one">
    		<div class="accordion_header"><?php the_field('add_question02'); ?><div class="i_box"><i class="one_i"></i></div></div>
    		<div class="accordion_inner">
      			<div class="box_one">
     				<?php the_field('add_answer02'); ?>
      			</div>
			</div>
		</div>
	<?php endif; ?>
	<?php if (get_field('add_question03')): ?>
  		<div class="accordion_one">
    		<div class="accordion_header"><?php the_field('add_question03'); ?><div class="i_box"><i class="one_i"></i></div></div>
    		<div class="accordion_inner">
      			<div class="box_one">
     				<?php the_field('add_answer03'); ?>
      			</div>
			</div>
		</div>
	<?php endif; ?>
</div>

    CSSでスタイルを設定します。

    .acf_accordion .accordion_one {
	width: 80%;
	max-width: 1200px;
	margin: 0 auto;
	border-bottom: solid 1px #bbb;
}

.acf_accordion .accordion_one .accordion_header {
	font-size: 1.2em;
	font-weight: 400;
	padding: 1em 50px 1em 0;
	text-align: left;
	position: relative;
	z-index: +1;
	cursor: pointer;
	transition-duration: 0.5s;
}

.acf_accordion .accordion_one .accordion_header:hover {
	opacity: .8;
}

.acf_accordion .accordion_one .accordion_header .i_box {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	right: 0%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	box-sizing: border-box;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transform-origin: center center;
	transition-duration: 0.2s;
}

.acf_accordion .accordion_one .accordion_header .i_box .one_i {
 	display: block;
	width: 18px;
	height: 18px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transform-origin: center center;
	transition-duration: 0.2s;
	position: relative;
}

.acf_accordion .accordion_one .accordion_header.open .i_box {
	-webkit-transform: rotate(-180deg);
	transform: rotate(-180deg);
}

.acf_accordion .accordion_one .accordion_header .i_box .one_i:before, .acf_accordion .accordion_one .accordion_header .i_box .one_i:after {
	display: flex;
	content: '';
	background-color: #195300;
	border-radius: 10px;
	width: 18px;
	height: 4px;
	position: absolute;
	top: 7px;
	left: 0;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	transform-origin: center center;
}

.acf_accordion .accordion_one .accordion_header .i_box .one_i:before {
	width: 4px;
	height: 18px;
	top: 0;
	left: 7px;
}

.acf_accordion .accordion_one .accordion_header.open .i_box .one_i:before {
	content: none;
}

.acf_accordion .accordion_one .accordion_header.open .i_box .one_i:after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.acf_accordion .accordion_one .accordion_inner {
	display: none;
	padding: 0 0 0.5em 0;
	box-sizing: border-box;
}

    最後にJavaScriptです。

    まず、ページにjQueryを読み込みます。次に、JavaScriptファイルを作成して、下記コードを記入します。

    $(function(){
  $('.acf_accordion .accordion_one .accordion_header').click(function(){
    $(this).next('.accordion_inner').slideToggle();
    $(this).toggleClass("open");
    $('.acf_accordion .accordion_one .accordion_header').not($(this)).next('.accordion_one .accordion_inner').slideUp();
    $('.acf_accordion .accordion_one .accordion_header').not($(this)).removeClass("open");
  });
});

    ファイルをシングルページに読み込んでコード完成です。

    設置

    編集画面にアコーディオン設定用のフィールドが作成されるので、質問のテキストボックスに質問内容、回答のリッチエディターに回答内容を入力します。

    これで、完成です。

    質問のテキストボックスに質問内容、回答のリッチエディターに回答内容を入力

    以上で、今回の説明は終了です。今回は、シングルページで3つでしたが、フィールドを多めに作成しておけば、必要に応じて表示数を増減することができます。

    また、CPTでカスタムポストタイプを作成し、トップ、アーカイブに設置することもできます。この場合投稿数がアコーディオンの数になります。使用する入力欄をタイトルとブロックエディターにすれば、ACFなしで作成することもできます。

    Webサイト作成のご依頼は、コントクとフォームよりよろしくお願いします。

    You may also like