ワードプレスにてカスタムフィールド(Smart Custom Fields)を使用して画像の出力をし、その後にスライダーとして出力したいです。
レイアウトとしては、サムネイル付きのスライダーを想定しています。
以下のhtmlコードのように組みたいです。ご協力よろしくお願いします。
htmlコード
<div class="abc"> <div id="slider1" class="item"><img src="画像パス1"></div> <div id="slider2" class="item"><img src="画像パス2"></div> <div id="slider3" class="item"><img src="画像パス3"></div> <div id="slider4" class="item"><img src="画像パス4"></div> <div id="slider5" class="item"><img src="画像パス5"></div> </div> <div class="cba"> <div class="slider-item"><span data-target="#slider1"><img src="画像パス1"></span></div> <div class="slider-item"><span data-target="#slider2"><img src="画像パス2"></span></div> <div class="slider-item"><span data-target="#slider3"><img src="画像パス3"></span></div> <div class="slider-item"><span data-target="#slider4"><img src="画像パス4"></span></div> <div class="slider-item"><span data-target="#slider5"><img src="画像パス5"></span></div> </div>
試したソースコード
単体しか出力ができなかったり、画像が縦積みとなってしまいました。。。
<div class="abc"> <?php //スライダーグループ取得 $field_group = SCF::get( '画像出力グループ名' ); foreach ( $field_group as $fields ) { ?> <div id="slider<?php $i = ""; echo $i++."\n"; echo $i+1; ?>" class="products-item is-active"> <?php //スライダーグループの画像出力 $image = get_post_meta($post->ID, '画像単体ID', true); echo wp_get_attachment_image($fields['画像単体ID'], 'full'); ?> <?php } ?> </div> </div> <div class="cba"> <div class="slider-item"> <span data-target="#slider<?php $i = ""; echo $i++."\n"; echo $i+1; ?>"> <?php //スライダーグループの画像出力 $image = get_post_meta($post->ID, '画像単体ID', true); echo wp_get_attachment_image($fields['画像単体ID'], 'full'); ?> </span> </div> </div>
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/20 02:32
2019/08/20 02:34
2019/08/20 05:06