サイト制作に関するメモ書き

HOME > CMS > WordPressで投稿した記事の一覧ページを作成する

WordPressで投稿した記事の一覧ページを作成する

投稿記事の一覧ページを作成してみます。

表示させるページ

投稿記事の一覧ページは、フロントページに表示する方法と固定ページに表示する方法があります。
管理画面の設定 > 表示設定 で「フロントページの表示」を「最新の投稿」にしている場合、以下のテンプレートのいずれかを使ってフロントページに一覧を表示できます。

  1. front-page.php
  2. home.php
  3. index.php

「フロントページの表示」を「固定ページ」にしている場合、以下のテンプレートのいずれかを使って指定した固定ページに一覧を表示できます。

  1. home.php
  2. index.php

今回は投稿ページ用の固定ページを作成してみます。
 

作成方法

固定ページ > 新規追加 から一覧を表示させる固定ページを作成します。
一覧を表示させるので、本文は空で問題ありません。
入力が完了したら公開をクリックして公開しておきます。

次にフロントページの表示の設定を変更しておきます。
設定 > 表示設定 の「フロントページの表示」を「固定ページ」にして、「投稿ページ」を先ほど作成した固定ページにします。

これで管理画面での設定は完了しました。
home.phpのテンプレートを作成します。

PHP

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<div class="article">
	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	<div class="date"><?php echo get_the_date('Y.m.d'); ?></div>
	<div class="category"><?php the_category(); ?></div>
	<div class="tag"><?php the_tags(); ?></div>
	<div class="sentence"><?php the_content(); ?></div>
</div>
<?php endwhile; else: ?>
<div>記事がありませんでした。</div>
<?php endif; ?>

<div class="pager">
	<div><?php previous_posts_link('前のページ'); ?></div>
	<div><?php next_posts_link('次のページ'); ?></div>
</div>

テンプレート反映後にURLにアクセスすると、記事一覧が表示できていることが確認できました。

have_posts() WordPressクエリにループできる結果があるかどうかをチェックして、true/falseを返す。
詳細はこちら
the_post() 次の投稿を取得して、ループを次の投稿へ進める。
詳細はこちら
the_permalink() ループ内で各投稿のパーマリンクURLを表示。
詳細はこちら
the_title($before, $after, $echo) ループ内で各投稿のタイトルを表示。
$before:タイトルの前に置く文字列を指定。
$after:タイトルの後ろに置く文字列を指定。
$echo:タイトルを表示するか(true)、タイトルの文字列を返す(false)。
詳細はこちら
get_the_date($format, $post_id) 現在の投稿が書かれた日付を返す。
$format:日付の書式を指定。
$post:日付を取得したい投稿のIDを指定。省略した場合は現在の投稿の日付を返す。
詳細はこちら
the_category($separator, $parents, $post_id) ループ内で各記事が属するカテゴリーへのリンクを表示。
$separator:カテゴリーへのリンクを区切る文字列を指定。
指定がないまたは空文字列の場合はulタグで表示。
$parents:記事が子カテゴリーに属するときの表示を指定。
multiple:親と子カテゴリーが並んで表示され、親と子それぞれにリンクが張られる。
single:親と子カテゴリーが並んで表示され、親と子にまとめて子のリンクが張られる。
$post_id:カテゴリーを取得する投稿のIDを指定。省略した場合は現在の投稿のカテゴリーを返す。
詳細はこちら
the_tags($before, $sep, $after) ループ内で各記事に付けられたタグとリンクを表示。
$before:タグ一覧の前に表示する文字列を指定。
$sep:各タグリンクの間に表示する文字列を指定。
$after:タグ一覧の後に表示する文字列を指定。
詳細はこちら
the_content($more_link_text, $stripteaser) ループ内で各記事の本文を表示。
本文中に「続きを読む」がある場合、先頭からその部分までの抜粋を表示。
$more_link_text:続きを読むのリンクに表示する文字列を指定。
$stripteaser:投稿の個別ページで、続きを読むより前の内容を隠すかどうか指定。
詳細はこちら
previous_posts_link($label) 投稿の一つ前のセットへのリンクを表示。
$label:リンクの文字列を指定。
詳細はこちら
next_posts_link($label, $max_pages) 投稿の次のセットへのリンクを表示。
$label:リンクの文字列を指定。
$max_pages:リンクを表示するページ番号の上限を指定。
詳細はこちら

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP