OliveCartガイド《06》single-cart.phpを用意する

Posted on by vision2019

OliveCartは、カスタム投稿タイプとカスタムフィールドを利用してします。
カスタム投稿タイプのスラッグは「cart」のため、single-cart.phpを作ると、商品の個別ページを適切に表示させることができます。

single-cart.phpのカスタマイズ

修正前のコード

<!-- date -->
<div class="date">
<div class="month"><?php the_time('M') ?></div>
<div class="day"><?php the_time('d') ?></div>
</div>
<!-- /date -->
<h2><?php the_title(); ?></h2><div class="clear"></div>
<div class="contents">
<?php the_content(); ?>
<div class="clear"></div>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>

まずは、コンテンツの周りを修正します。

  1. 日付は要らないので、日付を表示しているコードを削除。
  2. 商品画像として使ったアイキャッチを表示させたいので、コードを追加。
  3. 商品名、商品コード、価格のカスタムフィールドを表示。
  4. 不要なwp_link_pageを削除。

修正後のコード

<h2><?php the_title(); ?></h2><div class="clear"></div>
<div class="contents">
<!-- 商品画像の表示 -->
<?php the_post_thumbnail('medium'); ?>
<?php the_content(); ?>
<!-- カートのカスタムフィールドを表示 -->
<?php $get_meta = $olivecart_meta->get_meta($post->ID); ?>
<p>商品名：<?php echo $get_meta->item_title;?></p>
<p>コード：<?php echo $get_meta->item_number;?></p>
<p>金　額：¥<?php echo $get_meta->item_option_price;?></p>
<!-- カートに入れるボタンを追加 -->
<?php get_cart_button();?>
<div class="clear"></div>
</div>

続いて、meta部分とコメントの部分を削除します。

  1. 日付、投稿者などのmetaは要らないので、すべてのコードを削除。
  2. コメントは利用しないので、コードを削除。

削除するmeta部分のコード

<div class="meta">
<div class="time"></div><?php the_time('F jS, Y') ?>
<div class="user"></div><a href="<?php the_author_meta('url'); ?>">< ?php the_author(); ?></a>
<div class="category"></div><?php the_category(', ', '' ); ?>
<div class="tag"></div><?php the_tags('', ', ', ''); ?>
<div class="comment"></div><?php comments_popup_link('0 Comment','1 Comment','% Comments'); ?>
</div>

削除するコメント部分のコード

<?php comments_template('', true); ?>

single-cart.phpのコード全文

完全コード

<?php get_header(); ?>
<!-- entries -->
<div id="entries">
<!-- breadcrumbs -->
<div id="breadcrumbs">
<?php simplenotes_get_breadcrumbs(); ?><div class="clear"></div>
</div>
<!-- /breadcrumbs -->
<!-- calling entry -->
<?php if ( have_posts () ) : while (have_posts()):the_post();?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="entry">
<h2><?php the_title(); ?></h2><div class="clear"></div>
<div class="contents">
<!-- thumbnail -->
<?php the_post_thumbnail('medium'); ?>
<!-- content -->
<?php the_content(); ?>
<!-- cart -->
<?php $get_meta = $olivecart_meta->get_meta($post->ID); ?>
<p>商品名：<?php echo $get_meta->item_title;?></p>
<p>コード：<?php echo $get_meta->item_number;?></p>
<p>金　額：¥<?php echo $get_meta->item_option_price;?></p>
<!-- Button -->
<?php get_cart_button();?>
<!-- /cart -->
<div class="clear"></div>
</div>
</div><!-- /entry -->
<?php endwhile; ?>
<?php else : ?>
<div class="entry">
<h2>404 Not Found</h2>
<div class="clear"></div>
<div class="contents">
<p>Sorry, but you are looking for something that isn't here. </p>
</div>
</div>
<?php endif; ?>
</div><!-- ending entries -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

＊本コードはあくまで、どのようにコードを書き換えるのかというサンプルとして掲示しています。コードの正常な動作を保証するものではありません。

cssを調整

cssを調整して体裁を整えます。style.cssに追記するコード。

/*グローバルナビの文字の大きさを変更*/
nav#menu ul li a {
	font-size: 16px;
	line-height: 16px;
	letter-spacing: 1px;
}
/*タイトルの文字の大きさを変更*/
div.entry h2{
	font-size: 32px;
	line-height: 32px;
	letter-spacing: 1px;
}
/*商品写真の右にテキストを流す*/
.contents img.size-medium {
	float: left;
	margin-right: 14px;
	border: 1px solid #dcdcdc;
}

商品の個別ページはこんな感じになります。
4192