【HTMLサイトをWordPress化しよう】⑧カテゴリ一覧編

最終更新日2026.01.19

HTMLサイトをWordPress化しよう

HTMLのコーディングスキルだけでも案件はとれます。

大事なのはスキルの幅ではなく経験と実績です。未経験から実務で “通用する人としない人の違い” をまとめた無料メール講座を用意しました。

さらに、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。

無料でメール講座を受け取る

Products一覧ページを作成します。

Products一覧はWordPressのカテゴリ一覧として表示します。

category.phpの作成

テーマディレクトリの直下に、カテゴリ一覧を表示するためのテンプレートファイル「category.php」を作成します。

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

category.phpのコーディング

新規にコーディングしていきます。

コードは下記の通りです。

    category.php
    
<?php get_header(); ?>

<main>
  <div class="content wrapper">
    <?php
      $cat = get_the_category();
      $catname = $cat[0]->cat_name;
    ?>
    <h1 class="page-title"><?php echo $catname; ?></h1>
    <ul class="product-list">
      <?php if(have_posts()): ?>
        <?php while(have_posts()):the_post(); ?>
          <li>
            <a href="<?php the_permalink(); ?>">
              <img src="<?php the_post_thumbnail_url('full'); ?>" alt="">
              <p><?php the_title(); ?></p>
              <p>&yen;<?php echo esc_html(get_post_meta($post->ID, 'price', true)); ?> +tax</p>
            </a>
          </li>
        <?php endwhile; ?>
      <?php endif; ?>
    </ul>
  </div>
</main>

<?php get_footer(); ?>

解説していきます。

カテゴリ名の取得

      
$cat = get_the_category();
$catname = $cat[0]->cat_name;

ページタイトルに表示するカテゴリ名を取得します。
「get_the_category」でカテゴリ情報を取得し、「$cat[0]->cat_name」で、カテゴリ情報の中からカテゴリ名だけを取得します。

データの取得

      
while(have_posts()):the_post();

データを1件づつ取得します。

各値を取得・表示

the_permalink(): 記事のパーマリンクを表示します。
the_post_thumbnail_url(): 記事のアイキャッチを表示します。
the_title(): 記事のタイトルを表示します。
get_post_meta(): カスタムフィールドの値を取得します。

ページネーションの作成

一覧ページのコーディングが完了しましたが、このままでは全ての投稿記事が1ページに表示されてしまうので、ページを切り替えるためのページネーションを作成します。

ページネーションについては、下記の記事を参考に、「functions.php」にコードを追加していきます。

【WordPressでオリジナルサイトを作ろう】⑩ページネーション編

ページネーションの機能が作成できたら、「category.php」からその機能を呼び出します。

追加するのは、「category.php」の下記の場所です。

    category.php
    
    <?php
      if (function_exists("pagination")) {
        pagination($wp_query->max_num_pages);
      }
    ?>
  </div>
</main>

ページネーションのコーディングは完了です。
それでは、Products一覧の表示確認を行いましょう。