Welcart Basicの商品画像をSlickのイメージスライダーに変更する方法

Welcart Basicの商品画像をSlickのイメージスライダーに変更する方法

2020年7月7日
WordPress

Welcart Basicの商品ページの画像はLightbox風のイメージスライダーになっています。
メインイメージやサブイメージ（サムネイル）をクリックするとオーバーレイで拡大画像が表示され、その状態で画像をスライドするという仕様です。

機能的にはこれで問題ないのですが、個人的にはサムネイルをクリックするとメインイメージの部分が切り替わる方が見やすいと思うので、いつもSlickのイメージスライダーに変更しています。

Slickとは簡単にイメージスライダーを実装できるjQueryプラグインです。
レスポンシブ対応でとても使いやすいので、イメージスライダーを実装する際は大体Slickを使っています。
Slickについては以下の記事で解説しているので、もしよければ読んでみてください。

【jQuery】イメージスライダーslickをレスポンシブサイトで使う方法
【jQuery】イメージスライダーslickをレスポンシブサイトで使う方法
Webサイトで画像やコンテンツをスライドさせる場合は、jQueryのスライダープラグインslickをよく使います。僕が携わるwebサイトの9割はレスポンシブWe…
ryob.net

それではWelcart Basicの商品画像をSlickのイメージスライダーに変更する方法を解説していきます。

目次

wc_item_single.phpを編集する

商品ページのテンプレートwc_item_single.phpをSlick用に編集します。
wc_item_single.phpは以下の場所にあります。

welcart_basic/wc_templates/wc_item_single.php

wc_item_single.phpの以下のソースコードで商品画像を表示しています。

<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 -->

このソースコードを以下のように書き換えます。

<div id="img-box" class="item-img-box">
  <!-- 商品画像のスライダー -->
  <div class="item-img-main">
    <div class="slide-item"><?php usces_the_itemImage( 0, 600, 600, $post ); ?></div>
    <?php
      $imageid = usces_get_itemSubImageNums();
      if( !empty( $imageid ) ):
    ?>
      <?php foreach( $imageid as $id ) : ?>
        <div class="slide-item"><?php usces_the_itemImage( $id, 600, 600, $post ); ?></div>
      <?php endforeach; ?>
    <?php endif; ?>
  </div>

  <!-- 商品画像のサムネイル -->
  <?php
    $imageid = usces_get_itemSubImageNums();
    if( !empty( $imageid ) ):
  ?>
    <div class="item-img-thumb">
      <div class="thumbnail-item"><?php usces_the_itemImage( 0, 300, 300, $post ); ?></div>
      <?php foreach( $imageid as $id ) : ?>
        <div class="thumbnail-item"><?php usces_the_itemImage( $id, 300, 300, $post ); ?></div>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>
</div>

usces_the_itemImage();の600や300などの数値は画像サイズを指定しています。
制作中のWebサイトに合わせて任意の数値に変更してもOKです。

Slickのcssファイルとjsファイルを読み込む

<head>タグ内に以下のソースコードを追加してcssファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

</body>タグの直前に以下のソースコードを追加してjsファイルを読み込みます。
すでにjQueryを読み込んでいる場合は、slick.min.jsだけ読み込めばOKです。

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

functions.phpでcssファイルとjsファイルを読み込む場合は以下のソースコードを追加してください。

function my_theme_scripts() {
  // cssファイルを読み込む
  wp_enqueue_style( 'slick-css', '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css', array(), null );
  wp_enqueue_style( 'slick-theme-css', '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css', array(), null );
  // jsファイルを読み込む
  wp_enqueue_script( 'slick-js', '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Slick用のjQueryを記述する

</body>タグの直前か、テーマに読み込んでいるjsファイルにSlick用のjQueryを記述します。

$(document).ready(function(){
  var slider = ".item-img-main"; // スライダー
  var thumbnailItem = ".item-img-thumb .thumbnail-item"; // サムネイル画像アイテム

  // サムネイル画像アイテムに data-index でindex番号を付与
  $(thumbnailItem).each(function(){
    var index = $(thumbnailItem).index(this);
    $(this).attr("data-index",index);
  });

  // スライダー初期化後、カレントのサムネイル画像にクラス「thumbnail-current」を付ける
  // 「slickスライダー作成」の前にこの記述は書いてください。
  $(slider).on('init',function(slick){
    var index = $(".slide-item.slick-slide.slick-current").attr("data-slick-index");
    $(thumbnailItem+'[data-index="'+index+'"]').addClass("thumbnail-current");
  });

  //slickスライダー初期化
  $(slider).slick({
    arrows: false,
    fade: true,
    infinite: false //これはつけましょう。
  });
  //サムネイル画像アイテムをクリックしたときにスライダー切り替え
  $(thumbnailItem).on('click',function(){
    var index = $(this).attr("data-index");
    $(slider).slick("slickGoTo",index,false);
  });

  //サムネイル画像のカレントを切り替え
  $(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){
    $(thumbnailItem).each(function(){
      $(this).removeClass("thumbnail-current");
    });
    $(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("thumbnail-current");
  });
});

このソースコードは以下の記事を参考にさせていただきました。

slick.jsでサムネイル付きスライダーを作成する | takblog
何度か取り上げているslick.jsの使い方ですが、今回はサムネイル付きスライダーを作成します。サムネイルがスライダーのものや、サムネイルを固定した（サムネイル…
takblog.site

WordPressに初めから読み込まれているjQueryを使用する場合は動作しない可能性があります。
jQueryが動作しない場合は以下のソースコードに変更してください。

jQuery(function ($) {
  var slider = ".item-img-main"; // スライダー
  var thumbnailItem = ".item-img-thumb .thumbnail-item"; // サムネイル画像アイテム

  // サムネイル画像アイテムに data-index でindex番号を付与
  $(thumbnailItem).each(function(){
    var index = $(thumbnailItem).index(this);
    $(this).attr("data-index",index);
  });

  // スライダー初期化後、カレントのサムネイル画像にクラス「thumbnail-current」を付ける
  // 「slickスライダー作成」の前にこの記述は書いてください。
  $(slider).on('init',function(slick){
    var index = $(".slide-item.slick-slide.slick-current").attr("data-slick-index");
    $(thumbnailItem+'[data-index="'+index+'"]').addClass("thumbnail-current");
  });

  //slickスライダー初期化
  $(slider).slick({
    arrows: false,
    fade: true,
    infinite: false //これはつけましょう。
  });
  //サムネイル画像アイテムをクリックしたときにスライダー切り替え
  $(thumbnailItem).on('click',function(){
    var index = $(this).attr("data-index");
    $(slider).slick("slickGoTo",index,false);
  });

  //サムネイル画像のカレントを切り替え
  $(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){
    $(thumbnailItem).each(function(){
      $(this).removeClass("thumbnail-current");
    });
    $(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("thumbnail-current");
  });
});

CSSでレイアウトを整える

最後にCSSでレイアウトを整えます。
レイアウトは自由に指定してもらってOKですが、今回はイメージスライダーの下にサムネイルが4つ並ぶ形にしました。

Slickの実装イメージ

cssファイルに以下のソースコードを追加します。

.item-img-main img {
  width: 100%;
  height: auto;
}
.item-img-thumb {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-right: -5px;
  margin-left: -5px;
}
.item-img-thumb .thumbnail-item {
  width: 25%;
  padding-right: 5px;
  padding-left: 5px;
  cursor: pointer;
}
.item-img-thumb .thumbnail-item img {
  width: 100%;
  height: auto;
}
.item-img-thumb .thumbnail-current {
  opacity: 0.8;
}

Sassの場合は以下のソースコードを追加してください。

.item-img-main {
  img {
    width: 100%;
    height: auto;
  }
}

.item-img-thumb {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-right: -5px;
  margin-left: -5px;

  .thumbnail-item {
    width: 25%;
    padding-right: 5px;
    padding-left: 5px;
    cursor: pointer;

    img {
      width: 100%;
      height: auto;
    }
  }

  .thumbnail-current {
    opacity: 0.8;
  }
}

以上でWelcart Basicの商品画像をSlickのイメージスライダーに変更できます。

まとめ

Welcart Basicは素晴らしいWordPressテーマですが、オリジナルのECサイトを作る場合はどうしてもカスタマイズが必要になってきます。
Slickを使えば簡単にWelcart Basicの商品画像をイメージスライダーに変更できるので、ぜひ試してみてください。