全部の商品の一覧ページはこんなふうに、商品画像が並んだレイアウトにしたかったんですが、やってみたら思ったより簡単にできました。
コツは2つ。
商品一覧ページに適用する専用テンプレートを作る
こちらのページ「WordPressテンプレートを各カテゴリ等で別々に使い分ける」の中の「特定のカテゴリだけ専用のテンプレートを使う」に驚きの方法が!
特定のカテゴリ専用のカテゴリテンプレートのファイル名には「category-8.php」のように、ハイフンとカテゴリIDの数字をつけて保存するだけです。
そんなお手軽な裏技(?)があるなんて、全然知りませんでした(^^;
アタシはてっきり、カテゴリー用のテンプレート内に条件分岐で読み込ませるもんだと思っていたので、これはうれしい誤算でした。
さっそくトライしてみましたよ。アタシが使ってるカテゴリー用のテンプレートは「archive.php」って名前ですが、気にせず「category-●●.php」って名前にリネームしたヤツをアップして、次のように中身を編集します。(●●は適用したいカテゴリーのID(数字))
商品のサムネイル画像を並べる
サンプルコードを書いておきます。
何をしてるかというと、最初の行に見出し、次の行にカテゴリーの説明(カテゴリー設定画面に記入欄があります)を読み込み、そのあとにサムネイル画像を並べるコードを入れています。
<h3>ウェルカムボードいろいろ</h3>
<p><?php echo category_description(●●); ?></p>
<?php query_posts('cat=●●&status=post&order=ASC'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); usces_the_item(); ?>
<div class="thumbnail_box">
<div class="thumimg"><a href="<?php the_permalink() ?>"><?php usces_the_itemImage($number = 0, $width = 108, $height = 108 ); ?></a></div>
<div class="thumtitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php usces_the_itemName(); ?> (<?php usces_the_itemCode(); ?>)</a></div>
<?php if (usces_is_skus()) : ?>
<div class="price">¥<?php usces_the_firstPrice(); ?><?php usces_guid_tax(); ?></div>
<?php endif; ?>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
3行目以降は、Welcart同梱のテーマフォルダ内の「home.php」をよーく見ると書いてあるので、コピペで使いました。
query_postsで、どのカテゴリーの内容を読み込むか指定したのち、ループの呪文を書いて、その中で usces_the_itemName usces_the_firstPrice usces_the_itemImage などのWelcartの専用テンプレートタグを使って、商品名や価格、商品写真を表示させています。
(ちなみに、商品番号を昇順=ページIDが小さい順で表示させてるので、逆にしたい場合はASCをDESCに置き換えてね)
ここまでできたら、あとはスタイルシートで横に並べて完成。
カンタン!
カテゴリーの説明欄は今まで使ったことなかったけど、こうやって商品一覧に表示するようにしとけば、あとで修正したいとき、管理画面のフォームで直せるので気楽です。
このサンプルコードは、カテゴリーを「おすすめ商品」とか「新着」とかに変えて、今あるトップページに表示させると便利ですねー。


