ゼロから始めるWordPress自作テーマ #10「カテゴリ一覧ページをつくろう」
WordPress「ゼロから始めるWordPress自作テーマ」では、既成のテーマを使わずにゼロからWordPressサイトを構築する方法を、私のブログサイト「OUNI studio」の構築例をもとに紹介します。
WordPressの既成テーマは簡単にインストールできますが、実際にサイトを構築する際には、既成のテーマをカスタマイズするよりも、自分でテーマを作成した方が簡単な場合が多いです。自分でWordPressテーマを作れるようになれば、サイトを自由にデザインできるようになります。
第10回は「カテゴリ一覧ページをつくろう」です。
カテゴリ一のリンクをクリックすると、そのカテゴリーの投稿一覧を表示させます。
完成形
今回の完成形は以下のようになります。トップページからカテゴリのリンクをクリックして、カテゴリ一覧のページに遷移できるようになります。
今回の記事の完成形のソースコードは以下から取得できます。
カテゴリ一覧ページの作成
カテゴリ一覧ページは、階層テンプレートの「カテゴリーアーカイブ」に沿って archive.php というファイル名で作成します。
カテゴリ一覧ページでは、カテゴリごとの投稿一覧を表示させます。投稿一覧の表示はすでに front-page.php で実装済みなので、同じようにコードを書きます。
<main id="main-top">
<div id="content-area">
<div id="new-post-container">
<!-- 投稿の数だけ繰り返して処理する -->
<?php while (have_posts()) : ?>
<!-- 投稿を取得 -->
<?php the_post(); ?>
<!-- 投稿を表示 -->
<div id="new-post">
<?php the_post_thumbnail( array( 250, 200 ), array( 'id' => 'new-post-img' ) ); ?>
<h3 id="new-post-header"><a href="<?php echo get_permalink(); ?>"><?php echo the_title(); ?></a></h3>
<p id="new-post-info">
<time id="new-post-date" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
</p>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
</main>
カテゴリ名をタイトル表示させる
最後にカテゴリ一覧ページのタイトルを表示させます。
タイトルにカテゴリ名を表示させたいので、どのカテゴリのページなのかを取得したいです。カテゴリ名の取得は single_cat_title で取得できます。
以下のようにカテゴリ名の表示をします。
<main id="main-top">
<div id="content-area">
<!-- カテゴリ名の表示 -->
<?php $title = single_cat_title('', false); ?>
<h2 id="top-header">CATEGORY : <?php echo $title; ?></h2>
まとめ
今回は、カテゴリ一覧ページを作成しました。
テンプレート階層に沿って、ファイルを用意して、そこにコードを書いていく、という流れについて慣れてきたのではないでしょうか。仕組みを理解すると、トップページも投稿ページも固定ページもカテゴリ一覧ページもやっていることは同じです。
次回は、すべてのブログ投稿を一覧で表示させるページをつくります。