![](https://cxg-design.jp/wp-content/uploads/2024/05/accordion_thumb01-1.png)
ACFのテキスト、リッチエディターで、アニメーション付きアコーディオンを作成
以前のBLOGでも紹介しましたが、アコーディオンは、Easy Accordionなどのプラグインで実装できます。今回は、ACFのテキスト、リッチエディターでアニメーション付アコーディオンを作成する方法を紹介します。
今回のDEMOは、シンプルなデザインのFQAです。
3つのアコーディオンが連動していて、一つのアコーディオンが開くと、他のアコーディオンが、アニメーションで閉じる仕組みになっています。また、右の+マークが回転しながらーマークに変わります。
ACF設定
質問、回答、それぞれ3つのフィールドを作成します。
質問は、フィールドタイプをテキストに設定します。フィールドラベルに、編集画面に表示する名前を設定し、フィールド名にPHPに記入する名前を設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/05/21f6dd2032fb9a1f1b859b059f8cf32b.png)
質問は、フィールドタイプをテキストに設定
設定項目 | 設定値 |
---|---|
フィールドタイプ | テキスト |
フィールドラベル | 質問01 |
フィールド名 | add_question01 |
初期値 | 空欄 |
回答は、フィールドタイプをリッチエディター(WYSIWYG)に設定します。フィールドラベルに、編集画面に表示する名前を設定し、フィールド名にPHPに記入する名前を設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/05/01f6b2645ae40592440e27d9e9ae6354.png)
回答は、フィールドタイプをリッチエディター(WYSIWYG)に設定
設定項目 | 設定値 |
---|---|
フィールドタイプ | リッチエディター(WYSIWYG) |
フィールドラベル | 回答01 |
フィールド名 | add_answer01 |
初期値 | 空欄 |
同じように残りの質問、回答のフィールドを作成します。これで、ACF設定は終了です。
![](https://cxg-design.jp/wp-content/uploads/2024/05/bfaba076f530f09eb9d349f62a596ea3.png)
同じように残りの質問、回答のフィールドを作成
コード
シングルページループ内に下記コードを記入します。
<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");
});
});
ファイルをシングルページに読み込んでコード完成です。
設置
編集画面にアコーディオン設定用のフィールドが作成されるので、質問のテキストボックスに質問内容、回答のリッチエディターに回答内容を入力します。
これで、完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/05/3e2399633c35b10dec5a704bfd725b16.png)
質問のテキストボックスに質問内容、回答のリッチエディターに回答内容を入力
以上で、今回の説明は終了です。今回は、シングルページで3つでしたが、フィールドを多めに作成しておけば、必要に応じて表示数を増減することができます。
また、CPTでカスタムポストタイプを作成し、トップ、アーカイブに設置することもできます。この場合投稿数がアコーディオンの数になります。使用する入力欄をタイトルとブロックエディターにすれば、ACFなしで作成することもできます。
Webサイト作成のご依頼は、コントクとフォームよりよろしくお願いします。