ゼロから始めるWordPress自作テーマ #10「カテゴリ一覧ページをつくろう」

「ゼロから始める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>

まとめ

今回は、カテゴリ一覧ページを作成しました。

テンプレート階層に沿って、ファイルを用意して、そこにコードを書いていく、という流れについて慣れてきたのではないでしょうか。仕組みを理解すると、トップページも投稿ページも固定ページもカテゴリ一覧ページもやっていることは同じです。

次回は、すべてのブログ投稿を一覧で表示させるページをつくります。