お知らせが増えてくると、「イベントの記事だけ見たい」という要望が出てきます。投稿をカテゴリで仕分けて、カテゴリ別の一覧ページを作りましょう。あわせて、存在しないURLに来た人を案内する404ページも作り、テンプレートの章を締めくくります。
カテゴリの仕分けは管理画面で
まず素材の準備。管理画面の「投稿」→「カテゴリー」で、シマエナガ堂に合う分類を作ります。
- お知らせ（日々の連絡）
- イベント（フェア・ワークショップ）
- メディア（雑誌掲載など）
既存の投稿を編集して、右側のパネルからカテゴリーを付け直しておきましょう。
一覧にカテゴリのチップを出す
まず、home.phpの一覧にカテゴリ名を表示します。ループの中に1行足すだけです。
<li>
<time><?php the_time('Y.m.d'); ?></time>
<span class="cat"><?php the_category(', '); ?></span>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>the_category(', ')は、記事のカテゴリをリンクつきで表示する関数。このリンクの行き先が、今回作るカテゴリ別一覧です。
.cat {
font-size: 12px;
flex-shrink: 0;
}
.cat a {
background: #eaf4f6;
color: #2a6f7c;
border-radius: 999px;
padding: 2px 10px;
font-weight: bold;
text-decoration: none;
}category.php——カテゴリ専用の一覧
カテゴリのリンクを押すと、URLは/category/イベント/のような形になり、担当はcategory.phpに。中身はhome.phpとほぼ同じで、見出しだけ「いま何のカテゴリを見ているか」に変えます。
<?php get_header(); ?>
<h1 class="page-heading">
<?php single_cat_title(); ?>のお知らせ
</h1>
<main class="section">
<ul class="news-list">
<?php while (have_posts()) : the_post(); ?>
<li>
<time><?php the_time('Y.m.d'); ?></time>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>
<div class="pagination"><?php the_posts_pagination(); ?></div>
</main>
<?php get_footer(); ?>single_cat_title()が、いま表示中のカテゴリ名（「イベント」など）を出してくれます。絞りこみ自体はWordPressがURLから自動でやってくれるので、テンプレート側はループを回すだけ——メインループの便利さがよくわかる場面です。
404.php——迷子ページも自作テーマの守備範囲
存在しないURLに来たときの「ページが見つかりません」画面も、テーマの担当です。無いと素っ気ない表示になるので、シマエナガ堂らしく案内を出しましょう。
<?php get_header(); ?>
<main class="section" style="text-align: center;">
<h1 class="page-heading">ページが見つかりませんでした</h1>
<p>お探しのページは、移動したか削除された可能性があります。</p>
<p><a href="<?php echo home_url(); ?>">トップページへもどる</a></p>
</main>
<?php get_footer(); ?>確認は、ブラウザのアドレス欄に（サイトURL）/aaaのようなでたらめなURLを打つだけ。自作の404が出れば成功です。
このレッスンのまとめ
- カテゴリの仕分けは管理画面、カテゴリ別一覧の見た目は
category.php——絞りこみはWordPressが自動でやる the_category()でチップを、single_cat_title()で「いま見ている分類名」を表示できる- 404.phpも自作テーマの守備範囲——迷子の訪問者にトップへの帰り道を