【目次】

トップページにピックアップ記事を表示する方法を下記2つの方法で紹介する

1. 投稿IDを指定して表示する方法
2. 「pickup」のタグがついた投稿をピックアップ記事として表示する方法

• それぞれの特徴
• 使い分けについて

投稿IDを指定して、ピックアップ記事を表示する

1. template-partsフォルダ内に『pickup.php』を作る

2. 「index.php」に記述していたピックアップ記事のコードを『pickup.php』に移す

3. 「index.php」に『pickup.php』を読み込む <?php get_template_part('template-parts/pickup'); ?>

4. ピックアップ記事に表示させたい記事の投稿画面を表示し、URLにある「post=〇〇」の〇〇をメモしておく（〇〇が投稿ID）

   

5. 『pickup.php』に記述していたコードを下記を参考にしながら動的にしていく。なお、「$pickup_ids = array( 59, 61, 62 );」の数字を4.でメモした数字に置き換えること。

   <!-- pickup -->
   <div id="pickup">
   <div class="inner">
   
   <div class="pickup-items">
   
   <?php $pickup_ids = array( 59, 61, 62 ); // ピックアップする記事の投稿idを指定する ?>
   <?php foreach ( $pickup_ids as $id ) : ?>
   
   <a href="<?php echo esc_url( get_permalink( $id ) ); ?>" class="pickup-item">
   <div class="pickup-item-img">
   <?php
   if ( has_post_thumbnail( $id ) ) {
   echo get_the_post_thumbnail( $id, 'large' );
   } else {
   echo '<img src="' . esc_url( get_template_directory_uri() ) . '/img/noimg.png" alt="">';
   }
   ?>
   <div class="pickup-item-tag"><?php my_the_post_category( false, $id ); ?></div><!-- /pickup-item-tag -->
   </div><!-- /pickup-item-img -->
   <div class="pickup-item-body">
   <h2 class="pickup-item-title"><?php echo esc_html( get_the_title( $id ) ); ?></h2><!-- /pickup-item-title -->
   </div><!-- /pickup-item-body -->
   </a><!-- /pickup-item -->
   
   <?php endforeach; ?>
   
   </div><!-- /pickup-items -->
   
   </div><!-- /inner -->
   </div><!-- /pickup -->
   

6. トップページを表示し、ピックアップ記事が表示されているか確認する