HOME  /Welcart
 /Welcartの商品画像をslickでスライドさせる方法
2020年07月21日

Welcartの商品画像をslickでスライドさせる方法

ここではWelcartの商品画像を「slick」でスライドさせる方法を解説しています。

尚、ここでの設定は「slick」の導入と設定が完了している事が前提となります。

 Jqueryで制御するスライダープラグイン「slick.js」の導入と使い方

 

「slick」の使い方としては下記の2つの方法を解説しています。

1.slickオプションだけでスライドさせる方法

2.slickイベントやメソッドを使ってスライドさせる方法

1.Welcartの商品詳細ページの仕様を理解します

1-1.商品画像

商品画像の登録は下記の形式で登録しました

①商品コード.png(メイン画像)

②商品コード__001.png(サブ画像1)

③商品コード__002.png(サブ画像2)

④商品コード__003.png(サブ画像3)

この標品を表示すると下図の様になります。

■上段がメイン画像で、下段がサブ(サムネール)画像です

 スライダ表示にする為には

上図をスライダ表示するイメージは

1.メイン画像をドラッグやスワイプで変更できる

2.サムネール画像をクリックすると、メイン画像が変更される

様な仕様になります。

 

1-2.商品詳細画面で使われているプログラムと関連関数

①プログラム

商品詳細画面のプログラムは、「wc_templates」フォルダにある「wc_item_single.php」になります。

よってこのプログラムを修正する事になります。

②関連する関数

関数 説明
usces_get_itemSubImageNums() サブ画像の枚数を読み出す関数

関数仕様はこのURL

usces_the_itemImage(id,w,h) 画像を読み出す関数。

id=0はメイン画像、id=nはサブ(サムネール)画像

wは画像幅、hは画像高さ

関数仕様はこのURL

 

2.wc_templates¥wc_item_single.phpのカスタマイズ

2-1.プログラムのコピー

1.子テーマに「wc_templates」フォルダを作成し、親テーマの「wc_templates」フォルダにある「wc_item_single.php」をコピーします。

2.商品画像を作成している所は下記になります。

<div id="img-box">
    <div class="itemimg">
       <a href="<?php usces_the_itemImageURL(0); ?>" <?php echo apply_filters( 'usces_itemimg_anchor_rel', NULL ); ?>><?php usces_the_itemImage( 0, 335, 335, $post ); ?></a>
    </div>
    <?php
        $imageid = usces_get_itemSubImageNums();
       if( !empty( $imageid ) ):
     ?>
    <div class="itemsubimg">
       <?php foreach( $imageid as $id ) : ?>
           <a href="<?php usces_the_itemImageURL($id); ?>" <?php echo apply_filters( 'usces_itemimg_anchor_rel', NULL ); ?>><?php usces_the_itemImage( $id, 135, 135, $post ); ?></a>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>
</div><!-- #img-box -->

3.下記プログラムに変更します。

<div id="img-box">
	<?php	$imageid = usces_get_itemSubImageNums();?>
	<div class="product_img">
		<?php usces_the_itemImage(0,800,800); ?>
		<?php foreach( $imageid as $id ) : ?>
			<?php usces_the_itemImage($id,800,800); ?>
		<?php endforeach; ?>
	</div>
	<?php	if( !empty( $imageid ) ):	?>
		<div class="product_subimg">
			<?php usces_the_itemImage(0,200,200); ?>
			<?php foreach( $imageid as $id ) : ?>
				<?php usces_the_itemImage($id,200,200); ?>
			<?php endforeach; ?>
		</div>
	<?php endif; ?>
</div><!-- #img-box -->

■メイン画像のクラスを「.product_img」に変更し、メイン画像とサブ(サムネール)画像を読み込んでします。

(サムネール画像をここで読み込むのは、このエリアで総てに画像をスワイプ可能とする為です)

■サブ(サムネール)画像のクラスを「product_subimg」に変更し、メイン画像とサブ(サムネール)画像を読み込んでします。

(メイン画像をここで読み込むのは、メイン画像にも戻れるようにする為です)

 

以上で総ての画像は読み込めたので、後はslickでどの様にスライドさせるか?を設計していきます。

3.slickオプションだけでスライドさせる方法

下記の様なスライド画面を設計します。

PC画像 スマホ画像

1.my_jqury.jsの設定

$(function(){
  //.product_imgの設定 
  $('#img-box .product_img').slick({
    arrows: true,
    dots:false,
    infinite:false,/* 無限ループの中止 */
    responsive:[{breakpoint:767,settings:{arrows:false,dots:true}}]
  });
  //.product_subimgの設定 
  $(#img-box '.product_subimg').slick({
    focusOnSelect:true,
    asNavFor:'.product_img',
    slidesToShow:4,
    infinite:false,/* 無限ループの中止 */
  })
});

■「focusOnSelect」はサムネールをクリックすると「asNavFor」に設定されたクラスを変更させるオプションです。

■「slidesToShow」は表示するサムネールを表示する数です。

2.CSSの設定

#img-box .product_subimg {
	margin:15px 0 0 -20px;
	padding:0;
	width:115%;
}
@media screen and (max-width:767px){
	#img-box .product_subimg {
		display:none;	
	}
}

■サムネール画像の大きさは「silik」の設定で決まりますが、ここではその枠を許される範囲で拡大させています。

■スマホ画面の時は、子のサムネールを非表示にしています。

 slickオプションだけの場合の問題点

slickオプションだけのサムネール表示は、1行表示が原則です。

サムネール画像が多くある場合は別の方法が必要になります。

4.slickイベントやメソッドを使ってスライドさせる方法

下記の様なスライド画面を設計します。

PC画像 スマホ画像

■上記はサムネールを3個表示し、サムネール数が増えれば行がどんどん増えていく設定にしています。

これにより「slikオプション」の制約を排除しています。

■アクティブなサムネール以外は、少し色を薄くしています。

1.my_jqury.jsの設定

$(function(){
  if(window.innerWidth > 767) //768以上
  	{
  		/* ①画像属性として「img_no」と「値」を入れる */
  		$('.product_subimg img').each(function(){
   			var no = $('.product_subimg img').index(this);
   			$(this).attr('img_no',no);
  		});
  		/* ②「img_no=0」に「active」クラスを設定する */
  		$('.product_img').on('init',function(slick){
   			$('.product_subimg img'+'[img_no=0]').addClass('active');
  		});
  		/* ③④の画像切替の前に「active」クラスを新しい画像に付け替える */
  		$('.product_img').on('beforeChange',function(event,slick,currentSlide,nextSlide){
    		$('.product_subimg img'+'[img_no=' + currentSlide + ']').removeClass("active");
    		$('.product_subimg img'+'[img_no=' + nextSlide + ']').addClass("active");
  		});
	  	 /* ④新しい画像がクリックされたらその画像に切り替える */
  		$('.product_subimg img').on('click',function(){
    		var index = $(this).attr('img_no');
    		$('.product_img').slick('slickGoTo',index);
  		});
		}
  //⑤slickスライダ指定 
  $('.product_img').slick({
    arrows: false,
  	responsive:[{breakpoint:767,settings:{dots:true} /*767まで*/
		}]
  });
});

①「each」ファンクションでサムネール画像を読み込んで「img_no」と「値」を入れています。

②「$(‘クラス名’).on(‘init‘,function(slick){××}」は、スライダーが初期化された時のイベントで0番目の画像に「active」クラスを設定しています。

③「$(‘クラス名’).on(‘beforeChange‘,function(event,slick,currentSlide,nextSlide){××}」は、スライド操作を行う前のイベントで、「active」クラスを次にスライドに切り替えています。

④「$(‘クラス名’).on(‘click‘,function(){}」は、スライダがクリックされた時のイベントで、「$(‘.クラス名’).slick(‘slickGoTo‘,index);」は指定のスライドへの移動するメソッドです。

⑤「slick」を指定する事により「スリックオプション」を指定しています。

2.CSSの設定

.product_img{
	width:100%;
	}
.product_subimg{
	margin-top:15px;
	width:100%;
	display:flex;
	flex-wrap:wrap;}
.product_subimg img{
	width:33.3%;
	height:10%;
	opacity:0.6;
	cursor:pointer;
	}
.product_subimg img.active{opacity:1;}
@media screen and (max-width:767px){
	.product_subimg{display:none;}
	.product_img{width:60%;margin:0 auto;}
}

■「.product_subimg img」の「width:33.3%;」にしているので、横に3個表示させています。

■「.product_subimg img」の親要素に「display:flex; flex-wrap:wrap;」が設定されているので、サムネール個数が3個を超えると複数行になり、サムネール画像の項数制限は無くなります。

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「Wordpress(応用編)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

「wecart」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

ここではWelcart商品を価格順に並び替える方法を解説しています

ここではWelcartのキャンペーン商品設定の方法と、設定された商品リストを表示する関数を作成する方法を解説しています

ここではWelcartの商品カテゴリを指定して商品リストする関数を作成しています。全商品、おすすめ商品、新製品及び商品カテゴリが対象となります。

ここでは売れている商品をWelcartのDBから読み出して「売れ筋商品」としてリストする関数を作成する方法を解説しています。

ここではWelcartで個別商品を表示した時に、その商品と同じカテゴリの商品を「関連商品」としてリストする関数を作成する方法を解説しています。

ここではWelcart_basicのメニュのCSS制御の解説をしています。

ここではWelcart_basicのカートボタンの「色」と「文字」を変更する方法を解説しています。

ここではWelCart_Basicのカートの仕様がどうなっているか?を解説しています。

Welcartで会員システムを使うのであれば、ログイン後の画面に現在使えるポイント数が表示されているのが親切です。そこでここではwelcart_bascで保有ポイントが表示されるようにカスタマイズしたサンプルを解説しています。

ここではwelcart_basicの会員システムがどの様な仕様になっているか?を解説しています。

ここではWelcart_basicの検索BOXがCSSでどの様に制御されているのか?を解説しています

welcart_basicは製品だけしか検索対象としていませんが、ここではページの情報を読み込んで、何を検索させるのかを自動で判断させる方法を解説しています。

ここでは「welcart_basic」の「category.php」がブログ用のサイドーバーが使われてない問題点を修正方法を説明しています。また「welcart_basic」がどの様な構造になっているか?も併せて解説しています。

ここではWelcartの検索機能制限の解除と商品か否かを判断する関数を作成する方法を解説しています。

ここではWelcartで用意されている関数を解説しています。

Welcartのファンクションはfunctions.phpからincフォルダにあるファンクションをインクルードしています。この辺の構造を商品表示の設定例で解説しています。

Welcartのホームページと事前に作られている固有のページを解説してます。特にカートページやメンバーページ及びお問い合わせフォームの作り方も解説しています。

WelcartはWordPressの「固定ページ」と「投稿ページ」のみで作られております。この「投稿ページ」の中に「商品」が設定されています。そこで検索機能はファンクションの中で、商品のみを検索する様な設定が定義されている為、そのままではブログ等を検索できません。

ここではカスタマイズ→ヘッダ画像で設定したヘッダ画像を「slick」で自動スライドさせる方法を解説しています。スライドサンプルとしては画像サイズと画像サイズ+αで表示させるサンプルを解説しています。

「slick.js」はjqueryでスライド動作を指定するプラグインです。ここでは「slick.js」のインストールから、設定方法及び「slick.js」のオプションを解説しています

ここでは「Welcart basic」の子テーマの作成方法を解説しています。

Welcartの商品画像適用ルールと「Media Library Assistant」による画像管理、及び商品画像の登録方法を解説しています。

Welcartで商品登録を行う前に.Welcart Shopの「基本設定」、「配送設定」及び「.商品カテゴリ」の登録が必要で、ここではその登録方法を解説しています。

ここではWelCartの商品の登録の仕方を解説しています。

WelcartはWordPressを使った無償のe-Commerceシステムです。ここでは「Welcart」の「インストール」と「無償テンプレート」について解説します。

ここでは「Welcart_Basic」の「メニュ」や「ウィジェット」及び「ヘッダ画像」の使い方を解説します。