ACFリッチエディターで、Smart Sliderを選択して表示

  • Plugin

    • ACFでは、テキストや写真などのフィールドは追加できますが、ブロックエディターを使えるフィールドは、追加することができません。今回は、Smar Slider 3で作成したスライダーをブロックエディターではなく、ACFのリッチエディターから挿入する方法を紹介します。

     出典 : Advanced Custom Fields(ACF)

    今回のDEMOは、ドーナツの商品ページです。

    ACF SMART SLIDER

    SLIDER

    以前のDEMOで、同じようなものをブロックエディターで作成しましたが、今回はACFを使用して作成しました。

    スライダー作成

     出典 : Smart Slider3

    Smart Slider 3の無料版で作成できます。Creative a New Projectで、スライダー、シンプルを選択し作成。画像を選択し、詳細設定をしていきます。

    Size

    縦、高さを800pxに設定。レイアウトはBoxedに設定し、downscale、Upscaleにチェックを入れます。

    項目設定
    縦800px
    高さ800px
    スライドの幅制限OFF（右の全てOFFならONのままでOK）
    BreakpointsOFF
    レイアウトBoxed
    Downscaleチェック有
    Upscaleチェック有
    Min Height0

    操作

    サムネイルを中央揃えで設定します。

    項目設定
    矢印OFF
    ページコントロールOFF
    Text BarOFF
    サムネイルON
    Width60px
    高さ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をリッチエディターで挿入することにより、ブロックエディターを他の内容で使用することが出来ます。

    You may also like