【WordPress】最新記事を大きく表示し、他の記事も一覧表示する方法

シュウ

今回は【WordPress】カテゴリー別に最新記事を大きく表示し、他の記事も一覧表示する方法についての解説になります！

こんな方に読んでほしい

WordPressを学び始めた方へ
WordPressで記事をカテゴリーごとに分けて表示するニーズについて解説へ
最新記事を目立たせつつ、他の記事も見やすく表示したいケースを紹介。

[記事の内容]

最新記事を大きく表示し、他の記事も一覧表示する方法

今回は「新記事を大きく表示し、他の記事も一覧表示する方法」について解説していきます。
主に、ブログやコラムで使用することが多い技術になります。
イメージは以下のようになります。

カテゴリー毎に条件分岐をし表示させております。
注目記事を目立たせつつ一覧も表示できるメリットもあり、初心者でもカスタマイズしやすいです。
コードは以下になります。

<?php
$recent_id = 0;
$target_category_slug = 'xxxx';

$recent_posts = get_posts(array(
    'posts_per_page' => 1,
    'category_name'  => $target_category_slug
));

if ($recent_posts) {
    echo '<ul class="articles-main">';
    foreach ($recent_posts as $post) {
        setup_postdata($post);
        $recent_id = $post->ID;
        ?>
        <li>
            最初の大きい記事
        </li>
        <?php
    }
    echo '</ul>';
    wp_reset_postdata();
}

$the_query = new WP_Query(array(
    'post__not_in' => array($recent_id),
    'posts_per_page' => 3,
    'category_name'  => $target_category_slug
));

if ($the_query->have_posts()) {
    echo '<ul class="articles-child">';
    while ($the_query->have_posts()) {
        $the_query->the_post();
        ?>
        <li>
            2件目以降記事
        </li>
        <?php
    }
    echo '</ul>';
}
wp_reset_postdata();
?>
</div>

●1：最初にスラッグを指定します: ・$target_category_slug = 'xxxx'には、スラッグを指定します。
例：カテゴリーが「HTML」の場合は「html」と指定します。
例：カテゴリーが「CSS」の場合は「css」と指定します。

●2：最新記事を取得します: ・get_posts()で、posts_per_pageを「1」に指定します。
・最新記事が取得できたら、ul class="articles-main"〜/ulで囲みリスト表示されます。
・記事の内容はli〜/liの中に記述してください。
・wp_reset_postdata()でグローバルな投稿データをリセットし、他のクエリに影響を与えないようにします。

●3：件目以降の記事を別クエリで取得・表示します: ・先ほど取得した最新記事$recent_idを除外します。
・posts_per_pageで同じカテゴリーからさらに3件取得します。

●4：2件目以降の記事があればリスト表示します: ・投稿があればul class="articles-child"〜/ulで囲みリスト表示されます。
・記事の内容はli〜/liの中に記述してください。
・最後にwp_reset_postdata()でクエリのリセットをしています。

カスタム投稿タイプの場合

上記のコードは投稿タイプでしたが、カスタム投稿タイプの場合についても簡単に解説します。
コードは以下になります。

<?php
$recent_id = 0;
$target_category_slug = 'css'; // ここを取得したいカテゴリーのスラッグに変更
$target_post_type = 'web';      // ここをカスタム投稿タイプ名に変更

// 最新1件の記事取得（メイン記事）
$recent_posts = get_posts(array(
    'posts_per_page' => 1,
    'category_name'  => $target_category_slug,
    'post_type'      => $target_post_type,
));

if ($recent_posts) {
    echo '<ul class="articles-main">';
    foreach ($recent_posts as $post) {
        setup_postdata($post);
        $recent_id = $post->ID;
        ?>
        <li>
            カスタム投稿(web)のカテゴリー「css」の記事1件目が表示
        </li>
        <?php
    }
    echo '</ul>';
    wp_reset_postdata();
}

// 最新記事を除いた次の3件取得（サブ記事）
$the_query = new WP_Query(array(
    'post__not_in'   => array($recent_id),
    'posts_per_page' => 3,
    'category_name'  => $target_category_slug,
    'post_type'      => $target_post_type,
));

if ($the_query->have_posts()) {
    echo '<ul class="articles-child">';
    while ($the_query->have_posts()) {
        $the_query->the_post();
        ?>
        <li>
            カスタム投稿(web)のカテゴリー「css」の記事2件目以降が表示
        </li>
        <?php
    }
    echo '</ul>';
}
wp_reset_postdata();
?>
</div>