【wordpress】商品一覧ページを作る　その2

その1はコチラ
【wordpress】商品一覧ページを作るその1 - さびぬき覚書

その2ではCSSを読み込ませたりと表示のカスタマイズを行います。

表示のカスタマイズ

その1で表示まではできたので、今度は表示をカスタマイズしていきます。
f:id:sbnk4030:20190416151446p:plain
今回は上の図みたいに表示&商品が増えたときのことを考えて、1列に3つの商品が並ぶようにします。

新規でtaxonomy.phpを制作して、以下のように記述します。

<?php get_header(); ?>
<div class="container">
	<div class="products_list">
		<?php if (have_posts()) : ?>
			<?php while (have_posts()) : the_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>
      			      </div>
	  	<?php endwhile; ?>
	</div>
</div>
<?php else : ?>
    <div class="post">
		<h3>製品がありません</h3>
		<p>表示する製品がありませんでした</p>
    </div>
<?php endif; ?>

<?php get_footer(); ?>

サムネイル画像の大きさは以下の箇所の(auto,300)をいじると変更できます。

<div class="products_thum"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(auto,300)); ?></a></div>

下部のここですが、

<?php else : ?>
	<div class="post">
		<h3>製品がありません</h3>
		<p>表示する製品がありませんでした</p>
	</div>
<?php endif; ?>

スラッグはあっても割り当てられている商品がない場合に表示されます。

taxonomy.phpを制作したら、cssも作ります。名前はproducts.cssにします。

/*商品全体を表示させる領域*/
.products_list {
    width: 900px;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

/*商品1つの横幅*/
.post {
    width: 29%;
    margin: 1em;
}

/*サムネ*/
.products_thum {
    text-align: center;
    background-color: #FFF;
}

.products_thum a:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
    -ms-filter: "alpha(opacity=50)";
}

/*商品タイトル*/
.products_title {
    font-weight: bold;
    border-bottom: 1px solid #969696;
}

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

.products_title a:hover {
    color: #777;

}

/*商品カテゴリ*/
.product_ctgy span {
  font-size: 0.8em;
}

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

作ったphpとcssをftp等でアップします。
taxonomy.phpはwp-content/theme/使用しているテーマ（今回はneve）フォルダの中に
products.cssもnaveの場合はtaxonomy.phpと同じ所でOKです。

cssを読み込ませる

現状だとproducts.cssが読み込まれないので読み込まれるようにします。先程アップしたフォルダ内にfunction.phpというファイルがあるので開きます。
34行目の後あたり、もしくは一番下に以下を追加します。

/* products.css読み込み*/
function add_files() {
	wp_enqueue_style( 'products', get_template_directory_uri() . '/products.css');
}
add_action( 'wp_enqueue_scripts', 'add_files' );

ここまできたらまたhttp://●●●/products_category/toys/を確認します。
1列に3つ商品が表示されるようになったと思います（画像はいくつか商品を増やしてみた状態です）。
f:id:sbnk4030:20190417110834p:plain