![](https://cxg-design.jp/wp-content/uploads/2024/05/donutthumb001.png)
ACFリッチエディターで、Smart Sliderを選択して表示
ACFでは、テキストや写真などのフィールドは追加できますが、ブロックエディターを使えるフィールドは、追加することができません。今回は、Smar Slider 3で作成したスライダーをブロックエディターではなく、ACFのリッチエディターから挿入する方法を紹介します。
今回のDEMOは、ドーナツの商品ページです。
以前のDEMOで、同じようなものをブロックエディターで作成しましたが、今回はACFを使用して作成しました。
スライダー作成
![](https://cxg-design.jp/wp-content/uploads/2024/02/968b10ecd7cd11866d83b9d3d16dbeb1.png)
出典 : Smart Slider3
Smart Slider 3の無料版で作成できます。Creative a New Projectで、スライダー、シンプルを選択し作成。画像を選択し、詳細設定をしていきます。
Size
![](https://cxg-design.jp/wp-content/uploads/2024/05/a1b8b92b3db7274f412a7dbdab52c05e.png)
縦、高さを800pxに設定。レイアウトはBoxedに設定し、downscale、Upscaleにチェックを入れます。
項目 | 設定 |
---|---|
縦 | 800px |
高さ | 800px |
スライドの幅制限 | OFF(右の全てOFFならONのままでOK) |
Breakpoints | OFF |
レイアウト | Boxed |
Downscale | チェック有 |
Upscale | チェック有 |
Min Height | 0 |
操作
![](https://cxg-design.jp/wp-content/uploads/2024/05/0cad72bf24a5e8cc973093a7cca1e143.png)
サムネイルを中央揃えで設定します。
項目 | 設定 |
---|---|
矢印 | OFF |
ページコントロール | OFF |
Text Bar | OFF |
サムネイル | ON |
Width | 60px |
高さ | 60px |
Position | 下 + 5px |
サムネイルの整列 | 中央 |
アニメーション
![](https://cxg-design.jp/wp-content/uploads/2024/05/26f2210542c2b414723ad31e0cfb9615.png)
アニメーションなしに設定します。
項目 | 設定 |
---|---|
Main Animation | アニメーションなし |
自動再生
![](https://cxg-design.jp/wp-content/uploads/2024/05/07008d75563f81e873d8d90828e70123.png)
自動再生はチェック無しのままです。
項目 | 設定 |
---|---|
自動再生 | チェック無 |
ACF設定
![](https://cxg-design.jp/wp-content/uploads/2024/05/33cf6dea8f18e10f8fce250b2ba59a8f.png)
5つのフィールドを作成します。
Smart Sliderを挿入する、スライダーのフィールドタイプをリッチエディター(WYSIWYG)に設定します。商品名のフィールドタイプをテキストに設定します。価格のフィールドタイプを番号に設定します。見出しのフィールドタイプをテキストに設定します。商品説明のフィールドタイプをリッチエディター(WYSIWYG)に設定します。
![](https://cxg-design.jp/wp-content/uploads/2024/05/84c28326089973d032ca93abd5954a6a.png)
スライダーのフィールドタイプをリッチエディター(WYSIWYG)に設定
![](https://cxg-design.jp/wp-content/uploads/2024/05/ff3b055d600f21b590afaec4e12aacdf.png)
商品名のフィールドタイプをテキストに設定
![](https://cxg-design.jp/wp-content/uploads/2024/05/3457111cf1d6d40d892a4ba147c3e09a.png)
価格のフィールドタイプを番号に設定
![](https://cxg-design.jp/wp-content/uploads/2024/05/f273160bc384a691ffbeb76f6a5a433f.png)
見出しのフィールドタイプをテキストに設定
![](https://cxg-design.jp/wp-content/uploads/2024/05/139e84b4cc1fc414e38ad39df8a0dd4a.png)
商品説明のフィールドタイプをリッチエディター(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マークをクリックします。挿入したいスライダーを選択します。商品名、価格、見出し、商品説明を入力します。
これで完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/05/ed725ffdc7fc2e2fb5b97824057615b8.png)
Smart Slider 3マークをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/05/3759320dc9681e3d99dcfe88e1a0f781.png)
挿入したいスライダーを選択
![](https://cxg-design.jp/wp-content/uploads/2024/05/8e26698950b2260d2a50925aebbd141d.png)
商品名、価格、見出し、商品説明を入力
以上で今回の説明は終了です。Smart Sliderをリッチエディターで挿入することにより、ブロックエディターを他の内容で使用することが出来ます。