WordPressでサイトを構築するとき、トップページに「新着の記事5件」をダイジェスト表示するようにしたいことがあります。
TwentyFourteenなどデフォルトのテーマでは、サイトのトップページはブログ記事を新しい順に表示していますが、1ページに収まるようなダイジェスト表示にはなっておらずトップページ向けではありません。
そこで、トップページ専用のテンプレートファイル”front-page.php”を使って、サイトトップページに新着5件のダイジェスト記事(サマリー記事)を表示する方法を紹介します。
さらに、投稿記事だけでなくカスタム投稿タイプの新着記事も対象になるようにしたいという、アカリのWEB CAFEのアカリさんの要望に応えて、
「カスタム投稿タイプと、ブログ記事(投稿)の両方を対象に、新着5件をダイジェスト表示する」
方法をご紹介します。
トップページに最新の記事5件を表示する、っていうことをしたいけれど、カスタム投稿も普通の投稿もどっちも出したいし、出したやつにどの内容の記事かマーク的なものをつけたいけど、どうしたらいいかさっぱりわからない。
— アカリ (@kokona_san) 2014, 7月 16
前提として、一般投稿記事の他に「animal(日本語タイトルは動物)」というカスタム投稿タイプを既に作っていることとします。
WordPressでのトップページ表示の完成形はこのようになります。
これを実現するコードはこちら。front-page.phpに書きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php $args = array( 'posts_per_page' => 5, // 5件取得 'post_type' => array ( 'post', 'animal') // 普通の投稿とカスタム投稿タイプ'animal'の記事を取得 ); $myposts = get_posts( $args ); // get_postsで記事を取得する foreach ( $myposts as $post ) : // ループ開始 setup_postdata( $post ); // おまじない ?> <span class="posttype"> <?php echo get_post_type( $post ); // 投稿タイプ名を表示する(post or aminal) ?> </span> <h3> <a href="<?php the_permalink(); // 投稿へのリンクを出力する ?>"> <?php the_title(); // 記事のタイトルを表示する ?> </a> </h3> <?php the_excerpt(); // 記事の抜粋を表示する ?> <?php endforeach; wp_reset_postdata(); // おまじない ?> |
このコード中に使われているget_posts()関数などの細かい解説は以下のスライドで紹介しています。あわせてご覧ください。
