WordPressの新着記事一覧のカスタマイズ

WordPressの新着記事の一覧で、下記のように表示したいと思いChatGPTに質問しながらコードを書きました。

投稿日
記事のタイトル
ヘッダー画像
記事の最初の３００文字まで

今回は、固定ページのテンプレートとして作りました。
表示するカテゴリの設定は、プログラムのコードの中で指定します。

この部分が、カテゴリの指定部分です。
'category_name' => 'カテゴリ名'

表示の調整は、CSSを使って行ってください。
WordPressのテーマcocoonの場合は、クラス名post-dateが非表示になってしまいます。
そのため、post-date-newとクラス名を変えて影響を受けないようにしています。

<?php
/*
Template Name: 新着記事ページテンプレート
*/
get_header(); // ヘッダーの読み込み
?>




<!-- ここからページのコンテンツを記述します -->


<?php //固定ページ内容
get_template_part('tmp/page-contents'); ?>


<!-- 新着記事一覧　-->
<div class="new-post-list">
    <ul>
    <?php
    $args = array( 
        'numberposts' => '5', 
        'post_status' => 'publish',
        'category_name' => 'カテゴリ名'　
    );
    $recent_posts = wp_get_recent_posts( $args );
    foreach( $recent_posts as $recent ){
        $post_id = $recent['ID'];
        $post_title = $recent['post_title'];
        $post_url = get_permalink( $post_id );
        $post_date = get_the_date( 'Y年m月d日', $post_id );
        $post_thumbnail = get_the_post_thumbnail( $post_id, 'full' );


        echo '<li>';
        echo '<div class="new-post-info">';
        printf( '<div class="post-date-new">%s</div>', esc_html( "最新記事・" . $post_date ) ); // ← 投稿日を表示
        printf( '<h2 class="post-title"><a href="%1$s">%2$s</a></h2>',
            esc_url( $post_url ),
            esc_html( $post_title )
        );
    

        if ( $post_thumbnail ) {
            echo '<div class="post-thumbnail">' . $post_thumbnail . '</div>';
        }
       

        
        echo get_the_excerpt( $recent["ID"] ); //記事の概要表示
        printf( '<p><a href="%1$s">%2$s</a></p>',
            esc_url( $post_url ),
            esc_html( "続きを読む" )
        ); 
        echo '<br>';    
        echo '</div>';
        echo '</li>';
    }
    ?>
    </ul>
</div>