WordPressで記事一覧を表示させたい。全記事の一覧ページを作りたい。ページに数記事だけ表示させたい！
このような方向けの記事になります。
ループとは？
メインループとサブループを理解していないという方は「【WordPress】メインループとサブループの違いと使い分け【初心者向けに解説】」で解説していますので一読しておきましょう。
もくじ
WordPressのカスタマイズをしていて、記事一覧を表示させたいという方は参考にしてみてください。色々な表示の仕方を解説しますので汎用性高いですよ。
※本記事で解説しているコードは自由に使用してOKです。
全記事の一覧を表示させる【メインループを使用】
主に一覧ページである下記のテンプレートファイルで使用します。
- index.php
- archive.php
- category.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で別で作る必要があり「【コピペで実装】ページネーションの簡単な作り方【WordPress初心者向け】」で作り方を解説おりますので参考にしてみてください。
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記事だけ表示させる
- ②：特定のカテゴリーを3記事だけ表示させる
- ③：カスタム投稿タイプの記事を3記事表示させる
他にも色々なパターンがありますが、上記の表示方法をマスターすれば応用ができるので問題なしです。
①：最新記事を3記事だけ表示させる
ページの一部に最新記事を数記事表示させたいという際に使えるコードです。
最新記事を3記事表示<?php $args = array( 'post_type' => 'post', 'posts_per_page' => 3 // 3記事表示 ); $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();?>"> <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> </li> <?php endwhile; ?> </ul> <?php wp_reset_postdata(); endif; ?>
最新の3記事を表示するためのコードです。
記事のループに関しては、先ほど解説したので割愛します。
重要のなのは下記の部分です。
PHP<?php $args = array( 'post_type' => 'post', 'posts_per_page' => 3 // 3記事表示 ); $the_query = new WP_Query( $args ); if ( $the_query->have_posts() ) : ?>
上記のコードも詳しく覚える必要はないかなと思います。この形でテンプレ化されているので、数記事だけ表示させたい場合は上記のコードをペシって貼っておけばOKです。
ページ数を指定するだけで使いまわせます
先ほどのコードで重要なのは下記です。
PHP'post_type' => 'post', 'posts_per_page'=> '3', //記事数の指定（今回は3記事）
書き換える部分は上記です。
こちらで記事数の数を指定する事ができます。今回は3記事なので「3」という値をいれています。「post」という部分は変更しなくて大丈夫です。
②：特定のカテゴリーを3記事だけ表示させる
特定のカテゴリーを3記事表示させたい場合のコードです。
特定のカテゴリーを3記事表示<?php $args = array( 'post_type' => 'post', 'posts_per_page' => 3 // 3記事表示 'category_name' => 'blog' ); $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();?>"> <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> </li> <?php endwhile; ?> </ul> <?php wp_reset_postdata(); endif; ?>
カテゴリーを条件に加えるポイントは下記の部分です。
カテゴリーを絞るポイント$args = array( 'post_type' => 'post', 'posts_per_page' => 3 // 3記事表示 'category_name' => 'blog' );
上記の「category_name」という部分で「blog」を指定しています。
このようにする事がでカテゴリー「blog」の記事のみに絞って表示させる事ができます。
③：カスタム投稿タイプの記事を3記事表示させる
カスタム投稿タイプの投稿に絞って表示させるコードです。
カスタム投稿タイプの記事を表示<?php $args = array( 'post_type' => 'works', 'posts_per_page' => 3 // 3記事表示 ); $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();?>"> <article> <!-- アイキャッチ画像 --> <?php the_post_thumbnail(); ?> <div class="article_txt"> <div class="article_data"> <!-- 日付 --> <p class="days"><?php the_time("Y.m.j"); ?></p> </div> <!-- 記事のタイトル --> <h2><?php the_title();?></h2> </div> </article> </a> </li> <?php endwhile; ?> </ul> <?php wp_reset_postdata(); endif; ?>
カスタム投稿タイプ「works」 の記事を3記事表示させています。ポイントは下記の部分です。
PHP$args = array( 'post_type' => 'works', 'posts_per_page' => 3 // 3記事表示 );
「post_type」という部分に「works」というカスタム投稿タイプを指定する事で表示させる事ができます。デフォルトの投稿名は「post」です。
また「カスタム投稿タイプって何だ〜」という方は下記の記事で作り方などを解説しているので参考にしてみてください。
