*当サイトのリンクにはAmazonアソシエイトやアフィリエイトリンクが含まれております。

welcart対応テーマBlancの商品スライダーにキャプションを挿入

相変わらずのウェブ関係ネタでーす。
飽きたら辞めますので、きっともうすぐですww

広告

welcart関数を利用してスライダーにキャプションを入れよう

利用させて頂いているテーマBlancは商品詳細の画像がスライダーになっているワケですが、画像の下にキャプションがあったほうが良いサイトもありますよね?
その場合、welcartの関数を利用すると良いと思います。
コードは

<div id="slider" class="flexslider">
        <ul class="slides">
            <li>
                <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>
                <p class="flex-caption"><span><?php usces_the_itemImageDescription(0); ?></span></p>
            </li>
            <?php $imageid = usces_get_itemSubImageNums(); ?>
            <?php foreach ( $imageid as $id ) : ?>
            <li><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>
<p class="flex-caption"><span><?php usces_the_itemImageDescription($id); ?></span></p></li>
            <?php endforeach; ?>
        </ul>
    </div>

こんな感じですかね。
usces_the_itemImageDescriptionが商品画像の説明文の出力になりますので、メディアから編集出来ます。
flex-captionをクラス属性にしていますので、お好みにcssの調整すると良いのではないでしょうか?

とても簡単な内容でした・・・・


おすすめのコンテンツ

広告

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください