WordPress 最近の投稿5件を取得して1件目だけ表示を変える

WordPressで最近の投稿5件をループで取得するときのやり方と、5件取得したうちの1番新しい最新記事1件目だけ表示を変えられるようにするやり方を試してみました。

最近の投稿5件をサイドに表示したり、ループの組み方を少し変えて最近の投稿の1件目だけ画像を大きくして新着記事として目立たせたりなどのコンテンツの見せ方ができます。

1. WordPressで最近の投稿5件を取得
- 1.1. 最近の投稿をサブループで取得
- 1.2. 投稿5件はposts_per_pageで取得している
2. 最近の投稿の1件目を新着記事として表示
- 2.1. 最近の投稿1件目は大きな画像を取得する
- 2.2. 新着記事としてNEWマークを表示
3. まとめ

WordPressで最近の投稿5件を取得

はじめにWordPressで最近の投稿5件を取得してサイトに表示するところまでやってみます。

使用するWordPressテーマではメインループを回して記事一覧を表示しているので、WordPressのサブループを使用して最近の投稿5件を取得します。

最近の投稿をサブループで取得

WordPressで最近の投稿を取得するループはWP_Queryのサブループを使います。

<?php
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 5,
    );
    $the_query = new WP_Query( $args );
    if ( $the_query->have_posts() ) :
?>
    <ul>
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
    </ul>
<?php endif; ?>

$argsの変数に配列で投稿記事を取得するための条件をWordPressのCodexで紹介されているWP_Queryパラメータを使用して作ります。

‘post_type’ => ‘post’,で投稿
‘posts_per_page’ => 5,で表示する件数

関数リファレンス/WP Query

そして$argsの配列に記述したパラメータをサブループに適用して、WP_Queryクラスを呼び出してクエリ情報を入手することでページに最近の投稿として表示させます。

whileで回してページに表示する最近の投稿5件はリンク付きの投稿タイトルをリスト形式で出力します。

サブループの記述をWordPressのテンプレートに記述して、最近の投稿を使用するWordPressテーマに表示してみました。

WordPressに最近の投稿が5件で表示してくれています。

投稿5件はposts_per_pageで取得している

WordPressで最近の投稿をサブループで取得して表示するときに、投稿件数を5件で取得しているのは、$argsの配列に条件を記述したposts_per_pageの記述です。

$args = array(
    'post_type' => 'post',
    'posts_per_page' => 5,
);

最新の記事として投稿5件だけを取得できればいいので１ページあたりの表示件数を指定するために’posts_per_page’ => 5,と記述するようにします。

今回は投稿5件を取得するようにしていますが、たとえばWordPressで最近の投稿を1件だけの最新の記事とか新着記事などの表示にしたいとなった場合、’posts_per_page’ => 1,に記述し直すことで、最新記事や新着記事として1件のみにすることも可能です。

最近の投稿の1件目を新着記事として表示

次は最近の投稿5件を取得したうちの1件目だけ、つまり最新記事5件から新着記事として1件だけ表示を変えることができるようにしてみます。

シンプルな例だとWordPressで最近の投稿の1件目だけアイキャッチ画像を大きな表示に変えるやり方が分かりやすいかと思います。

最近の投稿1件目は大きな画像を取得する

最近の投稿1件目の画像をmediumで大きめな表示に、残り4件をthumbnailのサイズにしてリスト形式で取得してWordPressテーマのサイドバーに表示します。

WP_Queryのサブループを使用します。

WordPressで最近の投稿1件目の表示を変えることができるサブループの書き方は以下のように記述します。

<ul>
<?php
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 5,
    );
    $my_query = new WP_Query( $args );
    if ( $my_query->have_posts() ):
?>

<?php while( $my_query->have_posts()): $my_query->the_post(); $counter++; ?>
<?php if ($counter <= 1): ?>
    <li>
    <?php the_post_thumbnail('medium'); ?>
        <div>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </div>
    </li>
<?php else:?>
    <li>
    <?php the_post_thumbnail('thumbnail'); ?>
        <div>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </div>
    </li>
<?php endif;?>
<?php endwhile; endif; ?>
<?php wp_reset_postdata(); ?>

whileで最近の投稿5件をループする記述のところから。ループの開始時に「$counter++;」でループの回数をカウントします。あんまり細かいことまで理解できていませんが++をすることで+1する処理をします。

次に最近の投稿の1件目をif文で「$counter <= 1」と記述することで$countが1以下のときに繰り返し処理を実行してくれます。

あとは最近の投稿1件目のときだけに出力する内容を記述します。上記の記述例では、最近の投稿1件目には大きな画像を表示して投稿タイトルも表示したいので、the_post_thumbnail()でmediumサイズ、the_title()で1件目の投稿タイトルを取得です。

最近の投稿1件目以外の最新の投稿のうち残りの投稿4件ではelseを使い最近の投稿の内容を出力します。the_post_thumbnail()で画像を小さめのthumbnailサイズにして取得してます。

これにより最近の投稿1件目の場合だけ大きな画像表示とリンク付き投稿タイトルを取得、それ以外の最近の投稿4件はthumbnailサイズの画像とリンク付きの投稿タイトルを取得するので、最近の投稿の1件目だけ画像の表示サイズを変える表示ができます。

新着記事としてNEWマークを表示

大きな画像で表示したWordPressの最近の投稿1件を新着記事としての表示にしたいと思います。見た目で分かりやすいようにNEWマークをCSSでデザインして表示します。

まずはWordPressに最近の投稿5件を取得するサブループの処理を全てdivの親要素で囲みます。

<div class="side_recently">
    <ul>
    <?php
        $args = array(
            'post_type' => 'post',
            'posts_per_page' => 5,
        );
        $my_query = new WP_Query( $args );
        if ( $my_query->have_posts() ):
    ?>

<?php while( $my_query->have_posts()): $my_query->the_post(); $counter++; ?>
<?php if ($counter <= 1): ?>
    <li>
    <?php the_post_thumbnail('medium'); ?>
        <div>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </div>
    </li>
<?php else:?>
    <li>
    <?php the_post_thumbnail('thumbnail'); ?>
        <div>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </div>
    </li>
<?php endif;?>
<?php endwhile; endif; ?>
<?php wp_reset_postdata(); ?>
</div>

<div class=”side_recently”></div>でWordPressのループ処理を囲んだだけです。このdivにはスタイル用のクラスを付与しておくことで、新着記事としてNEWマークを作るCSSを記述できます。

.side_recently li{
    list-style: none;
    position: relative;
    margin-bottom: 20px;
}
.side_recently li:nth-child(1)::before{
    content: "NEW";
    background-color: cadetblue;
    color: #ebe292;
    padding: 10px 20px;
    position: absolute;
}
.side_recently a{
    text-decoration: none;
    color: cadetblue;
}

WordPressの最近の投稿5件を取得するループ処理で出力するli要素内に画像と投稿タイトルを出力しているので、CSSで親要素にしたdivとli、そしてnth-child(1)と::beforeを使用する事で最近の投稿1件目にNEWマークが表示できます。

CSSの擬似クラスnth-child系の使い方を覚える

WP_Queryのサブループを普通に回した場合でも、先ほどと同じCSSで新着記事としてNEWマークの表示はできます。

<div class="side_recently">
    <ul>
    <?php
        $args = array(
            'post_type' => 'post',
            'posts_per_page' => 5,
        );
        $my_query = new WP_Query( $args );
        if ( $my_query->have_posts() ):
    ?>

<?php while( $my_query->have_posts()): $my_query->the_post(); ?>
    <li class="side_list">
    <?php the_post_thumbnail('medium'); ?>
        <div>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </div>
    </li>
<?php endwhile; endif; ?>
<?php wp_reset_postdata(); ?>
</div>

PHPのwhileで取得するWordPressの投稿情報は同じタグの要素でマークアップされるはずなので、CSSのセレクタをマークアップしてるタグに置き換えて、nth-child(1)で最近の投稿1件目だけを拾ってスタイルを適用するだけのやり方でNEWマークを反映することができます。