WordPressのcategory.phpでカテゴリーページを作成すると、同じカテゴリーに属する投稿をカテゴリーの記事一覧にして表示することができるため、カテゴリー別に分かれたアーカイブページを作成することができます。
WordPressでcategory.phpを作成
まずはcategory.phpを作成します。
使用しているテキストエディタ(vscodeなど)でファイル名をcategory.phpにして作成します。
ファイル拡張子は.phpです。
作成したcategory.phpのファイルにはWordPressにカテゴリーページとして表示するときの確認用として「category」のように簡単な文字を入力しておくと良いです。
作成後のcategory.phpはFTPソフトを使用してカテゴリーページを作成するWordPressテーマのフォルダにアップします。
WordPressテーマのフォルダはwp-content⇒themesの順番に階層を下げていくとテーマ名のフォルダがあります。
category.phpがWordPressに認識したか確認
次にcategory.phpがWordPressに認識されているかを確認します。
WordPressの管理画面から「外観」で「テーマエディター」をクリックして進んだ「テーマを編集」のページで確認です。
「テーマを編集」のページでは画面の右上に表示している「編集するテーマを選択」からcategory.phpをアップしたWordPressテーマを選択してテーマファイルを確認してください。
テーマファイルでcategory.phpのファイル名の上に「カテゴリーテンプレート」と表示されていればcategory.phpはWordPressにカテゴリーページのテンプレートファイルとして認識されています。
WordPressにcategory.phpが認識した後は、カテゴリーページをブラウザで表示して確認することができます。
テーマのトップページやサイドバーにカテゴリーのリンクがあればクリックして見てください。
category.phpの作成のときに入力しておいた確認用の文字が表示されているのが確認できるかと思います。
<?php wp_list_categories(); ?>
もしカテゴリーへのリンクがない場合は以下のPHPコードをトップページのindex.phpとかサイドバーのsidebar.phpに記述することでリンク付きのカテゴリーリストが表示できるのでカテゴリーページを確認できます。
これでWordPressのcategory.phpでカテゴリーページを作成することができているので、それぞれのサイトに合わせたカテゴリー記事一覧をループしたり、カテゴリー名や説明文などを作成していきます。
WordPressループでカテゴリーページに記事一覧を作成
ここからはWordPressのcategory.phpでカテゴリーページを作成するときに、WordPressループでカテゴリー記事一覧を作成する1つの例を紹介します。
WordPressのメインループをcategory.phpに以下のように記述をしてカテゴリーページに記事一覧を作成してみました。
<?php get_header(); ?>
<div class="wrapper">
<!--メイン-->
<main class="main_contents">
<?php if (have_posts()): ?>
<?php while(have_posts()) : the_post();?>
<div class="archive_item">
<!--カテゴリー記事一覧をパーツ化して読み込み-->
<?php get_template_part('template-parts/loop'); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</main>
<!--サイドバー-->
<div class="sidebar">
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
WordPressのカテゴリーページでヘッダーとフッターとサイドバーはテーマ全体に使用しているテンプレートファイルを読み込んで表示しています。
そしてループでカテゴリー記事一覧を表示するための細かい記述は「loop.php」という名前の別ファイルを作成してパーツ化したテンプレートファイルを読み込んで表示。
loop.phpの記述についてはシンプルなPHPコードとWordPress関数を使用し作成しています。
<article id="post-<?php the_ID(); ?>" <?php post_class('archive-contents'); ?>>
<div class="archive_eyecatch">
<a href="<?php the_permalink(); ?>">
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail('full'); ?>
<?php else: ?>
<?php loop_thumbnail(); ?>
<?php endif; ?>
</a>
</div>
<?php the_category(); ?>
<div class="archive_meta">
<a href="<?php the_permalink(); ?>"><h2 class="archive_title"><?php the_title(); ?></h2></a>
</div>
</article>
投稿のサムネイルとカテゴリー、そして投稿タイトルで構成した記事一覧で作成しています。
このようにWordPressループでcategory.phpにカテゴリーページの記事一覧を作成すると、トップページのサイドバーなどでリンクしているカテゴリーをクリックしたときには、移動先のカテゴリーページでは同じカテゴリー同士の投稿がループされたカテゴリーページを表示することができます。
カテゴリーページにカテゴリー名を表示
WordPressのカテゴリーページに記事一覧を作成すると、そのカテゴリーに分類した投稿がズラッとカテゴリーページに表示しますが、カテゴリー名が表示されません。
WordPressのカテゴリーページの作成でカテゴリー名を表示する場合には、WordPressのsingle_cat_title()関数を使用します。
<h1><?php single_cat_title(''); ?></h1>
single_cat_title()はループの外で使用します。
例えばcategory.phpのheader要素とwrapper要素の間に、またはmain要素の上などにスタイル用のdiv要素なんかを作成してh1タグでsingle_cat_title()を記述するなどです。
カテゴリー名の要素はデザインしてないですがsingle_cat_title()をcategory.phpに記述すると以下の画像のようにカテゴリー名がサイトタイトルと記事一覧の間に表示されるWordPressのカテゴリーページに作成することができます。
カテゴリー名はカテゴリーページが異なる場合、カテゴリーページ別にカテゴリー名が表示されます。
例えばCSSカテゴリーのページではなく、WordPressカテゴリーのページを開いた場合にはカテゴリー名はWordPressが表示します。
このとき表示するカテゴリー名はWordPressの投稿⇒カテゴリーで設定したカテゴリー名になります。
カテゴリ別の説明文も作成
WordPressのカテゴリーページにはカテゴリーの説明文も作成して表示することができます。上の画像ではカテゴリー名の下がカテゴリー説明文ですね。
category.phpで作成したカテゴリーページにカテゴリ別の説明文も作成する場合はWordPressのcategory_description()関数をcategory.phpに記述します。
<p><?php echo category_description(); ?></p>
表示方法はcategory_description()をPHPのechoで表示させてください。簡単なやり方ではありますがWordPressのカテゴリーページにカテゴリ別の説明文を作成することができます。
また、表示されるカテゴリー説明文はWordPressの管理画面から投稿⇒カテゴリーで設定した「説明」が使用されます。
ちなみにsingle_cat_title()でのカテゴリー名と、category_description()のカテゴリー説明文を囲んだdiv要素をCSSでセレクタにしてbackground-imageで背景画像を付けてデザインしてあげると、WordPressのカテゴリーページのファーストビューの印象は強いデザインになってきます。
カテゴリーページのtitleタグを変更する場合
WordPressで作成したカテゴリーページがブラウザで表示されたときのタブに表示されるtitleタグを以下の画像のように「カテゴリー名｜サイト名」に変更が必要な場合があるかもしれん。要望があったときなどですかね。
カテゴリーページのtitleタグを変更する場合には、まずはadd_theme_support(‘title-tag’)の記述がテーマのfunction.phpにない可能性があるので確認してみます。
add_theme_support('title-tag');
なければadd_theme_support(‘title-tag’)をfunctions.phpに記述します。
そしてheader.phpのheadに記述しているtitleタグを確認してHTMLのtitleタグがあれば削除します。
これでカテゴリーページのtitleタグを変更することが実際にできたので、できるはずです。簡単なことだったのですが私は1時間くらい解決できなくて悩みました…
まとめ
今回はWordPressのカテゴリーページを作成するときにcategory.phpをテンプレートに使用する場合を説明しましたが、archive.phpやindex.phpのテンプレートファイルを使用してもWordPressのカテゴリーページは作成できます。
使用できるテンプレートはcategory.phpを含めて5つあり優先順位があります。
- category-スラッグ名.php
- category-ID番号.php
- category.php
- archive.php
- index.php
リスト番号1から5に下がるにつれてテンプレートの優先順位も下がり、index.phpが一番低くなります。
WordPressのcategory.php以外のテンプレートファイルでカテゴリーページを作成したほうがサイト管理がしやすくなる場合もあります。
たとえば今回使用したcategory.phpをarchive.phpにリネームしてアーカイブテンプレートとしてWordPressに認識させると、カテゴリーページだけでなく、月別アーカイブなどにも使用可能になるためサイトのアーカイブデザインを統一できるようになるなど。
時間があるときにでもテスト作成してみると良いかと思います。
