既存のテーマを利用したショップの作り方　その2

前回の「ループに商品を含ませない」処理により、通常ブログのアーカイブ（ループページ）には商品が表示されなくなりました。今回は商品のみの一覧ページの作成方法です。
　

2. 商品だけのループページを作る

商品だけのループページとは「商品一覧」ページで、作成手法は次の2つが考えられます。
　

• カテゴリーアーカイブによる商品一覧
  カテゴリーテンプレートを利用して通常記事とは違うレイアウトを作ります。
• 固定ページに商品一覧を作る
  絞込みや並べ替えも含めた個別のテンプレートを作り固定ページに割り当てます。

　

　

◆カテゴリーアーカイブによる商品一覧

　　
右の図は「商品」カテゴリーのアーカイブです。わかりやすくするために商品に説明文を書き、メディアから商品画像をアップロードしました。
　
表示されている商品画像は記事に挿入したものではありません。Welcart が商品画像を探し出し自動的に説明文と共に表示させています。
これはテンプレートタグ”the_content()”が出力する内容をWelcart が強制的に書き換えていますので、このレイアウトを変更したい場合は”the_content()”を削除し、直接画像や説明文、価格などを表示させることになります。
しかし、ただ削除するだけではブログの記事が表示されなくなってしまいます。
　
そこで登場するのがカテゴリーテンプレート（category.php）です。
　
category.php はURLがカテゴリーを指定しているときに適用されるテンプレートです。このテンプレートに好みのデザインを施せばいいのです。
　
ただし、このテンプレートは未分類も含めて商品以外のカテゴリーにも適用されます。そのため商品カテゴリーに属する場合は商品のデザイン、それ以外の記事の場合は通常のレイアウトで表示するといった分岐を一つ入れてやる必要があります。
　
　
これは商品とそれ以外の記事を分岐させるためのタグです。

<?php if ( usces_is_item() ) : ?>
　　|
　　|　ここは商品用エリア
　　|
<?php else : ?>
　　|
　　| ここは通常記事のエリア
　　|
<?php endif ?>

　
　
では実際にcategory.php を作ってみます。

まず、index.php を複写してcategory.php として保存します。これだけで通常記事の表示はOKです。

前回index.php の12行目に挿入した<?php query_posts(‘cat=-3’); ?> はcategory.php には必要ないので削除します。

次に、商品情報を取得できるようにするため13行目にusces_the_item() というタグを一つ付け加えます。

<?php while (have_posts()) : the_post(); usces_the_item(); ?>

そして分岐タグを挿入します。挿入する位置はどこまでを共有するかによります。今回はthe_content のみを分岐させることにします。
category.php の中のthe_content は<div class=”entry”> で囲まれています。この部分に挿入します。

<div class=”entry”> を含めて書いたコードは次の通りです。

*
*
*
<div class=”entry”>

<?php if ( usces_is_item() ) : ?>
<!– 商品のためのエリア –>

<?php else : ?>
<!– 通常の記事 –>
<?php the_content(__(‘Read the rest of this entry ?’, ‘kubrick’)); ?>

<?php endif ?>

</div>
*
*
*

　
　
　

さて、いよいよ商品一覧のレイアウトの話です。
Welcart は商品情報を表示させるために様々なテンプレートタグを用意しています。「Welcart テンプレートタグ一覧」参照
　
右の図は主なテンプレートタグを使って商品情報を表示させたカテゴリーアーカイブです。実際にはこのページはいくつ物商品がループして並ぶので、表示する情報は必要最低限のものでよいと思います。詳細は商品詳細ページで表示するようになっています。
　
商品詳細ページにはとは別に直接カートへ投入するボタンや数量フィールドもここに表示させることができます。こちらは「固定ページに商品一覧を作る」方法で説明したいと思います。
　
　
このページに書いたソースは次の通りです。

　　　　　*
　　　　　*
　　　　　*
<div class=”entry”>
<?php if ( usces_is_item() ) : ?>

　　<dl>
　
　　　　<dt>商品名と商品コード</dt>
　　　　<dd><?php usces_the_itemName(); ?>：<?php usces_the_itemCode(); ?></dd>
　
　　　　<dt>メイン画像（商品詳細ページへのリンク）</dt>
　　　　<dd><a href=”<?php the_permalink(); ?>”><?php usces_the_itemImage(0, 150, 150); ?></a></dd>
　
　　　　<dt>サブ画像（写真へのリンク）</dt>
　　　　<dd><a href=”<?php usces_the_itemImageURL(1); ?>”><?php usces_the_itemImage(1, 100, 100); ?></a><dd>
　
　　　　<dt>記事本文</dt>
　　　　<!–直接echoします。次期バージョンでは usces_the_content() を追加予定–>
　　　　<dd><?php echo $post->post_content; ?></dd>
　
　　　　<dt>抜粋</dt>
　　　　<!–直接echoします。次期バージョンでは usces_the_excerpt() を追加予定–>
　　　　<dd><?php echo $post->post_excerpt; ?></dd>
　
　　　　<?php usces_have_skus(); ?><!– SKU情報取得準備タグ –>
　
　　　　<dt>在庫ステイタスと価格など抜粋</dt>
　　　　<dd><span class=”zaikostatus”><?php usces_the_itemZaiko(); ?></span>　<span class=”price”><?php usces_the_itemPrice(); ?>円</span><span class=”tax”><?php usces_guid_tax(); ?></span></dd>
　
　　</dl>
　
<?php else : ?>
　　　　　*
　　　　　*
　　　　　*

※テンプレートファイルを編集する際はUTF-8で保存してください。
　
　
　

◆固定ページに商品一覧を作る

　
次はオリジナルのテンプレートを作って固定ページに割り当てるという方法を紹介します。今回はお勧め商品だけを表示するページを作ってみます。
　
まずはテンプレートファイルを作ります。
カテゴリーテンプレートを作ったときと同じように、index.php を複写して適当な名前をつけて保存します。このときWordpress が予約しているファイル名にならないように気をつけましょう。今回はMyRecoItem.php と名前を付けてみました。
　
このファイルがテンプレートファイルだとWordpress に認識させるため、コードの冒頭のコメントを次のように書き換えます。
　

/*
Template Name: お勧め商品テンプレート
*/

　
このテンプレートWordpress に認識されているかどうか確認してみましょう。
　
新規ページを作成画面の右サイドバーに”テンプレート”というフィールドが有ります。そのセレクトに”お勧め商品テンプレート”があれば成功です。
”お勧め商品テンプレート”を選択し、タイトルに「お勧め商品」と書いて保存（公開）してください。本文は空白で構いません。

フロントから新しいページ「お勧め商品」を確認するとトップページとまったく同じものが表示されているはずです。
　
では、テンプレートを編集していきましょう。
今回のポイントは・・

• form タグを使用する（カートへボタンをつけるため）
• お勧め商品で絞り込む
• 商品か否かの分岐は要らない

この3点で、後はカテゴリーテンプレートとほぼ同じです。
　
　
form タグの挿入位置を間違えると、他のタグとクロスしてしまいスタイルが崩れるので注意しましょう。今回はわかりやすくcontent を全部括ってしまいます。
　
form タグを挿入

<?php
/*
Template Name: お勧め商品テンプレート
*/
　
get_header(); ?>
　
<form action="<?php echo USCES_CART_URL ?>" method="post">
<div id="content" class="narrowcolumn" role="main">
　　　　　*
　　　　　*
　　　　　*
　　　　　*
</div>
</form>
　
<?php get_sidebar(); ?>
<?php get_footer(); ?>

　
　
前回「ループに商品を含ませない」で挿入したquery_posts が今回も活躍します。
　
お勧め商品に絞り込む

　　　　　*
　　　　　*
<?php if (have_posts()) : ?>
　　<?php query_posts(‘category_slug=itemreco’); ?>
　　<?php while (have_posts()) : the_post(); usces_the_item(); ?>
　　　　　*
　　　　　*

　
　
今回はquery_posts により商品に絞り込まれますのでenty の中には分岐タグはいりません。
the_content の行を削除して、カートへ投入ボタンをはじめ商品情報関連タグを挿入していきます。
　
カート投入ボタンの挿入

　　　　　*
　　　　　*
<div class="entry">
　
<dl>
　
　　<dt>商品名と商品コード</dt>
　　<dd><?php usces_the_itemName(); ?>：<?php usces_the_itemCode(); ?></dd>
　
　　<dt>メイン画像（商品詳細ページへのリンク）</dt>
　　<dd><a href="<?php the_permalink(); ?>"><?php usces_the_itemImage(0, 100, 100); ?></a></dd>
　
　　<?php usces_have_skus(); ?>
　
　　<dt>在庫ステイタスと価格など抜粋</dt>
　　<dd><span class="zaikostatus"><?php usces_the_itemZaiko(); ?></span>　<span class="price"><?php usces_the_itemPrice(); ?>円</span><span class="tax"><?php usces_guid_tax(); ?></span></dd>
　
　　<dt>数量とカート投入ボタン</dt>
　　<dd>数量<?php usces_the_itemQuant(); ?>　 <?php usces_the_itemSkuButton(‘カートへ入れる’); ?></dd>
　
</dl>
　
</div>
　　　　　*
　　　　　*

　　
　

お勧め商品ページは右のように表示されます。
　
　
この様に、一覧などループ表示ではWelcart テンプレートタグを利用することで自由なレイアウトが可能となります。

個別表示となる商品詳細ページに関しては、今のところこの様な自由なレイアウトはできません。将来なんらかの方法でデザインの自由度を上げたいと考えています。

SKUが複数有る場合
SKUが複数あり、全ての情報を表示したい場合はSKUをループして情報を取得する方法がありますが、ここでは割愛させていただきます。興味のある方は、usc-e-shop/templates/single_item.php をご覧ください。
　
今回の方法でSKUが複数あった場合は先頭の情報が表示されます。
　
　
　
以上、「既存のテーマを利用したショップの作り方　その2」は商品だけのループページを作る方法でした。
　
次回は、テンプレートを使用するのではなく投稿記事そのものにカート投入ボタンをいれる方法を紹介します。
　
　
今回作成したテンプレートファイルはこちらからダウンロードできます。
Welcart_works01
　
　
＜その1　「ループに商品を含ませない」