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

スポンサーリンク

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

FlexSlider2公式サイト

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

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

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コード

FlexSlider2のjsコード

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

HTMLコード

FlexSlider2のHTMLコード

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

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

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

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

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

FlexSlider2サムネイル付き

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

FlexSlider2サムネイル付きのHTML

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

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

FlexSlider2サムネイルもスライダー(カルーセル)

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

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

FlexSlider2サムネイルのカルーセル付きのHTML

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

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

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

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

  • jQuery.flexslider-min.js(FlexSlider2の本体・縮小版)
  • flexslider.css(FlexSlider2のスタイルシート)
  • fontsフォルダ(矢印などのアイコンフォントが入っている)

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

FlexSlider2をテーマ内に設置

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

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({…のカッコの中で、色々と文言を変えることによって、スライダーの動きを変えることが出来ます。以下は例です。

プロパティ デフォルト 動き
animation “fade” “fade”でフェイド効果、”slide”でスライド効果
direction “horizontal” “horizontal”で横の動き、”vertical”で縦の動き
animationLoop true “true”でスライダー画像がループする
slideshow true “true”で自動スライドショーになる
slideshowSpeed 7000 (ミリ秒)でスライドの動く速度を指定

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

今回の例では、公式サイトの「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_templates
      • wc_item_single.php ←ココ

こうすると、テーマ内の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無料テーマにも導入→デモ)にも挑戦してみて下さいね。

22 Responses to “画像をスライドショーで見せる FlexSlider2”

  1. 山田 昭 より:

    始めまして。山田と言います。
    独学でネットショップを構築しを運営しています。
    制作ソフトは恥ずかしいですがHPB16です。
    今、これまで何年も眠らせてしまっていたショップの復活を期して、
    レスポンシブ化したスマホ主体のネットショップを構築中です。
    動的に商品を見せるのに「FlexSlider」を使っています。
    今現在もクローム、サファリ、IEともに上手くレスポンシブして機能しています。

    メイン画像の下に現在はサムネイル画像は12枚。
    これが3段で表示されています。

    http://www.waterplanet.jp/zzzzzflexslider.html

    ただこの状態だとスマホ画面ではサムネイル画像のクリックが難しいので、
    サムネイル一行6画像。2行で12枚の表示にしたく思っています。

    色々ネットでも調べますが解答は出て来ません。

    また出来ればサムネイル1行で8枚表示など自由に出来ればと思っています。

    flexslider.css スタイルシート
    http://www.waterplanet.jp/style/flexslider.css

    .js ファイルです。
    http://www.waterplanet.jp/style/jquery.flexslider.js

    突然のぶしつけな内容で大変申し訳ありませんが、
    本当に困っております。

    どうかご助言を頂けますと有難く思っております。

    • まめ子(管理人) より:

      flexsliderの仕様では、ご希望の表示は難しいと思います。最後の手段としては、htmlでサイトを作っていらっしゃるとこのとなので、読み込み用のスライダーのhtmlを予め別ファイルに用意しておき、PCとスマホの振り分けの条件分岐をjQueryなどで行って、ajaxで端末毎にファイル選択して読み込む、くらいのことをすれば、実現可能かもしれません。

  2. 山田 昭 より:

    山田です。
    まめ子さんのご回答に感謝いたします。
    ありがとうございます。
    「最後の手段としては・・・」は
    ちょっと私では理解出来ずハードルが高いようです。
    また、いろいろと考えてみます。
    アドバイスを有難うございました。

    • まめ子(管理人) より:

      あまりお役に立てず済みません。flexsliderの他にもスライダー系のjQueryプラグインは多くあるので、ご希望の表示が出来るものが見つかるといいですね。

  3. 山田 昭 より:

    まめ子さん、ありがとうございました。
    別サイトの回答でcssの一部記述修正でOK!と聞き
    早速修正しましたら思い通りにカスタマイズ出来ました。
    この度はお騒がせし申し訳ありませんでした。
    今後とも宜しくお願い致します。

    • まめ子(管理人) より:

      わざわざご報告ありがとうございます。CSSで簡単に出来るんですか!難しく考えすぎちゃいましたかね~。うまく行って良かったですね。

  4. まめ子様

    始めまして、高野と申します。

    まめ子様の配布されているテーマBlancでサイトを作りたくて勉強している初心者です。

    テストをしているサイトはコチラです。 http://coredayo.net

    4. スライドにする商品画像をマークアップ の項目でつまずいています。

    wc_item_single.php のどちらのテンプレートの どの行を削除して、どのコードをどちらのテンプレートに追加するのかがわかりません。。

    現状は以下のようになっています。

    Blancをインストールした時のままです。デフォルトのテンプレートからコピーはしていません。
    http://coredayo.net/wp-content/themes/blanc/wc_templates/wc_item_single.php

    デフォルトのテンプレートは触っていません。
    http://coredayo.net/wp-content/themes/welcart_default/wc_templates/wc_item_single.php

    画像の名前の付け方は、まめ子様のサイトを参考にして、KT-WD-001.jpg KT-WD-001-1.jpg KT-WD-001-2.jpg
    とし、この3枚をアップロードしています。

    宜しくお願いします。

    • まめ子(管理人) より:

      こちらの返信はお読み頂いていらっしゃいますでしょうか。また、配布テーマは商品画像がスライドするように既に設定済みです。従いまして、この記事のカスタマイズを行う必要は一切ございませんのでご安心下さい。
      ※配布テーマのカスタマイズ方法につきましては、申し訳ございませんが個別サポートは行っておりません。ご理解の上ご利用頂けましたら有難く存じます。

  5. まめ子様

    お返事ありがとうございます。

    テーマBlancをカスタマイズするつもりはありません。

    テーマBlancを何も触らずに、そのままで使いたいのですが、画像がスライドしないのです。

    まめ子様のテーマBlancのデモを拝見して精度の高さに感動しています。

    特に、レスポンシブデザインをアイフォンで拝見して、どうしても、Blancでサイトを作りたいと思っています。

    できる限り自力で解決したいのですが、知識不足で、時間だけが過ぎていってしまい、心が折れそうになり、質問させて頂きました。

    色々とテーマBlancを触ってしまったので、本日、テーマBlancをアンインストールして再度(blanc.1.1.7.zip)インストールし直しました。

    http://coredayo.net/

    まめ子様の画像を勝手にお借りして、そのままの画像の名前で、テスト02の商品を登録してみました。(勝手に借りてすいません・・)

    PT-CM-001.jpg PT-CM-001-1.jpg PT-CM-001-2.jpg の三枚をメディアライブラリでアップロードしました。

    Welcart Shop 商品マスターにて、商品コードを PT-CM-001 にして PT-CM-001.jpgは読み込みできていますが、
    PT-CM-001-1.jpg PT-CM-001-2.jpg がスライド画像で読み込めていません。

    http://coredayo.net/item/37/

    PT-CM-001-1.jpg PT-CM-001-2.jpg を読み込む為に、あと何をすればよいのでしょうか?

    宜しくお願いします。

    高野

    • まめ子(管理人) より:

      この問題は、配布テーマとは関係がないかと思われます。テーマはGPLライセンスの下無償で提供されますが、サポートまで含んだものではございません(ライセンスにつきましてはこちらをご覧下さいませ)。ご理解頂いた上でご利用頂けましたら幸甚です。

  6. まめ子様
    サブ画像の読み込みに成功しました。ハイフンが二ついるんですね。
    すばらしいテーマBlancを配布して頂いてありがとうございます。
    高野

  7. 上甲 たかひろ より:

    まめ子様
    はじめまして、上甲と申します。

    こちらのテーマBlancを使用させてもらってます。大変使いやすいテーマをありがとうございます!

    サイトを構築している際に気づいたのですが、商品詳細ページで、スマートフォン(iphone5s : ios8.0.2)で閲覧したときに、商品の画像が表示されません。(なぜか、ごくたまに表示される時があります。)

    FlexSlider2に問題があるのか、どこに原因があるのかわからず困っています。もしおわかりになるようであれば、ご教授頂けたらと思います。

    お忙しいところすみません。
    何卒よろしくお願いいたします。

    • まめ子(管理人) より:

      実は同様のコメントが最近ございました(こちら)。個人的にはこちらとかこちらに見られる症状と同様かなと推測しておりますが、残念ながら私はガラケー派でiPhoneを持ち合わせておらず、確認が出来ません。以前はこのようなご報告は全くございませんでしたので、iOS8になってから何かあるのかもしれないですね。

  8. 上甲 たかひろ より:

    早々のお返事ありがとうございます!
    なるほど、参考にして色々とやってみたいと思います!
    また、何かわかればコメントさせていただきます。
    ありがとうございました!

  9. 望月孝彦 より:

    Blancはすばらしいと感動しています。
    商品画像について質問させてください。
    通常サイズ600pxでは大きいのでサイズダウンしたいのですが、何処を変えればよいものやら・・・。
    大変恐縮ですが、ご教授いただけたらと思います。
    よろしくおねがいします。

    • まめ子(管理人) より:

      お返事が遅くなり大変失礼しました。商品画像サイズ変更につきましては、当記事の4の説明文をご参考下さいませ。ファイルはwc_item_single.phpです。

  10. 望月孝彦 より:

    お返事ありがとうございます。
    う~ん、変化しません。
    これ以外に考えられる原因はあるでしょうか?恐縮です・・・

    <a href="” >

    <a href="” >

  11. 通りすがり より:

    FlexSlider2のWelCartの組み込み、大変参考になり、感謝しています。
    気になったことがあったのでご報告まで。

    <li data-thumb="”>

    この値を変化させた場合、ワードプレスのメディアファイルの設定にその画像サイズがあれば
    (上の例の場合横300ピクセルX縦400ピクセル)がFlax Slider2でメイン画像として表示されます。

    この設定は商品画像のサムネール画像サイズを変化させるものだと思っていましたが違うようですね。
    サムネールのサイズを変更したいのですが今のところ出来ません。

    blancのwc_item_single.phpではサムネールは非表示になってしまう様です。
    何か、設定があるのかも知れませんが、一応ご報告まで。

  12. 通りすがり より:

    すみません、blancを普通にインストールした場合、ちゃんとサムネールも表示出来ています。
    私の記述がどこか、おかしいようです。失礼しました。

  13. […] 今回もそう!設置も私が説明する必要はないと思うし、こんなに詳しく書けないので「画像をスライドショーで見せる FlexSlider2」(『Welcart カスタマイズブログ』さん)をご覧ください。 […]

Copyright© 2017 Welcart カスタマイズ ブログ All Rights Reserved.