Welcart カスタマイズ ブログ

画像をスライドショーで見せる FlexSlider2

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook

FlexSlider2は、非常に有名なスライドショーのjQueryプラグインです。WordPress用のショッピングカートプラグイン「wooCommerce」（超有名）を開発しているwooThemes社が、無料で配布しています。

ライセンスはMITで、商用利用可能です。

Welcart用無料テーマの商品ページ（デモはこちら）でも導入しました。

スライダーを導入出来るWordPressプラグインもたくさんあるので、もちろん自分が使い勝手がよいものを使うのがいいと思います。

私も以前、Welcart公式ガイドでも紹介されていた「Meteor Slides」というプラグインをトップページ用に導入したことがあります。ただMeteor Slidesは、スライダーに使わない画像もスライダー用の縦横比の画像サイズで勝手に生成保存してしまう仕様になっていました（そのせいで、商品ページの商品画像が突然細長くなってしまう人続出。公式ガイドの発売当時は、その話題でWelcartのフォーラムがざわついていました・・・）。

結局私はそれが嫌で、結局はMeteor SlidesをWordPressから外してしまいました。それ以来WordPressプラグインのスライダーは敬遠しています。jQueryの外部プラグインならば、既にアップロード済みの画像を利用するだけですし、動きも軽快なので、非常にナイスです。

FlexSlider2の良い所

• ファイルが21kBと軽量（縮小版のminファイルの場合）
• 設置のサンプルコードが、デモと共に本家サイトに載っていてわかりやすい
• 手動or自動再生の設定、サムネイルのスライドの有無も設定出来る
• レスポンシブなので、タブレットやスマホ表示はばっちり（いじる必要なし）

本家サイトを見るとわかりますが、様々なスタイルのスライドショーが実現出来ます。

今回は、Welcartの商品詳細ページに、サムネイル付きのスライドショーを導入する方法を紹介します。

Flexslider2の導入手順

1. FlexSlider2のしくみを理解
2. jQuery本体とFlexSlider2を読み込む
3. wc_single_item.phpを使用中のテーマに設置
4. スライドにする商品画像をマークアップ
5. まとめ

1. FlexSlider2のしくみを理解

まずは、FlexSlider2がどのように作動するのか、理解すると作業がしやすいです。

公式サイトのスライダーデモの下にはサンプルコードがあります。「JS」と「HTML」の2種類です。

JSコード

「JS」はjavascriptのことで、通常ならば</head>直前に、<script></script>で挟んで挿入するコードとなります。ただし、WordPressで使う場合には文頭の「＄」は「jQuery」とする必要があります（他ライブラリとのコンフリクト（衝突）を防ぐため）。

HTMLコード

「HTML」は、デモのスライダーを作るために、どのように画像をマークアップすればよいかの見本です。

よく見るとわかりますが、画像は<li>でマークアップされ、更に<li>は<ul class=”slides”>で、更に<ul>は<div class=”flexslider”>のカッコの中で囲われています。

これがFlexSlider2の基本的なマークアップ方法です。HTMLさえわかれば、難しくないですね。

サムネイル付きのスライダー : Slider w/thumbnail controlNav pattern

※今回はこちらの手法を紹介。

サムネイルがスライダーのナビゲーションとなっている、よく見かけるタイプのスライダーです。HTMLはこうなっています。

「Basic」タイプとほぼ同じですが、画像を挟む<li>タグに、data-thumb=”xxx”という属性を追加しています。「xxx」部分にはサムネイル用の画像URLを指定します。

サムネイルもスライダーするスライダー : Slider w/thumbnail slider

こちらはサムネイル自体も画面の幅に合わせてスライダー式（カルーセル）になるものです。

この場合はマークアップがやや煩雑になり、単なるサムネイルの場合は1回だけで済んでいた画像の読み込みが、スライダー用とサムネイル用とで、2回読み込む必要があります。

特にサムネイルの数が多くなる場合は、スマホ画面などではサムネイルが小さくなってしまいますので、サムネイルもスライダー式になっていると見やすくなります。ただ、全部で何枚の画像が用意されているのか一目でわかりにくいという欠点もあります。（Welcart用無料テーマではこちらを導入）。

2. jQuery本体とFlexSlider2を読み込む

2-1. FlexSlider2をダウンロード

それでは、公式サイトからFlexSlider2をダウンロードしましょう。ダウンロードしたzipファイルを解凍すると、中には様々なデータが入っていますが、使うのは以下の3点です。

これらをコピーして、使用中のテーマ内に設置します。今回は以下のようにしました。

もちろん設置場所は自由ですが、次のステップで読み込む命令を書く時に、指定場所を間違えないようにしましょう。

2-2. jQuery本体とFlexSlider本体を読み込む命令をfunctions.phpに記載

FlexSlider2を動かすには、まずはWordPressにjQuery本体を読み込ませる命令が必要です（既にある場合は飛ばして下さい）。WordPressには標準でjQuery本体が組み込まれていますので、それを読み込む命令をfunctions.phpに書きます。

function my_scripts(){
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts');

更に、先ほど設置したFlexSlider2のファイル（jQuery.flexslider-min.jsとflexslider.css）を読み込む命令を追加します。今回は、商品ページ（個別投稿ページ）でのみ読み込まれるように、is_single()の条件をつけています。

function my_scripts(){
    wp_enqueue_script( 'jquery' );
	if(is_single()){
		wp_enqueue_style( 'flexslider-css', get_template_directory_uri() . '/css/flexslider.css');
		wp_enqueue_script( 'flexslider-js', get_template_directory_uri() . '/js/jquery.flexslider-min.js', array(), '2.2.2', true);
	}
}
add_action( 'wp_enqueue_scripts', 'my_scripts');

ちなみに、「fonts」フォルダーの中身は、flexslider.css（スタイルシート）から適宜読み込まれるのでここでの読み込みは不要です。

ただ、先ほどテーマ内にFlexSlider2のファイルを設置した際に、cssファイルとfontsフォルダの位置関係が元ファイルから変わっていますので、flexslider.cssの最初のほうにあるfontsファイルの読み込みパスを、以下のように変えておきます。

src:url('../fonts/flexslider-icon.eot');
src:url('../fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
	url('../fonts/flexslider-icon.woff') format('woff'),
	url('../fonts/flexslider-icon.ttf') format('truetype'),
	url('../fonts/flexslider-icon.svg#flexslider-icon') format('svg');

2-3. </head>直前に、FlexSliderを動かすscriptを記載

次に、FlexSlider2を画像に適用させるための命令を</head>直前に記載します。

<?php if(is_single()): ?>
<script type="text/javascript">
jQuery(window).load(function() {
  jQuery('.flexslider').flexslider({
    animation: "slide",
    slideshow: false,
    controlNav: "thumbnails"
  });
});
</script>
<?php endif; ?>

4行目のjQuery(‘.flexslider’).flexslider({…のカッコの中で、色々と文言を変えることによって、スライダーの動きを変えることが出来ます。以下は例です。

他にも様々な項目があります。詳しくはこちらのページ（英語）にまとめられていますので参考にしてみて下さい。

今回の例では、公式サイトの「Slider w/thumbnail controlNav pattern」のスクリプトに、自動スライドを「false（無効）」にする命令を加えました。

3. wc_single_item.phpを使用中のテーマに設置

今回は商品詳細ページのカスタマイズを行いたいので、wc_single_item.phpを使用中のテーマに設置（退避）します。※既に設置済みの場合は、ここは飛ばして下さい。

wc_item_single.phpは、Welcartプラグインフォルダ内の以下の位置にあります。

usc-e-shop/theme/welcart_default/wc_templates/wc_item_single.php

これをコピーしたものを、使用中のテーマフォルダ内に設置します。ただし、welcart_default（Welcartのデフォルトテーマ）と同じような位置関係になるように、wc_templatesフォルダを設置し、その中に入れて下さい。

こうすると、テーマ内のwc_single_item.phpが優先されて読み込まれるようになります。

4. スライドにする商品画像をマークアップ

ここから商品詳細ページのテンプレートをカスタマイズして、画像をマークアップしていきます。

注意したいのは、デフォルトのテンプレートでは、商品のメイン画像とサブ画像が離れて設置されている点です。この辺は適宜、任意の場所に移動させて下さい。

メイン画像の読み込みコード（22行目）

<div class="itemimg">
	<a href="<?php usces_the_itemImageURL(0); ?>" <?php echo apply_filters('usces_itemimg_anchor_rel', NULL); ?>><?php usces_the_itemImage(0, 300, 300, $post); ?></a>
</div>

サブ画像の読み込みコード（150行目）

<div class="itemsubimg">
	<?php $imageid = usces_get_itemSubImageNums(); ?>
	<?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><!-- end of itemsubimg -->

FlexSlider2を適用させる為には、以下のように画像をマークアップしていきます。

※以下の例では画像のサイズを600px x 600pxとしています。大きさを変える場合はusces_the_itemImageの中の数字を変えて下さい（メイン画像とサブ画像の2箇所）。

<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, 600, 600, $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, 600, 600, $post); ?></a>
        </li>
        <?php endforeach; ?>
    </ul>
</div>

これで完成です。商品ページの画像がスライドになります。レスポンシブなのでブラウザのサイズを変えると自動的に大きさが変わります。便利ですね。

5. まとめ

FlexSlider2は、普通のウェブサイトであれば非常に設置が簡単です。

ただ、Welcartに導入する場合は、商品画像の呼び出しがWelcartの独自関数であったり、画像の数が商品によって変わったりするため、少し複雑になる感じはします。

商品ページの画像がスライドタイプになると、動きも出て何だかプロっぽくもなるので、お勧めです。

設置方法の理解が進んだら、是非「サムネイルのスライド付き（カルーセル）」タイプ（Welcart無料テーマにも導入→デモ）にも挑戦してみて下さいね。

• 商品ページ
• プラグイン, デザイン, jQuery

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook