WordPressの記事一覧ページを自作する方法

WordPressのテーマを自作する場合や、テーマのカスタマイズを行う場合に記事一覧画面を作らなければならないケースはよくあります。

一度慣れてしまえば難しくないのですが、慣れるまではサンプルコードを見ながら試行錯誤の繰り返しです。

この記事では、WordPressのテーマを編集して記事一覧を表示する方法と、サンプルコードをご紹介しています。

メインループとサブループ

まず、WordPressにはメインループとサブループの2種類があることを覚えておきましょう。

いきなりループって何？と思うかもしれませんが、WordPressで記事一覧を表示する場合には、1記事ずつデータを出力するため、表示件数分だけループを回して複数の記事を表示するような仕組みになっています。

例えば、表示件数が10件に設定されていると10回ループを回すことで記事一覧が表示されるということになります。

では、メインループとサブループにはどのような違いがあるのかご説明します。

メインループ

メインループとは、自分で指定しなくてもWordPress側が条件を指定してくれるループのことです。

メインループは下記のようなページで使われます。

トップページ
投稿ページ
固定ページ
カテゴリページ
タグページ
アーカイブページ

今回ご紹介するコードは、メインループを使用して記事一覧を使用する方法です。

サブループ

サブループとは、自分でパラメータを指定することで、表示しているページによらず投稿タイプや記事数などを自分で指定して記事一覧を表示するループのことです。

関連記事を表示する場合などはサブループを使って表示するのが一般的な方法です。

メインループを使って記事一覧を表示するコード

今回ご紹介する方法で表示される記事一覧は下記のようになります。

PHPのサンプルコードは下記の通りです。記事一覧を表示したい場所に下記のコードを記述してください。

<?php

if( have_posts() ) :

while ( have_posts() ) : the_post();

<?php the_post_thumbnail(); ?>

</div>

</div>

</article>

</a>

<?php

endwhile;

endif;

CSSは下記の通りとなります。テーマによっては表示が崩れる場合があるので注意してください。

.postlist {

display: flex;

justify-content: flex-start;

align-items: center;

margin-bottom: 1em;

}

.postlist-image-wrap {

width: 100px;

height: 100px;

background: #e8e8e8;

}

.postlist img {

width: 100%;

height: 100%;

object-fit: cover;

}

.postlist-text-wrap {

margin-left: 1em;

}

.postlist-publish-date {

color: #666666;

font-size: 0.8em;

margin-bottom: 1em;

}

.postlist-title {

font-weight: bold;

}

ループ内で使用できる関数

the_title(): 投稿のタイトルを出力
the_permalink(): 投稿のURLを出力
the_time(): 投稿の公開日を出力。the_time('Y/m/d')のように出力形式を指定可能。
the_post_thumbnail(): 投稿のアイキャッチ画像を出力。the_post_thumbnail('large')のようにサイズ指定可能。
the_excerpt: 投稿の抜粋を出力（pタグ付き）
get_the_excerpt(): 投稿の抜粋を出力（pタグ無し）

メインループとサブループ

メインループ

サブループ

メインループを使って記事一覧を表示するコード

ループ内で使用できる関数

関連記事

人気の記事