【WordPress】投稿一覧ページを作成する「２つ」の方法【オリジナルテーマ】

ケケンタ

こんにちは！　ケケンタです。

今回は

WordPressのオリジナルテーマで
「投稿一覧ページ」を作成する方法

をご紹介します。

WordPressではオリジナルテーマでも簡単に「投稿一覧ページ」を作成することが可能です。

しかし、実際に初めて作成しようとしてみると、意外と作成手順に迷ってスムーズに作業が進められなかったりします。

ケケンタ

この記事が投稿一覧ページ作成の一助となれば幸いです！

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

【方法①】「投稿一覧ページ」をサイトのトップページにする方法

いま現在、「何らかのページ」をトップページとして設定していないのであれば、恐らくデフォルトで「投稿一覧ページ」がサイトのトップページに設定されているはずです。

まずは現在のトップページの設定状況を確認するために

管理画面の「設定」→「表示設定」

をご確認ください。

こちらの画面で「最新の投稿」が選択されていれば、すでに「投稿一覧ページ」がサイトのトップページとして設定されています。

すでに「固定ページ」→「ホームページ」に何らかのページが設定済み、あるいは設定する予定という場合は、別途「投稿ページ」用の実装をする必要があるため、次の章をご覧ください。

補足

【方法②】トップページとは別に「投稿一覧ページ」を作成する方法

トップページとは別に「投稿一覧ページ」を作成する主な流れは以下の通りです。

ケケンタ

順を追ってご説明します！

STEP１　「投稿一覧ページ用」の固定ページを新規作成する

まずは「投稿一覧ページ用の固定ページ」を作成していきます。

STEP

新規固定ページを追加する

新規に固定ページを追加します。

STEP

固定ページに「タイトル」をつける

固定ページにタイトルをつけます。

このとき、タイトルは自由なもので大丈夫なのですが、分かりやすく「投稿一覧ページ」や「ブログ一覧ページ」などとすることをおすすめします。

固定ページにタイトルをつける

ケケンタ

本文は「空欄」のままでOKです。
タイトルまで入力したら「公開」をクリックしましょう。

STEP

固定ページの「スラッグ」を決める

次に、固定ページの「スラッグ」を決めます。
※ここで決めたスラッグは最終的に「投稿一覧ページのURL」に使用します。

こちらもタイトルと同様で自由なスラッグ名で問題はないのですが、分かりやすく「blog」や「post」とするのが一般的です。

固定ページにスラッグをつける

STEP

作成した固定ページを「投稿ページ」に設定する

最後に、管理画面「設定」→「表示設定」で、作成した固定ページを「投稿ページ」に設定します。

作成した固定ページを「投稿ページ」に設定

STEP２　投稿一覧ページ用のテンプレートファイル（home.php）を作成する

【手順①】が完了したら、続いて投稿一覧ページ用のテンプレートファイル（home.php）を作成していきます。

STEP

テーマディレクトリ直下にhome.phpを作成する

テーマディレクトリ直下にhome.phpを作成します。
※念のため補足で、以降のディレクトリ画像はローカル上のものです。

home.phpを作成

home.phpはWordPressで「投稿一覧ページ専用のテンプレートファイル」として扱われます。

今回の場合、【手順①】で作成した固定ページを「投稿ページ」に指定してあるため、このページを表示する際にhome.phpが自動的に呼び出されます。

STEP

home.phpにソースコードを追加する

STEP1まで完了していれば、「投稿一覧ページ」を表示すること自体は可能です。
しかし、このままだとhome.phpの中身が空っぽで何も表示されないため、STEP2ではhome.phpに必要なソースコードを追加します。

home.phpに追加するソースコードの例

<main>
	<div>
		<h2>投稿一覧ページ</h2>

        <!-- メインループを回して記事をひとつずつ出力する -->
		<?php if ( have_posts() ) : ?>
			<?php while ( have_posts() ) : the_post(); ?>

                <!-- タイトル -->
				<?php the_title(); ?>

			<?php endwhile ?>
		<?php endif; ?>

	</div>
</main>

上記のソースコードは記事のタイトルを出力するだけの記述になっています。
実際に実装する際にはご自身の状況に合わせて適宜処理を追記修正して下さい。

【補足】「投稿一覧ページ」へのリンクを作成する方法

前章の方法で「投稿一覧ページ」を作成した場合における「投稿一覧ページ」へのリンクを作成する方法をご説明します。

ケケンタ

方法はいたってシンプルで、以下の１行で「投稿一覧ページ」へのリンクを作成することが可能です。

「投稿一覧ページ」へのリンク

<a href="<?php echo esc_url( home_url('/先ほど作成した固定ページのスラッグ/') ); ?>">投稿一覧ページ</a>

例えば、投稿一覧ページ用に作成した固定ページのスラッグが「blog」であれば、以下のような記述になります。

（例）スラッグが「blog」の場合

<a href="<?php echo esc_url( home_url('/blog/') ); ?>">投稿一覧ページ</a>

まとめ

いかがだったでしょうか。

投稿一覧ページを作成する場合、

トップページとしてすでに別のページが設定されているかどうか

によってその方法が若干異なってきます。

そして、その方法の違いは

「投稿一覧ページ用の固定ページ」を作成するかどうか

です。

トップページがすでに別に用意されている、あるいは別に用意する予定であれば、「投稿一覧ページ用の固定ページ」を別途実装する必要があります。

投稿一覧ページは恐らくWordPressオリジナルテーマにおいて実装頻度が高い方かと思いますので、この記事がお役に立ったなら何よりです。

ケケンタ

それでは、最後までご覧いただきありがとうございました。

当ブログではWordPressやWeb制作、PHPの情報を発信しています。
ご興味のある方は他の記事もご覧いただけると嬉しいです。