OliveCartガイド《07》home.phpを用意する

2019/1/31 OliveCartを使いこなす

WordPressはhome.phpというファイルがあると、このファイルをホーム用（トップページ用）として最優先で読み込みます。
そのため、home.phpを作り、このページで商品の一覧を表示させます。
single-cart.phpと同様に、不要なコードを削除していきます。
コンテンツを表示させているすべてのコードを削除

<?php if ( have_posts () ) : while (have_posts()):the_post();?>
<!-- entry -->

↑ここから、ここまで↓のすべてのコードを削除します。

<div class="contents">
<p>Sorry, but you are looking for something that isn't here. </p>
</div>
</div>
<?php endif; ?>

残ったコード（参考までに）

<?php get_header(); ?>
<!-- entries -->
<div id="entries">
<!-- ここに新しくコードを書いていきます -->
</div>
<!-- /entries -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

追加するコード

投稿タイプ「cart」を表示させるコード

<ul class="block3">
<?php
$loop = new WP_Query(array(
'post_type' => 'cart',//投稿タイプを指定
'posts_per_page' => 12,//表示する商品数
'orderby' => 'rand',//商品をランダムに選んで表示
));
if ( $loop->have_posts() ) : while($loop->have_posts()): $loop->the_post();
?>
<li>
<!-- アイキャッチを登録しているので、その画像を表示 -->
<a href='<?php the_permalink() ?>' title='<?php the_title(); ?>'><?php the_post_thumbnail('thumbnail'); ?>
</a><br>
<!-- 価格のカスタムフィールドを読み込み -->
<?php $get_meta = $olivecart_meta->get_meta($post->ID); ?>
<h3><a href='<?php the_permalink() ?>'><?php the_title(); ?></h3>
<p>¥<?php echo $get_meta->item_option_price;?>（税込）</p>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul><!-- /block -->
<!-- クエリをリセット -->
<?php wp_reset_query(); ?>

home.phpのコード全文

<?php get_header(); ?>
<!-- entries -->
<div id="entries">
<ul class="block3">
<?php
$loop = new WP_Query(array(
'post_type' => 'cart',
'posts_per_page' => 12,
'orderby' => 'rand',
));
if ( $loop->have_posts() ) : while($loop->have_posts()): $loop->the_post();
?>
<li>
<a href='<?php the_permalink() ?>' title='<?php the_title(); ?>'><?php the_post_thumbnail('thumbnail'); ?>
</a><br>
<?php $get_meta = $olivecart_meta->get_meta($post->ID); ?>
<h3><a href='<?php the_permalink() ?>'><?php the_title(); ?></h3>
<p>¥<?php echo $get_meta->item_option_price;?>（税込）</p>
</li>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</ul><!-- /block -->
</div><!-- /entries -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

cssを調整

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

/*商品リストの体裁を整える*/
ul.block3 {
	text-align: center;
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}
ul.block3 li {
	text-align: center;
	list-style: none;
	width: 32.3%;
	float: left;
	margin: 0;
	padding: 0.5%;
}
.block3 li img {
	border: 1px solid #dcdcdc;
}

トップページはこんな感じになります。
4173