WordPressで新着記事の表示【1】 ○件表示する方法

カスタマイズ
WordPressカテゴリー

トップページに設置することが多い『新着記事 ○件』といった形式の記事一覧の設定方法を解説していきいます。

もくじ

テンプレートタグ get posts を使う

トップページに新着記事を希望する件数(5件、10件など)表示する方法をご紹介します。
具体的なソース例は テンプレートタグ/get posts WordPress Codex 日本語版 で紹介されています。

今回ベースとなるコード:最近の投稿をタイトル順に並べる(引用)

アルファベット順に昇順で最近の 10 件を表示するには、以下のコードで投稿日、タイトル、抜粋を表示します。
※見やすいように一部改行しています。

<?php
$args = array(
        'posts_per_page' => 10,
        'order'          => 'ASC',
        'orderby'        => 'title'
        );
$postslist = get_posts( $args );
foreach ( $postslist as $post ) :
  setup_postdata( $post ); ?> 
	<div>
		<?php the_date(); ?>
		<br />
		<?php the_title(); ?>   
		<?php the_excerpt(); ?>
	</div>
<?php
endforeach; 
wp_reset_postdata();
?>

それではこのコードをカスタマイズして、『新着記事を5件表示』する形式にしてみましょう。

ステップ1:最近の投稿を日付順にする

日付順に表示するには orderby の値を変更します。 'title'から'date' に変えます。

$args = array(
        'posts_per_page' => 10,
        'order'          => 'ASC',
        'orderby'        => 'date'
        );

ステップ2:表示件数を変える

表示件数を変えるには posts_per_page の数値を変更します。 5件表示にしたいので '10''5' に変えます。

$args = array(
        'posts_per_page' => 5,
        'order'          => 'ASC',
        'orderby'        => 'date'
        );

ステップ3:昇降順を変える

表示する順番を変えるのは order の値を変更します。
昇順(小さい値から大きい値)なら ASC 、降順(大きい値から小さい値)なら DESC とします。
今回は最新の日付から順番に表示したいので DESC とします。

$args = array(
        'posts_per_page' => 5,
        'order'          => 'DESC',
        'orderby'        => 'date'
        );

ステップ4:投稿へのリンクを設定する

タイトルを出力するthe_title() がループの中にあるので、the_permalink タグを利用しリンクに変更します。このタグは投稿のURLを出力します。
テンプレートタグ/the permalink【WordPress Codex 日本語版】

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

まとめ

変更点を反映させた『新着記事を5件表示』するコードはご覧のとおりです。

<?php
$args = array(
        'posts_per_page' => 5,
        'order'          => 'DESC',
        'orderby'        => 'date'
        );
$postslist = get_posts( $args );
foreach ( $postslist as $post ) :
  setup_postdata( $post ); ?> 
	<div>
		<?php the_date(); ?>
		<br />
		<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>   
		<?php the_excerpt(); ?>
	</div>
<?php
endforeach; 
wp_reset_postdata();
?>