最新記事を公開しました→ 詳しくはこちら

WordPressオリジナルテーマの作り方⑨(カテゴリーページ編)

今回はWordPressオリジナルテーマの「カテゴリーページ」の制作手順を解説します。
これまでに以下の作業を行いました。

カテゴリーページは以下の四角で囲った、カテゴリーの一覧が表示されているページです。
※この場合はWEB制作・マーケティング

カテゴリーページと他の投稿系ページとの違いを以下にまとめました。

  • 個別記事ページ⇒1つの記事だけが表示される
  • 記事一覧ページ⇒全てのカテゴリーが一覧で表示される
  • カテゴリーページ⇒特定のカテゴリーだけが一覧で表示される

カテゴリーページの具体的な制作手順はこの後解説します。

目次

カテゴリーページはcategory.phpファイルを使う

カテゴリーページが表示できるテンプレートは以下の5つです。

  • category-スラッグ名.php
  • category-ID番号.php 
  • archive.php
  • index.php
  • category.php

カテゴリーページは「category.php」ファイルを使って実装していきます。
カテゴリーページの構成はindex.phpと同じです。

category.phpが実装されると、特定のカテゴリー記事一覧がブログなどの本文内に表示されます。

category.phpファイルの作成

category.phpはテーマディレクトリの直下に作成します。作成のルートは以下の通りです。

C:\Users\ユーザー名\Local Sites\blog\app\public\wp-content\themes\blog\category.php

指定した場所にcategory.phpが作成できたら、コーディングを始めます。

category.php

<?php get_header(); ?>
<div id=”container” class=”wrapper”>
  <main>
    <?php
      $cat = get_the_category();
      $catname = $cat[0]->cat_name;
    ?>
    <h1 class=”page-title”><?php echo $catname; ?>一覧</h1>
    <?php if(have_posts()): ?>
      <?php while(have_posts()):the_post(); ?>
        <article>
          <h2 class=”article-title”>
            <a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a>
          </h2>
          <ul class=”meta”>
            <li><?php the_time(‘Y/m/d’); ?></li>
          </ul>
          <a href=”<?php the_permalink(); ?>”><?php the_post_thumbnail(); ?></a>
          <div class=”text”>
            <?php
              if (mb_strlen(strip_tags(get_the_content()), ‘UTF-8’) > 80) {
                $content = mb_substr(strip_tags(get_the_content()), 0, 80, ‘UTF-8’);
                echo $content . ‘…’;
              } else {
                echo strip_tags(get_the_content());
              }
            ?>
          </div>
          <div class=”readmore”><a href=”<?php the_permalink(); ?>”>READ MORE</a></div>
        </article>
      <?php endwhile; ?>
      <?php
        if (function_exists(“pagination”)) {
          pagination($wp_query->max_num_pages);
        }
      ?>
    <?php endif; ?>
  </main>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

基本的な記述コードは「index.php」と同じです。
カテゴリ一覧はページのタイトルにカテゴリー名を表示し、記事一覧部分のカテゴリー名は必要ないので削除しておきましょう。

CSSのコーディング

上記のコーディングが終了したら、カテゴリタイトル部分のCSSに「style.css」を追記しておきましょう。

style.css

main .page-title {
  border-bottom: solid 1px #777;
  font-size: 1.75rem;
  padding-bottom: 10px;
  margin-bottom: 60px;
}

上記のコーディングが終了したらカテゴリーページが完成します。

まとめ

今回はWordPressオリジナルテーマのカテゴリーページの制作手順を解説しました。

カテゴリーページは、特定したカテゴリーだけを一覧表示できる便利な機能です。
「このカテゴリーは絶対見て欲しい」など、思い入れがあるカテゴリーがある場合には、カテゴリーページ制作をお勧めします。

次回は、Wordpressオリジナルテーマの「カスタム投稿」の制作手順を解説します。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次