ACFでは、テキストや写真などのフィールドは追加できますが、ブロックエディターを使えるフィールドは、追加することができません。今回は、Smar Slider 3で作成したスライダーをブロックエディターではなく、ACFのリッチエディターから挿入する方法を紹介します。
今回は、ドーナツの商品ページです。
以前のDEMOで、同じようなものをブロックエディターで作成しましたが、今回はACFを使用して作成しました。
スライダー作成
出典 : Smart Slider3
Smart Slider 3の無料版で作成できます。Creative a New Projectで、スライダー、シンプルを選択し作成。画像を選択し、詳細設定をしていきます。
Size
縦、高さを800pxに設定。レイアウトはBoxedに設定し、downscale、Upscaleにチェックを入れます。
| 項目 | 設定 |
|---|---|
| 縦 | 800px |
| 高さ | 800px |
| スライドの幅制限 | OFF（右の全てOFFならONのままでOK） |
| Breakpoints | OFF |
| レイアウト | Boxed |
| Downscale | チェック有 |
| Upscale | チェック有 |
| Min Height | 0 |
操作
サムネイルを中央揃えで設定します。
| 項目 | 設定 |
|---|---|
| 矢印 | OFF |
| ページコントロール | OFF |
| Text Bar | OFF |
| サムネイル | ON |
| Width | 60px |
| 高さ | 60px |
| Position | 下 + 5px |
| サムネイルの整列 | 中央 |
アニメーション
アニメーションなしに設定します。
| 項目 | 設定 |
|---|---|
| Main Animation | アニメーションなし |
自動再生
自動再生はチェック無しのままです。
| 項目 | 設定 |
|---|---|
| 自動再生 | チェック無 |
ACF設定
5つのフィールドを作成します。
Smart Sliderを挿入する、スライダーのフィールドタイプをリッチエディター(WYSIWYG)に設定します。商品名のフィールドタイプをテキストに設定します。価格のフィールドタイプを番号に設定します。見出しのフィールドタイプをテキストに設定します。商品説明のフィールドタイプをリッチエディター(WYSIWYG)に設定します。
スライダーのフィールドタイプをリッチエディター(WYSIWYG)に設定
商品名のフィールドタイプをテキストに設定
価格のフィールドタイプを番号に設定
見出しのフィールドタイプをテキストに設定
商品説明のフィールドタイプをリッチエディター(WYSIWYG)に設定
コード
シングルページのループ内に下記コードを挿入します。
<div class="acfss_container">
<div class="acfss_wrapper">
<div class="acf_ss">
<?php the_field('add_donutslider'); ?>
</div>
<div class="acf_spec">
<h3><?php the_field('add_donutname'); ?></h3>
<div class="acf_charge">$<?php echo number_format(get_field('add_donutprice')); ?></div>
</div>
</div>
<div class="acfss_content">
<div class="acfss_contentwrapper">
<div class="acfss_excerpt">商品説明</div>
<h4><?php the_field('add_donutheading'); ?></h4>
<p><?php the_field('add_donutexplanation'); ?></p>
</div>
</div>
</div>CSSでスタイルを設定します。
.acfss_container{
background: linear-gradient(to bottom , #cccccc 30px, #005034 30px);
}
.acfss_container .acf_ss{
width: 100%;
}
.acfss_container .acf_spec{
width: 100%;
padding: 3em 10%;
color: #ffffff;
}
.acf_charge{
font-size: 1.5em;
font-weight: 400;
padding-top: 1em;
line-height: 1.3;
}
.acfss_content{
width: 100%;
padding: 3em 10%;
background: #fff;
}
.acfss_excerpt{
color: #aaa;
padding-bottom: 2em;
font-weight: 400;
}
.acfss_contentwrapper{
max-width: 1600px;
margin: auto;
}
@media screen and (min-width: 1250px) {
.acfss_wrapper{
width: 80%;
max-width: 1600px;
display: flex;
flex-wrap: wrap;
margin: auto;
}
.acfss_container .acf_ss{
width: 50%;
padding-bottom: 3em;
}
.acfss_container .acf_spec{
width: 50%;
padding: 3em;
}
}設置
編集画面で、スライダーなどの設置をします。
リッチエディターを設定した場所にはクラシックエディターが設置されます。スライダーのクラシックエディターのSmart Slider 3マークをクリックします。挿入したいスライダーを選択します。商品名、価格、見出し、商品説明を入力します。
これで完成です。
Smart Slider 3マークをクリック
挿入したいスライダーを選択
商品名、価格、見出し、商品説明を入力
以上で今回の説明は終了です。Smart Sliderをリッチエディターで挿入することにより、ブロックエディターを他の内容で使用することが出来ます。
