WordPress

WordPressで投稿・記事一覧を表示する方法（固定ページについても）

Q: 気を付けることは？

動かない場合は、まずカンマ（,）の記述が抜けたり、不要な箇所に書かれていないかを確認すると良いでしょう。例えばarrayの中の最後の部分にもカンマ（,）がついてないか、relationで複数のタクソノミー、タームを指定する場合にarrayをカンマ（,）で繋いでいるかなど、間違いやすいところだと思います。

最終更新日：: 2023/03/31

WordPressで投稿一覧を表示する方法を投稿のアーカイブページと固定ページそれぞれについてご紹介します。

投稿・記事一覧とは？

投稿・記事一覧と呼んでいるのは、WordPressの投稿の機能、またはカスタム投稿タイプの機能を用いて作成された投稿のことです。「ブログ／コラム」、「お知らせ」、「お客様の声」などをコーディングせずに簡単に作成していけるものです。

投稿のアーカイブページの場合

まずは以下のアーカイブページの場合についてです。

archive.php
taxonomy.php

アーカイブページは、そのページが表示されている時点で、どの投稿タイプで、どのターム（カテゴリー）か、ということが把握できているので、そのタームの一覧をそのまま表示で良い場合はhave_postsの関数を用いて次のような記述で出力可能です。

参考：関数リファレンス/have posts

<?php
if ( have_posts() ) :?>
<div>
   <?php the_posts_pagination(
   array(
      'end_size'  => '1', // ページ番号リストの両端に表示するページ数
      'mid_size'  => '2', // 現在ページの左右に表示するページ番号の数
      'prev_next' => true, // 「前へ」「次へ」のリンクを表示する場合はtrue
      'prev_text' =>  '<',  // 「前へ」の文言変更
      'next_text' =>  '>',  // 「次へ」の文言変更
      'type'      => 'list' // 戻り値の指定 (plain/list)
   )
   ); ?>
</div>
<ul>
   <?php while ( have_posts() ):
       the_post(); ?>
   <li>
      <a href="<?php echo get_permalink(); ?>">
         <div>
            <div>
               <?php if (has_post_thumbnail()) : ?>
                  <?php the_post_thumbnail(array(250,0)); ?>
               <?php else: ?>
                  <img src="<?php echo get_template_directory_uri(); ?>/images/xxx.webp";?>" alt="">
               <?php endif; ?>
            </div>
            <div>
               <h3><?php the_title(); ?></h3>
               <p><?php the_excerpt(); ?></p>
            </div>
         </div>
      </a>
   </li>
   <?php endwhile; ?>
</ul>
<div>
   <?php the_posts_pagination(
   array(
      'end_size'  => '1', // ページ番号リストの両端に表示するページ数
      'mid_size'  => '2', // 現在ページの左右に表示するページ番号の数
      'prev_next' => true, // 「前へ」「次へ」のリンクを表示する場合はtrue
      'prev_text' =>  '<',  // 「前へ」の文言変更
      'next_text' =>  '>',  // 「次へ」の文言変更
      'type'      => 'list' // 戻り値の指定 (plain/list)
   )
   ); ?>
</div>
<?php endif; ?>

これだと行数が多くなるので、慣れてきたら次のように行数を少なくできるところはそうした方が私の場合はコードを読みやすくなります。私のコピペ用。

<?php if(have_posts()):
<ul>
while(have_posts()):the_post(); ?>
//記述
<?php endwhile; ?>
</ul>
endif; ?>

ここではついでに、以下の関数を用いて出力しています。
この後は投稿タイトルのみの出力とし、他は省略します。

ページャー	the_posts_pagination
アイキャッチ画像	the post thumbnail
投稿のタイトル	the_title
投稿の本文抜粋	the_excerpt

固定ページの場合

固定ページの場合は、WP Queryという関数を使うと「投稿タイプ」「タクソノミー」「ターム」を指定して投稿データを表示することができます。

参照：関数リファレンス/WP Query

投稿タイプのみ指定する場合

post_typeで、通常の投稿であればpostを指定、カスタム投稿タイプであればカスタム投稿タイプ名を指定します。wp_reset_postdata();の記述によって取得した情報をリセットします。これをしていないと他の個所に影響が出るリスクがあるので、忘れないようにしましょう。

また、ページャー（ページ送り）の表示方法も、投稿ページと固定ページでは異なります。

<?php
$args = array(
      'posts_per_page' => 10, // 表示する投稿数
      'paged' => $paged, //ページングを表示する場合
      'post_type' => 'blog', // 取得する投稿タイプのスラッグ
      'orderby' => 'date',
      'order' => 'DESC' // 降順 or 昇順
      );
$the_query = new WP_Query($args);
if ($the_query->have_posts()) : ?>
<div>
   <?php
   if ($the_query->max_num_pages > 1):
      echo paginate_links(array(
         'base'      => get_pagenum_link(1) . '%_%',
         'format'    => 'page/%#%/',
         'current'   => max(1, $paged),
         'total'     => $the_query->max_num_pages,
         'end_size'  => '1', // ページ番号リストの両端に表示するページ数
         'mid_size'  => '2', // 現在ページの左右に表示するページ番号の数
         'prev_next' => true, // 「前へ」「次へ」のリンクを表示する場合はtrue
         'prev_text' =>  '<',  // 「前へ」の文言変更
         'next_text' =>  '>',  // 「次へ」の文言変更
         'type'      => 'list' // 戻り値の指定 (plain/list)
      ));
   endif;
   ?>
</div>
<ul>
   <?php while ($the_query->have_posts()):
     $the_query->the_post(); ?> 
   <li>
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
   </li>
<?php endwhile; ?>
</ul>
<div>
   <?php
   if ($the_query->max_num_pages > 1) :
      echo paginate_links(array(
         'base'      => get_pagenum_link(1) . '%_%',
         'format'    => 'page/%#%/',
         'current'   => max(1, $paged),
         'total'     => $the_query->max_num_pages,
         'end_size'  => '1', // ページ番号リストの両端に表示するページ数
         'mid_size'  => '2', // 現在ページの左右に表示するページ番号の数
         'prev_next' => true, // 「前へ」「次へ」のリンクを表示する場合はtrue
         'prev_text' =>  '<',  // 「前へ」の文言変更
         'next_text' =>  '>',  // 「次へ」の文言変更
         'type'      => 'list' // 戻り値の指定 (plain/list)
      ));
   endif;
   ?>
</div>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

タクソノミー、タームで絞り込んで表示する場合

上記の記述の場合、指定した投稿タイプの投稿を全て表示しますが、タクソノミー、タームを絞り込んで表示したい場合はtax_queryを利用して次のように記述します。

タクソノミー、タームについてはこちらの記事で解説しています。
カテゴリー、タグ、タクソノミー、タームの違いについてどこよりも分かりやすい解説を試みる

<?php
$args = array(
      'posts_per_page' => 10, // 表示する投稿数
      'paged' => $paged, //ページングを表示する場合
      'post_type' => 'blog', // 取得する投稿タイプのスラッグ
      'orderby' => 'date',
      'order' => 'DESC', // 降順 or 昇順
      'tax_query' => array(
         array(
             'taxonomy' => 'blog_cat', //タクソノミー名
             'field' => 'slug',
             'terms' => 'seo' //ターム名
             )
         )
      );
$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; ?>
</ul>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

複数のタクソノミー、タームで絞り込んで表示する場合

複数のタクソノミー、タームで絞り込んで表示する場合は、relationを使います。
ORかANDかを指定できるので、両方表示したい場合はORを、両方に当てはまる場合にだけ表示したい場合はANDを指定します。

<?php
$args = array(
      'posts_per_page' => 10, // 表示する投稿数
      'paged' => $paged, //ページングを表示する場合
      'post_type' => 'blog', // 取得する投稿タイプのスラッグ
      'orderby' => 'date',
      'order' => 'DESC', // 降順 or 昇順
      'tax_query' => array(
         'relation' => 'OR', // 'OR'か'AND'を指定
         array(
             'taxonomy' => 'blog_cat', //タクソノミー名
             'field' => 'slug',
             'terms' => 'seo' //ターム名
              ),
         array(
            'taxonomy' => 'blog_cat', //タクソノミー名
            'field' => 'slug',
            'terms' => 'wordress' //ターム名
            )
         )
      );
$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 endif; ?>
<?php wp_reset_postdata(); ?>
</ul>

間違いやすい記述

動かない場合は、まずカンマ（,）の記述が抜けたり、不要な箇所に書かれていないかを確認すると良いでしょう。例えばarrayの中の最後の部分にもカンマ（,）がついてないか、relationで複数のタクソノミー、タームを指定する場合にarrayをカンマ（,）で繋いでいるかなど、間違いやすいところだと思います。

まとめ

WordPressで投稿を表示する方法でした。
WordPressを使ったサイト構築でSEOに力を入れたい方、有効なオウンドメディアを構築したい方、ぜひご相談ください！

SEOチェックシート
ダウンロード無料相談

株式会社BringFlower
稲田高洋（Takahiro Inada）

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010～2018年に人間中心設計専門家を保有、数年間ウェブアクセシビリティ基盤委員も務める。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。
2022年3月に独立後、2024年4月に株式会社BringFlowerを設立。SEOコンサルを活動の軸に据えつつ、AIライティングツールの開発と運営を自ら行う。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。
プロフィール詳細

ノウハウ一覧