カテゴリ毎に投稿の一覧表示を行う、category.phpを作成します。
カテゴリ一覧ページのデザインが２種類ありますが、今回はイベント一覧（event.html）をcategory.phpにします。
category.phpを準備する
該当ページの確認
これから作成するcategory.phpが反映されるページを開きましょう。
WordPressサイトのヘッダーナビゲーションから「イベント」をクリック。
イベントカテゴリの投稿一覧（が表示される予定のページ）を開きます。
今は上図のように、トップページに使っているindex.phpと同じデザインで表示されています。
category.phpを新規作成
event.htmlを複製して、category.phpを作成します。
直にファイル名を変更しても、別名で保存などを使ってsingle.phpを作成しても構いません。
category.phpも読み込んで欲しいCSSやメニュー、footer部分は他ページと共通です。
完成したページテンプレート（page.phpなど）から、以下2箇所のコードを貼り付けましょう。
① 1行目～</header>まで
② footerタグから最終行まで
category.phpを上書き保存します。
最初に開いた、イベントカテゴリの一覧ページを再読み込みしてください。
- イベント一覧のレイアウトに置き換わっている
- WordPressの管理メニューが上部に表示されている
- ヘッダー部分がWordPress仕様になっている
上記３つを満たしていれば、category.phpのベースは出来ています。
見出しや投稿の一覧表示を整える
タイトルとh1見出し
ブラウザのタブに表示されている文字を見てみてください。
<title>タグ内で<?php the_title( ); ?>と記述した位置に、投稿タイトルが表示されているはずです。
<?php the_title( ); ?>ではカテゴリ名やタグ名は出力できません。
タクソノミー名（カテゴリやタグの名称）を表示する、下記のコードに変更しましょう。
<?php single_term_title( ); ?>
タイトルタグの変更
head内、<title>タグ部分を変更します。
category.php
<title><?php single_term_title( ); ?> | <?php bloginfo('name'); ?></title>
h1タグの変更
同じ<?php single_term_title( ); ?>を、h1タグの中にも貼り付けます。
これは、カテゴリ名に変更があったときや、新しいカテゴリを作った際にも自動で対応できるようにするためです。
合わせて、見出し下の画像パスも直しておきましょう。
category.php
<main class="bg-base categories">
<div class="container">
<section class="section-padding">
<h1 class="text-green text-center">
<?php single_term_title( ); ?>一覧
</h1>
<div class="text-center">
<img src="<?php echo get_template_directory_uri();?>/images/line.png" width="400" height="6" alt="">
</div>
</section>
投稿の一覧表示を作成
該当するカテゴリーに属している投稿を取得・表示させるためのループを書きます。
ここはメインループ、WordPressがURLから自動で判定して取得してくれるもので十分ですね。
1つ目のartilce要素を挟むように、whileとendwhileを書きます。
2つ目以降のatticle要素は要らないので、削除しておいてください。
category.php
ループ内をWordPressのテンプレートタグに置き換えて、各投稿の情報を出力します。
それぞれ個別に書き換えても良いですが、このカードはindex.phpで使っているのとほぼ同じです。
index.phpの<artilce> ～ </artilce>までをコピーして、要素ごと置き換えても良いです。
この場合は、投稿タイトルだけ、h2かh3かの違いがあるので調整してください。
category.php
<section class="section-padding">
<!-- ここからカード並び -->
<div class="flex-container card-container">
<?php while (have_posts()) : the_post(); ?>
<artilce class="card-wrapper">
<div class="card">
<?php the_post_thumbnail(); ?>
<a href="<?php the_permalink() ?>">
<h2><?php the_title(); ?></h2>
</a>
<div class="text-orange">
★★★★★
</div>
<div class="card-description">
<?php the_excerpt(); ?>
</div>
<div class="card-footer flex-container flex-all-row">
<div class="card-author">
<img src="<?php echo get_template_directory_uri();?>/images/michan.png" width="26" height="26" alt="michan">
<?php the_author_posts_link(); ?>
</div>
<div class="card-date">
<?php echo get_the_date(); ?>
</div>
</div>
</div>
</artilce>
<?php endwhile; ?>
</div>
</section>
ページネーションを作る
ページネーションとは、1ページに表示できる件数を超えた時に、2ページ目、3ページ目…と移動できるようにする“ページ番号付きのリンク”のことです。今回のデザインだと、イベントやお知らせ一覧のページで、フッター上にある数字が該当します。
1ページに表示する最大投稿数を変更
WordPressでページネーションを表示するには、投稿が1ページ内に収まらない数である必要があります。
次のページで表示するほど投稿数がなければ、ページネーションは表示されません。
投稿を量産するのは大変ですので、1ページに表示する投稿数を減らしましょう。
WordPressの管理画面から、設定 > 表示設定 を開きます。
1ページに表示する最大投稿数を変更します。
今あるイベントカテゴリの投稿数よりも、少ない数を設定して「変更を保存」してください。
ページネーションを呼び出す
肝心の、ページネーションを表示するためのコードをcategory.phpに書きましょう。
WordPressではpaginate_links()関数で、ページ番号付きリンクを取得してくれます。
echoを使って出力するので、実際に使うのは以下の形です。
<?php echo paginate_links(); ?>
category.phpの、ダミーのページネーションの上辺りに入れてみましょう。
category.php
<div class="pagination section-padding">
<div class="text-center">
<?php echo paginate_links(); ?>
<a href="#" class="current">1</a>
<a href="#">2</a>
<a href="#">次へ »</a>
</div>
</div>
CSSを調整する
paginate_links()によるページネーションを、イベント一覧のページで確認してみましょう。
素材のHTML,CSSでは、上図のように数字（ページ番号付きリンク）の間隔がズレます。
style.cssの方で調整しましょう。
検証ツールで、WordPressが出力している部分の要素とクラスを確認します。
style.cssを開き、該当部分のCSSセレクタを検証ツールで見たものに変更します。
style.css
/* ページネーション */
.pagination .page-numbers{
margin: 0 1rem;
}
.pagination .current{
color: #BBBBBB;
}
↓
再読込して、CSSの適用を確認してください。
右側に表示されているWordPressのページネーションの方に、CSSが効いていたら成功です。
paginate_links()の下にある、ダミーのページネーションは削除してください。
category.php
<div class="pagination section-padding">
<div class="text-center">
<?php echo paginate_links(); ?>
</div>
</div>
表示最大投稿数を「8」に変更
ページネーションの表示が確認できたら、WordPress管理画面で“1ページに表示する最大投稿数”の設定を変えます。
今回のデザインだと、一覧ページでは8つずつ投稿情報が出ているので「8」にしておきましょう。
これでcategory.phpは完成です。