特定の投稿記事の表示

手順

特定の投稿記事を表示するコードを20231228-id132.phpに記述

「サブループ」をWP_Queryクラスを使って使用
（※サブループはメインループで表示するメインクエリの記事データとは別に、任意で指定した条件で絞り込んで投稿データを取得することができます。）

<?php
    $args = array(
        'post_type' => 'post',
        'post__in' => array(5,11,40),
    );
    $set_query = new WP_Query( $args );
?>

<div style="background-color: rgba(109, 213, 140, 0.2);">
<?php if ( $set_query->have_posts() ): ?>
        <?php while ( $set_query->have_posts() ) : $set_query->the_post(); ?>
            <a href="<?php the_permalink(); ?>"><?php the_title('<h2>','</h2>'); ?></a><br />
        <?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div>

single.phpに作成したテンプレートファイルを読み込む

<?php
    if( is_single('132') ) :
        get_template_part( 'template-parts/post/20231228-id132' );
    endif;
?>

実際のコード

<style>
    .sample20231228 {
        background-color: #f7f7f7;
        padding: 0.6rem 1rem;
    }

    .sample20231228 ul {
        margin-bottom: 0;
    }

    .sample20231228 li {
        margin-bottom: .2rem;
    }

    .sample20231228 li:last-child {
        margin-bottom: 0;
    }

    .sample20231228 li a {
        display: flex;
        column-gap: 1rem;
    }

    .sample20231228 .post_thumbnail {
        max-width: 120px;
    }

    .sample20231228 .post_thumbnail img {
        width: 90px;
        height: 60px;
        object-fit: cover;
    }

    .sample20231228 .post_title {
        padding-top: 0.6rem;
        font-size: 0.875rem;
        color: #333;
    }

    .sample20231228 .post_date {
        font-size: 0.625rem;
        margin-bottom: 0;
    }
    
</style>

<p style="background-color: #6dd58c; color: #fff; font-size: .75rem; font-weight: bold; padding: .6rem 1rem;">20231228-id132.phpです </p>


<?php /* 取得する投稿の条件 */ ?>
<?php
  $args = array(
    'post_type' => 'post', /* 取得したい投稿タイプ */
    // 'posts_per_page' => 12, /* 表示したい投稿の数 (すべての取得したい場合は「-1」) */
    'post__in' => array(5,11,40),
  );
  $the_query = new WP_Query($args); /* クエリの作成と発行をし、取得したデータを「$the_query」に格納 */
?>

<div class="sample20231228">
<?php /* 取得した投稿の表示 */ ?>
<?php if ($the_query->have_posts()): /* もし、投稿がある場合 */ ?>
  <ul style="list-style: none;">
    <?php while ($the_query->have_posts()) : $the_query->the_post(); /* 投稿のループ開始 */ ?>
    <li>
      <a href="<?php the_permalink(); ?>"><?php /* 投稿のパーマリンク取得 */ ?>
        <div class="post_thumbnail">
          <?php if( has_post_thumbnail() ): /* もし、投稿にサムネイルが設定されている場合 */ ?>
            <?php the_post_thumbnail(); /* 投稿のサムネイルを表示 */ ?>
          <?php else: /* もし、サムネイルが設定されていない場合 */ ?>
            <img src="https://placehold.jp/16px/999/ffffff/352x198.png?text=No%20Image" alt="No Image">
          <?php endif; /* サムネイルのif文終了 */ ?>
        </div>
        <div>
            <h2 class="post_title"><?php the_title(); /* 投稿タイトルの表示 */ ?></h2>
            <p class="post_date">
            <?php /* 公開日の表示 */ ?>
            <span class="release_date">公開日 | <time datetime="<?php the_time('Y-m-d');?>"><?php the_time('Y.m.d'); ?></time></span>
            <?php /* 最終更新日の表示 */ ?>
            <?php if(get_the_time('Y.m.d') != get_the_modified_date('Y.m.d')): /* もし、公開日(the_time)と最終更新日(the_modified_date)が異なる場合 */ ?>
            <span class="update_date">最終更新日 | <time datetime="<?php the_modified_date('Y-m-d'); ?>"><?php the_modified_date('Y.m.d'); ?></time></span>
            <?php endif; /* 最終更新日のif文終了 */ ?>
            </p>
        </div>   
      </a>
    </li>
    <?php endwhile; /* 投稿のループ終了 */ ?>
  </ul>
<?php else: /* もし、投稿がない場合 */ ?>
  <p>まだ投稿がありません。</p>
<?php endif; /* 投稿の条件分岐を終了 */ ?>
<?php wp_reset_postdata(); /* クエリ(サブループ)のリセット */ ?>
</div>