天城スタジオ

welcartで画像・説明・値段のあるカテゴリ別商品リストを作る

ワードプレスを使ってECサイトを作る際に必要なのが「welcart」です。

カテゴリ一覧用のテンプレートはあるのですが、 いまいち使い勝手悪いので、 最終的にカテゴリ別で商品画像、説明文、値段、商品コードが一覧できるPHPを 色々なサイトを参考にして作ってみました。

参考にしたサイトが多すぎて全てを紹介できませんが、

WordPressの添付ファイル(画像) のURL・タイトル・キャプション・説明などを取得する方法

http://zxcvbnmnbvcxz.com/wordpress-categori_id/

様が多きく影響していますので、感謝しております。

ありがとうございました。

 

PHPソースは以下の通りです。

<?php $categories = get_categories('child_of=5');//表示するカテゴリを決定、数字はカテゴリ親カテゴリーのID
foreach($categories as $category) : ?>
<!--カテゴリーリンク 使用する場合はコメントアウトを外す-->
<?php //foreach((get_the_category()) as $cat) { $cat_id = $cat->cat_ID ; break ; }
//$category_link = get_category_link( $cat_id );?>
<!--<a href="<?php //echo get_category_link( $category ); ?>">-->
<?php echo '<h3>' . $category->cat_name .'</h3>'//カテゴリータイトル
?>
<!--</a> -->

<!--カテゴリーリンク 使用する場合はコメントアウトを外す-->
<p><?php echo $category->category_description ;//$categoryで定義されたカテゴリーの説明?>
<?php query_posts('showposts=-1&cat=' . $category->cat_ID);
while(have_posts()) :
the_post(); ?>
<!--アイテムリスト -->
<div>
<a href="<?php echo the_permalink();?>">
<!--商品画像 -->
<?php usces_the_itemImage($number = 0, $width = 230, $height = 230 ); ?>
<!--商品タイトル -->
<?php echo '<h4>' . get_the_title() . '</h4>';?>
<!--商品コード -->
<p>商品コード：<?php echo usces_the_itemCode() ;?></p>

<p>
<?php //画像の説明
$args = array(
post_type => attachment,
post_mime_type => image,
numberposts => -1,
post_status => null,
post_parent => $post->ID
);
$attachments = get_posts($args);
if ( $attachments ) {
foreach ( $attachments as $attachment ) {
$img_description = $attachment->post_content;
echo  $img_description ;
}
}?>
</p>
</a>
<!--価格-->
<p>商品価格：<span><?php echo usces_crform( usces_the_firstPrice('return'), true, false ) ;?></span>
<?php echo usces_guid_tax() ; ?></p>
<!--在庫有無 -->
<p><?php echo usces_the_itemZaiko(); ?></p>

<?php echo '</div>';?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>

<?php endforeach; ?>

構成としては、 まずカテゴリーのタイトルがあり、 指定されたカテゴリーのアイテムがBOK状に表示され、 新しいカテゴリーが出ると改行が入り、 カテゴリータイトル→アイテム一覧が出力されるPHPです。

<?php $categories = get_categories('child_of=5');//表示するカテゴリを決定、数字はカテゴリ親カテゴリーのID

のところのchild_of=5の赤字の数字が親カテゴリーのID名でID名は投稿のカテゴリー情報から確認できます。

細かい点はソースの中にコメントアウトで書いています。

必要に応じて順番を変えたり、 要らない部分を消したりすれば使い勝手が良いと思います。

 

CSSでレイアウトを変更して 商品画像を出力する「$width = 230, $height = 230 」の赤い数字で、 サムネイル（画像）の大きさを変える点。 また説明文を出力するのは商品画像に添付する画像の説明から取得してくるので、 文字数や添付忘れは注意が必要です。

 

場合によっては「カートのボタン」が必要になるかもしれませんが、 カートのボンタンを取得するコードとショートコードがあるので、 挿入してカスタマイズするのもいいかもしれません。