10 July

WCEX Mobile　トップページの新着ボックスを複数設置する　welcart

有料拡張プラグインWCEX Mobileで、トップページにあるスライドボックスを
さらに増やしたいときのやり方。

「再入荷商品」として新たに設置したい。

前提条件：再入荷商品のカテゴリーを作成し、商品を登録しておく

１、新着商品<div id="home_new">のdivを丸ごとコピーして表示させたい場所に置く。
２、コピーした　<div id="home_new">　のid名を変更→　<div id="sainyuka">
３、コピーした　<div id="home_new">　内の
<span><a href="<?php wcmb_get_category_link_by_slug( 'itemnew' ); ?>"><?php _e('list', 'usces'); ?> »</a></span>　のスラッグ名を再入荷商品のスラッグ名に変更
<?php $reco_ob = new wp_query(array('category_name'=>'itemnew', 'posts_per_page'=>12, 'post_status'=>'publish')); ?>　のカテゴリー名を再入荷商品のカテゴリー名に変更変更
４、style.css内を「home_new」で検索して、出てきた箇所全てに「sainyuka」も加える

これで見た目は完成。
しかし次へ前へのボタンをおしてもスライドしない！
Rotoというjqueryを使って動いていました。
これの設定の仕方は非常に簡単なのでありがたいです。
http://www.skuare.net/2011/09/roto.html

５、コピーした　<div id="home_new">　内の　<div id="listbox" class="roto">　の
id名を変更します→　<div id="listbox2" class="roto">
６、コピーした　<div id="home_new">　内の　<button id="listbox-prev"><button id="listbox-next">　の　id名を先ほど変更したid名と同じにします
→　<button id="listbox2-prev"><button id="listbox2-next">
７、footer.phpを開き、</body>直前にあるScriptに $("#listbox2").roto({ direction: "v" });
と書き足します。

完成です！

おすすめ商品のほうのスライドボックスを増やしたいときは、<div id="home_recommend">
のdivをコピペして上記と同じことをしてください。スライドのScriptは、おすすめ商品で
使われているid名のものをコピペしてid名を変えてください。
縦スライド、横スライドで指定の仕方が違います。
コピペ元→ $("#carousel").roto({ snap: false });