プログラミング、気楽な生き方を中心に発信しています。
  • twitter
  • instagram
  • facebook

【WordPress】ループで記事一覧を表示する方法【数記事だけ表示も対応】

  • WordPressで記事一覧を表示させたい
  • 全記事の一覧ページを作りたい
  • ページに数記事だけ表示させたい!

こんな方向けの記事になります。

主にWordPressに用意されているループという処理を使って、記事を表示させていきます。最新記事のように全記事の一覧ページやトップページ数記事だけ新着記事を表示させたいという時に使う事ができます。

WordPressのカスタマイズをしていて、記事一覧を表示させたいという方は参考にしてみてください。

※僕が普段使用しているテンプレをベースに解説していきます。そのままコピペで使用する事もできますよっ

【WordPress】記事一覧を表示する方法【数記事だけの表示にも対応】

下記の順番で解説していきます。

  • 全記事の一覧を表示させる方法
  • トップページなどに数記事だけ表示させる方法

自分の必要な情報に合わせて、飛ばして読んでみてください。

全記事の一覧を表示させる方法

index.phpやarchive.phpで全記事の一覧を表示する場合などに使用します。

コードは下記の通りです。

全記事一覧
<!-- 記事一覧 --> <section class="main_post"> <div class="main_post_wrap"> <div class="main_post_container"> <div class="post_list"> <!-- ループ処理 --> <?php if (have_posts()) : while ( have_posts() ) : the_post(); ?> <article> <a href="<?php the_permalink() ?>" class="post_links"> <!-- アイキャッチ画像 --> <p class="post_thumb"><?php the_post_thumbnail($post->ID); ?></p> <div class="post_txt"> <div class="post_meta"> <!-- 日付 --> <p class="post_time"><?php the_time( get_option( 'date_format' ) ); ?></p> <!-- カテゴリー --> <p class="post_cat"><?php $cat = get_the_category(); echo $cat[0]->cat_name; ?></p> </div> <!-- 記事タイトル --> <h2 class="post_ttl"><?php the_title(); ?></h2> </div> </a> </article> <?php endwhile; endif; ?> </div> <!-- ページネーション --> <?php last_paging_nav(); ?> </div> <!-- サイトバー --> <?php get_sidebar(); ?> </div> </section>

上記が全記事の一覧を表示させるコードになります。「ページネーション」に関してはfunctions.phpで別で作る必要があるので別記事で解説しようと思います。

HTMLタグなどは自分のデザインに合わせて調整してみてください。その他のphpのコードに関してザックリと解説していきます。

ループ処理

ループ
<!-- ループ処理 --> <?php if (have_posts()) : while ( have_posts() ) : the_post(); ?> <!-- ここに記事のデザインを書く --> <?php endwhile; endif; ?>

WordPressで記事一覧を表示する時に使用するループという処理です。while文を使用して記事を繰り返し表示しているというイメージです。この書き方はテンプレ化されているので、このまま覚えておきましょう。

このwhile文の中に記事のデザインを作っていく感じです。

各テンプレートタグ

今回使用したテンプレートタグは下記です。

テンプレートタグ
<!-- 記事のURL --> <?php the_permalink() ?> <!-- アイキャッチ画像 --> <?php the_post_thumbnail($post->ID); ?> <!-- 日付 --> <?php the_time( get_option( 'date_format' ) ); ?> <!-- カテゴリー --> <?php $cat = get_the_category(); echo $cat[0]->cat_name; ?> <!-- 記事タイトル --> <?php the_title(); ?>

HTMLで記事一覧を作成して、各項目に上記のコードを差し込めば表示させる事ができます。

WordPressにはこのように便利なテンプレートタグが多いです。テンプレートタグに関しては下記の記事で詳しく解説いたしますのでどうぞ。

トップページなどに数記事だけ表示させる方法

トップページなど固定ページに数記事だけ記事を表示させたい場合の記事一覧の作り方を解説します。作り方は先ほどの全記事の一覧表示と考え方は同じです。

テンプレのコードは下記になります。

3記事表示
<!-- 3記事だけ表示する --> <?php $wp_query = new WP_Query(); $my_new_posts = array( 'post_type' => 'post', 'posts_per_page'=> '3', ); $wp_query->query( $my_new_posts ); if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post(); ?> <?php endwhile; endif; wp_reset_postdata(); ?> <section> <!-- 記事のループ --> <?php if(have_posts()):while(have_posts()):the_post(); ?> <a href="<?php the_permalink();?>"> <article> <!-- アイキャッチ画像 --> <?php the_post_thumbnail(); ?> <div class="article_txt"> <div class="article_data"> <!-- 日付 --> <p class="days"><?php the_time("Y.m.j"); ?></p> <!-- カテゴリー --> <p class="cat"><?php $cat = get_the_category(); echo $cat[0]->cat_name; ?></p> </div> <!-- 記事のタイトル --> <h2><?php the_title();?></h2> </div> </article> </a> <?php endwhile; endif; ?> </section>

最新の3記事を表示するためのコードです。
記事のループに関しては、先ほど解説したので割愛します。

重要のなのは下記の部分です。

PHP
<?php $wp_query = new WP_Query(); $my_new_posts = array( 'post_type' => 'post', 'posts_per_page'=> '3', ); $wp_query->query( $my_new_posts ); if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post(); ?> <?php endwhile; endif; wp_reset_postdata(); ?>

上記のコードも詳しく覚える必要はないかなと思います。この形でテンプレ化されているので、数記事だけ表示させたい場合は上記のコードをペシって貼っておけばOKです。

投稿タイプとページ数を指定する

先ほどのコードで重要なのは下記です。

PHP
'post_type' => 'post', //投稿タイプの指定(postでOK) 'posts_per_page'=> '3', //記事数の指定(今回は3記事)

書き換える部分は上記です。

投稿タイプはカスタム投稿タイプを使用している場合は、それに応じて指定しますが、普通に投稿ページをさせる場合はpostで大丈夫です。
後は記事数を指定するだけです。

色々な場面で使えると思いますので、忘れてしまった場合はまたこの記事を見にきてください。それでは。