0から始めるWordPress自作テーマ【記事一覧の表示方法編】最新記事一覧をトップページに表示させてみよう

WEBサイトのTOPページなどによるある、新着記事の一覧。

この記事の一覧をWordPressを使って表示させる方法を今回はご紹介していきます。

WordPressのテーマを自作されている場合でも、よく使う場面がありますので、参考になれば幸いです。

では、さっそくご紹介していきましょう。

これまでの関連記事はこちらから読めます

0から始めるWordPress自作テーマ作成【お問合せフォーム作成編】

0から始めるWordPress自作テーマ作成【投稿ページ作成編】

0から始めるWordPress自作テーマ作成【固定ページ作成編】

0から始めるWordPress自作テーマ作成【TOPページの表示とテンプレートタグ編】

0から始めるWordPress自作テーマ作成【footer.php作成編】

0から始めるWordPress自作テーマ作成【header.php作成編】

特定の固定ページの内容を取得して表示させる方法【WordPress】

WordPressのループ機能を使って最新の記事一覧を表示させます

最新記事の一覧を表示させるには、ループと呼ばれるコードを使い、記事の見出しや日付、サムネイルなどを取得して、トップページに取得した情報を出力していきます。

ループとは？

ループとは、WordPressのデータベースから情報を抽出して出力できる機能になり、管理画面から記事を作成すると、データベースにも作成した記事のデータがたまります。
この情報をループで呼び出し、必要な情報を出力できる機能で、メインループやサブループと、いくつか種類があります。

サブループにはget_postsや、wp_queryなどといったものもあります。

トップページのテンプレートにループを記述します

今回は最新の記事一覧をトップページに表示させたいので、トップページに使われているテンプレートファイルを用意します。

用意ができたら、以下のループを記述します。

今回は細かい条件などを設定できるwp_queryを使って進めていきます。

<ul>
  <?php
    $args = array(
      'post_type' =>'post',
  //投稿タイプを選びます
      'category' =>'news',
  //カテゴリーを選択して出力が出来ます
      'posts_per_page' => 5
 //投稿件数を設定ができます
     );
    $the_query = new WP_Query( $args );
      if ( $the_query->have_posts() ) :
        while ( $the_query->have_posts() ) :
          $the_query->the_post();
   ?>
   <li>
     <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
   </li>
   <?php endwhile; else: ?>
   <li>まだ記事はありません。</li>
   <?php  endif; wp_reset_postdata(); ?>
</ul>

特定のカテゴリーや投稿の順序など、条件を選択して表示する事も可能です

wp_queryでは、特定のカテゴリーのみを表示させたり、投稿した順序を昇順・降順と設定したり、その他にも細かい設定も可能です。

post_typeは、投稿のタイプを設定します。今回はデフォルトの投稿タイプなので、postと記述して設定します。カスタム投稿の場合は、任意の投稿名を設定してきます。

'post_type' =>'post',  //  デフォルトの投稿の場合はpost
'post_type' =>'menu',  //  カスタム投稿の場合は任意の名前を設定

また先程紹介したコードでは、投稿件数を5件としていましたが、投稿した件数を全て表示させる場合は「-1」と入力すると、全て表示されます。

その他にも、細かい設定ができるパラーメーターは多数ありますが、今回はまず、表示させる事を目的としていますので、次回にご紹介できればと思います。

まとめ

WordPressのループ機能を使って、トップページに最新の記事一覧を表示させる方法をご紹介させて頂きましたが、いかがだったでしょうか？

この機能の使い方を覚えると任意のページや任意の場所で記事の呼び出しが可能になるので、是非使ってみましょう。

関連記事：特定の固定ページの内容を取得して表示させる方法【WordPress】