この章では、投稿一覧、投稿詳細、アーカイブを学びます。
WordPressでは、お知らせやブログを投稿で管理することが多いです。
テーマ側では、一覧ページと詳細ページを用意します。
投稿一覧
投稿一覧では、複数の記事を表示します。
表示設定で投稿ページを指定している場合、home.phpが使われます。
home.php
<?php get_header(); ?>
<main class="post-archive">
<h1>お知らせ</h1>
<?php if ( have_posts() ) : ?>
<div class="post-list">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'template-parts/post-card' ); ?>
<?php endwhile; ?>
</div>
<?php else : ?>
<p>記事がありません。</p>
<?php endif; ?>
</main>
<?php get_footer(); ?>投稿カードをテンプレートパーツ化すると、検索結果やカテゴリー一覧でも使い回せます。
投稿カード
投稿カードは、一覧で表示する1件分の部品です。
template-parts/post-card.php
<article class="post-card">
<a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail( 'medium' ); ?>
<?php endif; ?>
<time datetime="<?php echo esc_attr( get_the_date( 'c' ) ); ?>">
<?php echo esc_html( get_the_date() ); ?>
</time>
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
</a>
</article>一覧では、本文全文ではなく抜粋を表示することが多いです。
投稿詳細
投稿詳細では、single.phpを使います。
single.php
<?php get_header(); ?>
<main class="single-post">
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article>
<h1><?php the_title(); ?></h1>
<time datetime="<?php echo esc_attr( get_the_date( 'c' ) ); ?>">
<?php echo esc_html( get_the_date() ); ?>
</time>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<?php endwhile; ?>
<?php endif; ?>
</main>
<?php get_footer(); ?>本文部分はブロックエディターで編集された内容が出力されます。
entry-contentに本文用のCSSを用意しておくと読みやすくなります。
アーカイブ
アーカイブは、投稿を条件別に一覧表示するページです。
たとえば、カテゴリー一覧、タグ一覧、日付別一覧などです。
基本のテンプレートはarchive.phpです。
archive.php
<?php get_header(); ?>
<main class="archive-page">
<h1><?php the_archive_title(); ?></h1>
<?php if ( have_posts() ) : ?>
<div class="post-list">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'template-parts/post-card' ); ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
</main>
<?php get_footer(); ?>カテゴリーごとに専用デザインにしたい場合は、category.phpやcategory-news.phpを作れます。
ページネーション
投稿が多い場合は、ページネーションを表示します。
ページネーション
<?php
the_posts_pagination( array(
'mid_size' => 1,
'prev_text' => '前へ',
'next_text' => '次へ',
) );
?>ページネーションがないと、投稿数が増えた時に古い記事へたどり着きにくくなります。
検索結果
検索結果ページにはsearch.phpを用意します。
search.php
<?php get_header(); ?>
<main>
<h1>検索結果: <?php echo esc_html( get_search_query() ); ?></h1>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'template-parts/post-card' ); ?>
<?php endwhile; ?>
<?php else : ?>
<p>該当する記事が見つかりませんでした。</p>
<?php endif; ?>
</main>
<?php get_footer(); ?>検索結果がない場合の表示も用意しておきます。
404ページ
存在しないURLにアクセスされた時は、404.phpを使います。
404.php
<?php get_header(); ?>
<main class="not-found">
<h1>ページが見つかりません</h1>
<p>URLが変更されたか、ページが削除された可能性があります。</p>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">トップページへ戻る</a>
</main>
<?php get_footer(); ?>404ページも、ユーザーがサイト内に戻れる導線を用意します。
この章のまとめ
- 投稿一覧には
home.php、投稿詳細にはsingle.phpを使う - 投稿カードはテンプレートパーツ化すると使い回しやすい
- カテゴリーやタグの一覧にはアーカイブテンプレートを使う
- 投稿数が増える場合はページネーションを用意する
- 検索結果や404ページも最低限整える