商品ページのサブ画像をFlexslider2でスライドショー化

　このところ連続でご紹介しているカートページのカスタマイズですが、今回は商品ページの施工です。
　「カート入力時にフリガナ、FAXを入力しなくて良い方が成約が上がる！」や「カート離脱防止アラートを表示させる」と一緒にご紹介しておくとコードの記載が簡単なので、商品ページのサムネイルをスライダー化するカスタマイズをご紹介しておきます。

Flexslider2を導入

　初期設定の商品画像はサブ画像はポップアップされてしまい、いちいち画像を閉じなくてはならず面倒です。（⇒WelcartBasicのデモサイトで確認）

　これをスライドショー化できればいいなとおもっていたのですが、やっぱり『Welcart カスタマイズブログ』さんにありました！！

今回も『Welcart カスタマイズブログ』さんを参考に！

　生まれ年ワインショップのWelcartのカスタマイズは、半分以上このサイトを参考にさせてもらっています。今回もそう！設置も私が説明する必要はないと思うし、こんなに詳しく書けないので「画像をスライドショーで見せる FlexSlider2」（『Welcart カスタマイズブログ』さん）をご覧ください。

　さて、では私は何を書くかというと、前回まで書いてきたfunction.php内のjQuery本体を読み込む命令文部分を、Flexslider2のカスタマイズも組み込んだものに変更するということ。

/*離脱防止用、商品サムネイル、カート内入力チェック用*/
function my_scripts(){
   wp_enqueue_script( 'jquery' );
    if(is_single()){
        wp_enqueue_style( 'flexslider-css', get_stylesheet_directory_uri() . '/css/flexslider.css');
        wp_enqueue_script( 'flexslider-js', get_stylesheet_directory_uri() . '/js/jquery.flexslider-min.js', array(), '2.2.2', true);
    }
   if( is_page( array( 'usces-cart','usces-member' )) ){
      wp_enqueue_script( 'validation', get_stylesheet_directory_uri() . '/js/validation.js', array(), '',　true);
        wp_enqueue_style( 'validationEngine.jquery.css',
        get_stylesheet_directory_uri() . '/css/validationEngine.jquery.css', array(), '1.0', 'all');
        wp_enqueue_script( 'jquery.validationEngine.js',
        get_stylesheet_directory_uri() . '/js/jquery.validationEngine.js', array('jquery'), '2.6.2', true);
        wp_enqueue_script( 'jquery.validationEngine-ja.js',
        get_stylesheet_directory_uri() . '/js/jquery.validationEngine-ja.js', array('jquery'), '2.0', true); 
    }
}
add_action( 'wp_enqueue_scripts', 'my_scripts');
/*離脱防止用、商品サムネイル、カート内入力チェック用（終了）*/

です。実際、生まれ年ワインショップは2017年2月現在、この形でjQuery本体を読み込む命令文部分は完成形となっています。

商品のメイン画像を大きくする

　『Welcart カスタマイズブログ』さんに

大きさを変える場合はusces_the_itemImageの中の数字を変えて下さい（メイン画像とサブ画像の2箇所）。

とあるように、画像のサイズはFlexSlider2の読込部分で調整できます。
　ただし、生まれ年ワインショップでは、できるだけ商品画像は最適化してからアップしていますが、たまに忘れてしまうことがあるため、画像が大きすぎてもメイン画像の部分に納まるように、画像ボックスのサイズを指定しています。なので、メイン画像のサイズを変更させたい場合は、この部分も数値を一致させなければなりません。

　例の如く実際の生まれ年ワインショップのコードを書いておきます。最初の1行が画像ボックスのサイズ指定をしている部分です。この部分とusces_the_itemImage(0, 375, 250,・・・の部分をご覧いただくと、横幅250pxで統一しているのが分かると思います。

				<div id="img-box" style="width:250px;margin: 0 auto;">

<!--商品画像スライダー-->
    <div id="slider" class="flexslider">
        <ul class="slides">
            <li data-thumb="<?php usces_the_itemImageURL(0); ?>">
                <a href="<?php usces_the_itemImageURL(0); ?>" <?php echo apply_filters('usces_itemimg_anchor_rel', NULL); ?>><?php usces_the_itemImage(0, 375, 250, $post); ?></a>
            </li>
            <?php $imageid = usces_get_itemSubImageNums(); ?>
            <?php foreach ( $imageid as $id ) : ?>
            <li data-thumb="<?php usces_the_itemImageURL($id); ?>">
                <a href="<?php usces_the_itemImageURL($id); ?>" <?php echo apply_filters('usces_itemimg_anchor_rel', NULL); ?>><?php usces_the_itemImage($id, 375, 250, $post); ?></a>
            </li>
            <?php endforeach; ?>
        </ul>
    </div>
<!--商品画像スライダー（終了）-->

　以上です。皆さんもコピーしてやってみてください＾＾

お願い

検索でここにたどり着いた方は、自営業者さんでWelcartを導入しようと思っている方だと思います。役に立った方は、ビジネスでの贈り物に当店「生まれ年ワインショップ」もしくは、日本初のプレゼント専門ワインショップ「プレゼントワインショップ」をご利用いただけると嬉しいですm(__)m