この記事は2010年2月28日に書いたもので、内容が古い可能性がありますのでご注意ください

Welcartを使ってWordPressに商品一覧ページを作ってみた

全部の商品の一覧ページはこんなふうに、商品画像が並んだレイアウトにしたかったんですが、やってみたら思ったより簡単にできました。
コツは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(); ?>&nbsp;(<?php usces_the_itemCode(); ?>)</a></div>
<?php if (usces_is_skus()) : ?>
	<div class="price">&yen;<?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に置き換えてね)

ここまでできたら、あとはスタイルシートで横に並べて完成。
カンタン!

カテゴリーの説明欄は今まで使ったことなかったけど、こうやって商品一覧に表示するようにしとけば、あとで修正したいとき、管理画面のフォームで直せるので気楽です。

このサンプルコードは、カテゴリーを「おすすめ商品」とか「新着」とかに変えて、今あるトップページに表示させると便利ですねー。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク

コメント

  1. […] 参考:Welcartを使ってWordPressに商品一覧ページを作ってみた 参考:既存のテーマを利用したショップの作り方 その2 参考:ループタグの条件を指定する<?php query_posts(); ?> どこをどう […]