【wordpress】商品一覧ページを作る　おまけ(値段の表示)

その3で作った商品一覧ページですが、商品1つ1つに値段が表示されていれば便利ですよね。
今回は個別に金額を表示させます。

商品ごとに金額を追加する

まず「その1」でタクソノミー（商品の分類）を作りましたが、同じように新規で「値段」のタクソノミーを作ります。
管理画面からCPT UI▶タクソノミーの追加と編集

f:id:sbnk4030:20190718143709p:plain

・タクソノミースラッグ：products_price
・複数形のラベル：値段
・単数形のラベル：値段
・利用する投稿タイプ：商品

上記のように入力して保存します。
保存したら商品一覧から値段をつけたい商品の個別ページに行きます。

f:id:sbnk4030:20190718144452p:plain

右側に値段の枠が出来ていると思うので、そこに値段をカンマなしで打ち込み、追加。
そして保存します。

products.phpにコードを追加

products.phpを以下のように書き換えます。

<?php
/*
Template Name: products
*/
?>

<?php get_header(); ?>

<div class="container">
	<p>すべての商品</p>
	<?php
		 $args = array(
			'post_type' => 'products',
			'post__not_in' =>  array($post->ID),
			'posts_per_page' => -1,
		);
	?>
	<div class="products_list">
		<?php $myposts = get_posts($args); ?>
		<?php
			foreach($myposts as $post) : setup_postdata($post);
		?>
						
		<div class="post">
			<div class="products_thum"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(auto,300)); ?></a></div>
			<div class="products_title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></div>
			<div class="product_ctgy">
				<?php
					$terms = get_the_terms($post->ID,'products_category');
					foreach( $terms as $term ) {
						echo '<span>'.$term->name.'</span>';
					}
				?>
			</div>
			<!-- 金額を追加 -->
			<?php
				$terms = get_the_terms($post->ID,'products_price');
				foreach( $terms as $term ) {
					echo '<span class="price">'.number_format($term->name).'円（税抜）</span>';
				}
			?>
			<!-- 金額ここまで -->
			</div>
		<?php endforeach; ?>
	</div>
</div>

<?php get_footer(); ?>

抜粋すると、「金額を追加」から「金額ここまで」の箇所を追加します。
（後ほど値段のフォントの大きさを変更するのでspanで金額を囲っています）

<!-- 金額を追加 -->
<?php
	$terms = get_the_terms($post->ID,'products_price');
	foreach( $terms as $term ) {
		echo '<span class="price">'.number_format($term->name).'円（税抜）</span>';
	}
?>
<!-- 金額ここまで -->

products.cssを編集

これでも表示されますが、金額のフォントなどを少し直します。
その2にあるcssの「商品タイトル」以下を少し編集します。

/*商品タイトル*/
.products_title {
    font-weight: bold;
}

.products_title a {
    color: #333;
    text-decoration: underline;
}

.products_title a:hover {
    color: #777;

}

/*商品カテゴリ*/
.product_ctgy {
    border-bottom: 1px solid #969696;
}

.product_ctgy span {
  font-size: 0.8em;
}

.product_ctgy span+span:before {
    margin: 0 0.2em;
    content: "/";
}

.price {
    font-size: 14px;
}