Welcart Basic商品ページ画像の、クリックすると拡大表示してくれるLight Box系の仕様から、スライドして見れるようにカスタマイズしました。
使用するjQueryプラグインは「FlexSlider2」。
WordPressプラグインのように頻繁な更新もなく、レスポンシブ対応なので導入してみました。
今回はそのカスタマイズの備忘録。簡単なメモになります。
スポンサーリンク
目次
FlexSlider2を導入するとどうなるの？
導入後の見た目は、大きな画像がひとつとその下に小さいサムネイルが4つ並ぶかたち。
サムネイルをクリック、またはメイン画像の両端の矢印をクリックするとメインの画像がスライドします。
FlexSlider2をダウンロード
jQueryプラグイン「FlexSlider2」は、ショッピングカートのプラグイン「wooCommerce」で有名なwooThemes社のサイトhttp://flexslider.woothemes.com/からダウンロードできます。
ダウンロードしたファイルを解凍するとたくさんのファイルがありますが、使用するのは
・jQuery.flexslider-min.js
・flexslider.css
・fontsフォルダ
になります。
これらを子テーマのフォルダに入れます。
※Welcart Basicの子テーマについての詳細はこちらをご覧ください。
⇒ Welcart Basic の子テーマの作り方
jQuery本体を読み込んでWordPressでjQueryを動かす
WordPress内に標準でjQueryのライブラリが用意されていますが、初期設定ではjQueryは読み込みされませんので、＜head＞～＜/head＞内に、ライブラリを読み込むための関数を追加する必要があります。
具体的には、下記のように読み込むための関数「wp_enqueue_script」をheader.phpファイルの＜?php wp_head(); ?＞の前に追加します。
<?php wp_enqueue_script('jquery'); ?>;
<?php wp_head(); ?>;
追加したら読み込まれているかを確認します。
実際のページのソースで、下記の一行があるかどうかを確認してください。
<script type='text/javascript' src='http://sample.com/ wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
jQuery.flexslider-min.jsとflexslider.cssを読み込む
先ほど設置した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() . '/wp-content/themes/●テーマ名/css/flexslider.css');
wp_enqueue_script( 'flexslider-js', get_template_directory_uri() . '/wp-content/themes/●テーマ名/js/jquery.flexslider-min.js', array(), '2.2.2', true);
}
}
add_action( 'wp_enqueue_scripts', 'my_scripts');
追加したら、css、jsがきちんと読み込まれるパスになっているか確認します。
記述上は相対パスにしていますが、ブラウザにURLのhttp://sample.com/wp-content/themes/●テーマ名/css/flexslider.cssを入力してcssファイル内容が表示されるか確認します。
jsファイルも同様にチェックします。
flexslider.cssを編集
今の段階ではデフォルトと設置位置が違うので、cssファイルからfontsフォルダの画像を読み込めるように設定を編集します。
flexslider.cssファイルの@font-faceの箇所。fontsファイルの読み込みパスを下記のように変えておきます。
@font-face {
font-family: 'flexslider-icon';
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');
font-weight: normal;
font-style: normal;
}
FlexSliderを動かすscriptを記述する
下記のFlexSlider2を動かすscriptをheader.phpファイル内＜/head＞の直前に記述します。
<?php if(usces_is_item()): ?>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: "slide",
slideshow: false,
controlNav: "thumbnails"
});
});
</script>
<?php endif; ?>
wc_single_item.phpを編集
商品詳細ページのテンプレートwc_single_item.phpファイルをカスタマイズしていきます。
子テーマにコピーした「wc_single_item.php」ファイルの＜div id=”img-box”＞内の記述を変更します。
デフォルトの
<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, 500, 500, $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">
<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, 500, 500, $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, 500, 500, $post); ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
</div><!-- #img-box -->
ひとこと
以上がFlexSlider2の導入の方法になります。
個人的なメモになるので、やってみると実際と異なる箇所もあると思いますが、参考程度にお役に立てればと思います。
