カテゴリが「お知らせ」の場合だけ、別デザインで一覧表示できるようテーマテンプレートを別に作ります。
専用テンプレートを割り当てる
スラッグと表示ページを確認
特定のカテゴリ一覧だけ専用のテンプレートで表示するために、slug（スラッグ）を使います。
WordPress管理画面の投稿 > カテゴリー を開いてください。
「お知らせ」のスラッグを確認します。
確認できたら、そのまま「お知らせ」下にある表示から、一覧ページを表示します。
下図のように、前回作ったcategory.phpのレイアウトで出力されているはずです。
専用のテンプレートを作成
「お知らせ」一覧を表示するときだけに適用される、テーマテンプレートファイルを作ります。
ファイル名で、categoryの後に、ハイフンとslugを追加すると自動で適用されます。
お知らせカテゴリのスラッグはinfoなので、category-info.phpになります。
category.phpを複製して、category-info.phpを作成してください。
新しくテーマに追加したcategory-info.phpを、エディタで開きます。
mainタグの上に「test」など文字を打って、お知らせカテゴリの一覧ページに反映されるか確認してみましょう。
category-info.phpが適用されていることが確認できたら、確認に使った文字は削除してください。
投稿の一覧表示部分を作る
表示される投稿を、お知らせ一覧ページのデザインに合わせます。
今回は、元となるHTMLファイル（info.html）があるので、それを使いましょう。
まず、それぞれの投稿を囲うための要素。
divタグに設定されているCSSクラスを、info.htmlで使用していたクラスに置き換えます。
次に、繰り返し表示する投稿上表の部分です。
info.htmlから投稿1つ分（<article> ～ </article>）をコピー。
category-info.phpの、whileタグ下に貼り付けます。
貼り付けたarticle要素内で、以下３箇所をWordPressのテンプレートタグに変更します。
- 記事公開日
- aタグのリンク先
- 投稿タイトル
元からあった、category.phpの表示で使っていたカード部分は削除してください。
変更箇所は、以下のようになります。
category-info.php
<section class="section-padding">
<div class="card info-wrapper">
<?php while (have_posts()) : the_post(); ?>
<article class="flex-container">
<div class="info-date">
<?php echo get_the_date(); ?>
</div>
<h2 class="info-title">
<a href="<?php the_permalink() ?>">
<?php the_title(); ?>
</a>
</h2>
</article>
<?php endwhile; ?>
</div>
</section>
category-info.phpを保存し、お知らせのページが正しく表示されているか確認します。
これで、category-info.phpも完成。
ズーロッパ東京のWordPressテーマ完成です！
最終確認・調整
WordPressのテーマが完成したら、動作確認をします。
- ヘッダーナビゲーションから各ページは開けるか
- 一覧表示から、それぞれの投稿を開けるか
- レイアウト崩れはないか
そのほか、整えたい所があれば調整してください。
index.phpのカード画像からも、投稿ページが開けたら便利かな…など思うところを変更してみると良いでしょう。
フッターの配置について
一覧ページで表示できる投稿数が少ない場合など、フッターの位置が上に来てしまいます。
【新HTML/CSS入門講座（応用編）】で解説されている方法を使うと、フッターを画面の下部に表示させることが出来ます。
今回のように全体に背景色がある場合は、bodyにベースの背景色を設定しておくと良いです。
h-100クラスのスタイル指定については、下記講座もしくは素材の見本ファイルをご確認ください。
