【WordPress】自作テーマで記事一覧ページを作成する【ループの解説・コピペOK】

過去の記事で、テーマを自作する場合のトップページ作成手順を簡単に説明しています。
本記事ではその延長として、ブログ記事の一覧ページを作成する手順を書いていこうと思います。

やりたいこと

トップページは記事一覧を表示せず、通常のWebサイトのような扱いに。
/blog/にアクセスすると記事一覧が表示されるようにしたい。

まずは固定ページを作成
WordPressの表示設定を確認
テンプレートの作成
1. テンプレートの優先順位について
2. ループで投稿を一覧表示させる
最後に

まずは固定ページを作成

この固定ページはあくまでも側で、ここに書いた内容は何も表示されないのでタイトル以外は空欄でOKです。ページの内容は後ほど作成していきます。

トップページ用の固定ページ

WordPressの管理画面から固定ページ＞新規追加を選択。タイトルは「トップページ」にしておき、公開します。

記事一覧用の固定ページ

新規追加でタイトルは「記事一覧」にしておきます。
今回はurlをhttps://〇〇/blog/としたいので、パーマリンクのURLスラッグには blog と入力し、公開します。

WordPressの表示設定を確認

管理画面で設定＞表示設定を選択。ホームページの表示の「固定ページ」のラジオボタンに●を入れます。

ホームページ → 先ほど作った「トップページ」を選択
投稿ページ → 先ほど作った「記事一覧」を選択

この設定で変更を保存します。

テンプレートの作成

テンプレートの優先順位について

上記の表示設定を行なった場合に使用されるテンプレートの優先順位は以下です。なのでこのルールに沿ってテンプレートファイルの命名を行います。

ホームページ（トップページ）
: カスタムテンプレートファイル＞ front-page.php ＞ page-{slug}.php ＞ page-{id}.php ＞ page.php ＞ singular.php ＞ index.php
投稿ページ（記事一覧）: home.php ＞ index.php

カスタムテンプレートファイルとは、固定ページ作成画面で選択したテンプレートのことを指し、優先順位がいちばん高くなります。

ちなみにカスタムテンプレートとして使いたい場合は、ファイル冒頭に以下の記述が必要です。これがないと作成画面に出てこないので注意。

<?php
/*
Template Name: トップページ
*/
?>

ループで投稿を一覧表示させる

ループとはWordPressで投稿を表示させる為のphpコードで、繰り返し処理が行われることを指します。投稿に関するいろいろな場面で使用されますが、記事一覧ページでもこのループを使って投稿の内容が出力されるようにしていきます。

ループの例

<?php if(have_posts()): while(have_posts()):the_post(); ?>
<div <?php post_class("post-wrap"); ?>>
	<div class="post-category"><?php if(has_category()): echo get_the_category_list(' '); endif; ?></div>
	<a href="<?php the_permalink(); ?>">
		<div class="post-thumbnail">
			<img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?php echo get_the_title(); ?>">
		</div>
		<div class="post-date">
			<span class="post-date-write"><?php the_time("Y/m/j") ?></span>
			<?php if(get_the_modified_time('Ymd') != get_the_time('Ymd')){echo '<span class="post-date-modified"><time>'.get_the_modified_time('Y/m/d').'</time></span>';}?>
		</div>
		<h3 class="post-title"><?php the_title(); ?></h3>
		<p class="post-excerpt">
			<?php
			if(mb_strlen(get_the_excerpt())>50){
				$excerpt= mb_substr(get_the_excerpt(), 0, 50);
				echo $excerpt.'...';
			}else{
				echo get_the_excerpt();
			}
			?>
		</p>
	</a>
</div>
<?php endwhile; else: ?>
<div class="post-wrap"><p>記事が見つかりません</p>	</div>
<?php endif; ?>

試しにこちらを作成した記事一覧ページのテンプレートの良き所にコピペしてみてください。投稿されている記事が一覧表示されると思うので、是非ソースを確認してみてください。どのようにhtmlが出力されているかわかりやすいと思います。

以下でざっくり説明します。

投稿の取得

上のループの例で言うと投稿があれば例の2〜24行目の内容、なければ26行目の内容を出力します。

<?php if(have_posts()): while(have_posts()):the_post(); ?>
投稿がある場合の内容。while文を使って繰り返し出力してる。
<?php endwhile; else: ?>
投稿がない場合の内容。繰り返さない。
<?php endif; ?>

クラス名の取得、追加

投稿のcssクラス名を取得します。スタイル調整の時に便利。
また”post-wrap”のように使うとクラスの付与もできます。

<?php post_class("post-wrap"); ?>

カテゴリの取得

has_category()で投稿が持つカテゴリをチェック、echoでget_the_category_list(‘ ‘);を出力。

<?php if(has_category()): echo get_the_category_list(' '); endif; ?>

パーマリンクのURL取得

ループ内で使うことでその投稿のパーマリンクURLを取得。

<?php the_permalink(); ?>

サムネイルの取得

サムネイルを取得。画像urlとaltだけ取得したかったのでこのように記述しています。

<img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?php echo get_the_title(); ?>">

公開日・更新日

公開日と更新日の取得。更新日が公開日と異なる場合だけ表示させています。

<div class="post-date">
	<span class="post-date-write"><?php the_time("Y/m/j") ?></span>
	<?php if(get_the_modified_time('Ymd') != get_the_time('Ymd')){echo '<span class="post-date-modified"><time>'.get_the_modified_time('Y/m/d').'</time></span>';}?>
</div>

タイトル・抜粋の取得

the_title();で投稿のタイトルを取得。抜粋（get_the_excerpt()）をmb_substr()関数で文字数を50に制限して出力しています。文字数が50を超えない場合は末尾に「…」を付けません。

<h3 class="post-title"><?php the_title(); ?></h3>
<p class="post-excerpt">
	<?php
	if(mb_strlen(get_the_excerpt())>50){//抜粋の文字数が50を超えた場合
		$excerpt= mb_substr(get_the_excerpt(), 0, 50);
		echo $excerpt.'...';
	}else{//50を超えない場合
		echo get_the_excerpt();
	}
	?>
</p>

最後に

ループ処理がうまくいってるのを確認できたら、cssでレイアウト整えていって完成です！ループをいちから書くのがめんどくさいって人はそのままコピペして使ってもいいし、もしやりたい事がこの記事で見つからなかった場合、関数リファレンス – WordPress Codex 日本語版を見て探してみるのも勉強になっていいと思います。

出典：テンプレート階層 – WordPress Codex 日本語版