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; }
トップページはこんな感じになります。