初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ
WordPress

【WordPress】固定ページで投稿一覧情報を取得し表示させる方法【新着記事一覧】

【WordPress】新着記事一覧 トップや固定ページに投稿の一覧を出力しよう!

アーカイブページ(archive.phpなど)やトップページ(home.phpなど)は、あらかじめ決められた投稿データ一覧の情報を持っています。

えふぃ

なのでアーカイブページやトップページは特に何もせずともhave_posts()を使ったループで投稿の一覧情報を出力できます!

それに対し固定ページは、自身の情報を持っているだけで、他の投稿情報を保有していません。

でもご安心を!

一手間加えて、投稿の一覧情報を取得することで、アーカイブページと同じように固定ページでも一覧を出力することができるようになります!

固定ページで投稿一覧の情報を取得する方法

固定ページでの投稿一覧取得は、まず投稿一覧を入れたい場所に以下をコピペします。

<?php
    $args = array(
        'post_type' => "post", // 取得する投稿タイプ
        'category_name' => 'news', // 取得するカテゴリー
        'posts_per_page' => 5, // 表示する記事件数
    );

    $the_query = new WP_Query($args);
?>

さて、それでは見ていきましょう!

まずは取得したい投稿の情報を$argsという変数に格納しています。

まだこれで情報を取得したわけではなく、投稿一覧を取得してもらうための情報を$argsにまとめている状態です。

えふぃ

有給休暇を取るために、休暇申請書を作成しているといった感じですね!

上のサンプルコードでは「newsカテゴリーの投稿を5件」と書かれています。

そして$the_queryという変数に、new WP_Query($args)と入れることで、$the_queryに投稿の一覧情報が格納されます。

えふぃ

特に$the_queryという変数名に決まりはありませんが、この変数名がわりと使われています。あとは$my_queryとかですね!

$argsの部分が重要になってくるので、ここをもう少し見てみましょう!

$argsに入れる情報

$argsは、投稿一覧情報をもらうための申請書のようなものです。

ここをしっかり書かないと、欲しい情報を手に入れることができません。

<?php
    $args = array(
        'post_type' => "post", // 取得する投稿タイプ
        'category_name' => 'news', // 取得するカテゴリー
        'posts_per_page' => 5, // 表示する記事件数
    );

    $the_query = new WP_Query($args);
?>

ここでは

  • post_type(投稿タイプ)
  • category_name(カテゴリー)
  • post_per_page(1ページにつき取得する件数)

の3つの情報を指定しています。

情報にはもっといろんな種類があります。

逆に全カテゴリー欲しい場合はcategory_nameの行を削除すればOKというわけなのです。

post_type

取得する投稿タイプを選択する部分です。
通常の投稿一覧であればpostのままでOK

カスタム投稿の情報を取得したい場合はカスタム投稿の名前を入れます。

category_name

設定した投稿タイプの中から、特定のカテゴリのみ取得する場合に使います。

例えば「新着記事一覧」ではなく「お知らせ一覧」としたい場合、お知らせカテゴリーのスラッグ名を入れてあげることで、お知らせだけを取得することができます。

posts_per_page

この方法で投稿情報を取得した場合、取得する投稿の件数を設定することができます。

5にすれば5件取得され、10にすれば10件取得されます。

投稿情報を出力する

通常の一覧表示とやり方はほとんど同じです。
have_posts()」の部分が「$the_query->have_posts()」に
the_post()」の部分が「$the_query->the_post()」に変わるだけです。

「have_posts()」や「the_post()」は、そのページが既に保有している情報に対して行う処理です。
「$the_query->」をつけることで、新しく取得した情報が格納された$the_queryに対して処理を行うようになります。

サンプルコード

日付とタイトルの一覧を出力し、タイトル部分に投稿ページへのリンクを貼っています。

<?php if ($the_query->have_posts()): ?>
<ul>
    <?php while($the_query->have_posts()): $the_query->the_post(); ?>
    <li>
        <?php the_time('Y.m.d'); ?><br>
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </li>
    <?php endwhile; ?>
</ul>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

まとめると

こーんな感じになります。
このままコピペして使うとダサシンプルな一覧が出力されるはずです。

<?php
    // 投稿一覧情報の取得
    $args = array(
        'post_type' => "post", // 取得する投稿タイプ
        //'category_name' => 'news', // 取得するカテゴリー
        'posts_per_page' => 5, // 表示する記事件数
        'orderby'=>'post_date', // 投稿日順に並べる
        'order'=>'DESC' // 新着順に並べる
    );

    $the_query = new WP_Query($args);
?>
<?php if ($the_query->have_posts()): ?>
<ul>
    <?php while($the_query->have_posts()): $the_query->the_post(); ?>
    <li>
        <?php the_time('Y.m.d'); ?><br>
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </li>
    <?php endwhile; ?>
</ul>
<?php endif; ?>
<?php wp_reset_postdata(); ?>