【WordPress】各カテゴリーの一覧ページを表示する

2024年1月15日

各カテゴリーの一覧ページを表示させたいなぁ･･･

というわけで今回はWordPressで各カテゴリーごとの一覧ページを表示させる方法についてです。
イメージとしては、デフォルト投稿でカテゴリー分けした記事の一覧を、カテゴリーごとに
表示させたい！という感じです。

カテゴリーの一覧を表示する

今回、各カテゴリーの一覧のリンクを取得するには「get_category_link()」を使用します。
（）内に各カテゴリーのIDやオブジェクトを指定することで、各一覧を取得する感じですね。

カテゴリーごとのIDを取得する

では「get_category_link()」の（）内のIDを取得しましょう。
カテゴリーのIDは数字ベタ打ちでもいけますが、プログラミングらしく
取得して表示させてみましょう！！

ここでは「get_category_by_slug()」を使用します。
「get_category_by_slug()」はカテゴリー情報を取得することができます。
（）内にはカテゴリーのスラッグを入れます。

今回は「build」と「reform」というスラッグを使用しております。

<?php 
        $category_build = get_category_by_slug('build');
        $category_reform = get_category_by_slug('reform');
        $category_build_link = get_category_link($category_build->term_id);
        $category_reform_link = get_category_link($category_reform->term_id);
?>

「get_category_by_slug()」で取得できる情報はこちら↓

プロパティ名	データ型	取得情報
term_id	int	カテゴリーID
name	string	カテゴリー名
slug	string	スラッグ
term_group	int	グループID
term_taxonomy_id	int	タクソノミーID
taxonomy	string	タクソノミー名。カテゴリーの場合は必ず”category”となる
description	string	説明
parent	int	親カテゴリーID。親カテゴリーがない場合は0を返す
count	int	投稿数

などなど。
今回はカテゴリーIDを取得したいので、「term_id」の情報を取得します。
「build」のスラッグ情報だけのコードを再記載すると↓

$category_build = get_category_by_slug('build');
$category_build_link = get_category_link($category_build->term_id);

まず「get_category_by_slug(‘build’)」で取得した情報を「$category_build」に格納します。
そして、「$category_build -> term_id」でカテゴリーIDを取得して「get_category_link()」の（）内に入れ
カテゴリー一覧のリンクを取得することができます。

<li><a href="<?php echo esc_url($category_build_link); ?>" class="small">建築実績</a></li>

これでリンクの完成ですね！！

カテゴリー一覧ページを整える

さあ、続いてカテゴリー一覧ページを整えていきましょう。
今回は「category.php」で「build」と「reform」それぞれのカテゴリー一覧を表示します。
今回のカテゴリーページで実装したい内容は、

・「build」「reform」それぞれのカテゴリーページを「category.php」で表示する
・ページネーションを実装する
・投稿記事がない場合は何も表示させない

こんな感じです。
では、さっそくコードを紹介します。

<ul class="achi02">
 <?php $cat = get_the_category(); ?>
 <?php if($cat) : ?>
  <?php $cat = $cat[0]; ?>
 <?php else : ?>
  <?php $cat = get_queried_object(); ?>
 <?php endif; ?>
  <?php 
    $paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
    $args = array(
    'post_type' => 'post',
    'posts_per_page' => 12,
    'category_name' => $cat->slug,
    'paged' => $paged,
    );
  ?>
  <?php $the_query = new WP_Query($args); ?>
  <?php if($the_query->have_posts()): ?>
    <?php while($the_query->have_posts()): $the_query->the_post(); ?>
      <li>
        <span><?php echo $cat->cat_name; ?></span>
          <?php if (has_post_thumbnail()) : ?>
            <?php the_post_thumbnail(); ?>
          <?php else : ?>
            <img src="<?php echo esc_url(get_theme_file_uri('images/logo.png')); ?>" alt="デフォルト画像">
          <?php endif; ?>
        <h3><?php the_title(); ?></h3>
        <p><?php the_content(); ?></p>
      </li>
    <?php endwhile; ?>
  <?php endif; ?>
</ul>
<?php
  $big = 999999999; // need an unlikely integer
  $paged = max(get_query_var('paged',1),1);
  $args = array(
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'total' => $the_query->max_num_pages /*全ページ数 */ ,
    'current' =>  $paged/*現在のページ数*/,
    'show_all' => FALSE,
    'end_size' => 1,
    'mid_size' => 2,
    'prev_next' => FALSE,
    'type' => 'array',
  );
  $navs = paginate_links($args);
?>
<?php if($navs) : ?>
  <div class="pager">
    <ul class="pagination">
      <?php if($paged > 1) : ?>
        <li class="pre">
          <?php previous_posts_link('<span>' . "«" . '</span>'); ?>
        </li>
      <?php endif; ?>
      <?php
        $i = 1;
        foreach($navs as $nav) :
      ?>
        <li class="<?php if($paged == $i) : ?>active<?php endif;?>">
          <?php echo '<span>' . $nav . '</span>'?>
        </li>
      <?php $i++; endforeach; ?>
      <?php if($paged < $the_query->max_num_pages) : ?>
        <li class="next">
          <?php next_posts_link('<span>' . "»" . '</span>')?>
        </li>
      <?php endif; ?>  
    </ul>
  </div>
<?php endif; ?>

では抜粋して説明します。

投稿記事がない場合は表示させない

<?php $cat = get_the_category(); ?>
<?php if($cat) : ?>
  <?php $cat = $cat[0]; ?>
<?php else : ?>
  <?php $cat = get_queried_object(); ?>
<?php endif; ?>

まず「get_the_category()」でカテゴリー情報を取得して「$cat」に代入します。
続いて「if」を使って条件分岐させます。
$catに値が入ってる場合は、「$cat = $cat[0]」を表示させます。
$catには配列で値が入っているので、$cat[0]を指定してどの配列かを指定する感じですね。

このページは既にそれぞれのリンク（「build」「reform」）を指定しているので
「get_the_category()」で取得する内容は「build」「reform」それぞれの情報になります。
ただし、配列になっているので「$cat = $cat[0]」を指定するんですね。

配列の場合は情報が一つでもどの配列かを指定する必要があるんですね

そして「<?php else : ?>」以下。
もし「$cat」が空だったら？の条件分岐です。
「<?php $cat = get_queried_object(); ?>」でそのページに応じたオブジェクト情報を取得します。
「get_queried_object();」の良い所は、カテゴリーが登録されていればそのカテゴリーが
記事に付けられてなくても、そのカテゴリー情報を取得することができます。

この記述をしないと、カテゴリー記事が登録されていない場合、
ページにphpエラーが出てしまいます。

サブループ用の情報を取得する

<?php 
    $paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
    $args = array(
    'post_type' => 'post',
    'posts_per_page' => 12,
    'category_name' => $cat->slug,
    'paged' => $paged,
    );
  ?>

ここでのポイントは「’category_name’ => $cat->slug」ですね。
「$cat->slug」でこのループのカテゴリーを指定しています。
「$paged = ( get_query_var( ‘paged’ ) ) ? absint( get_query_var( ‘paged’ ) ) : 1;」と
「’paged’ => $paged,」はページネーション用の記述です。

サブループ用のページネーション情報を取得する

<?php
  $big = 999999999; // need an unlikely integer
  $paged = max(get_query_var('paged',1),1);
  $args = array(
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'total' => $the_query->max_num_pages /*全ページ数 */ ,
    'current' =>  $paged/*現在のページ数*/,
    'show_all' => FALSE,
    'end_size' => 1,
    'mid_size' => 2,
    'prev_next' => FALSE,
    'type' => 'array',
  );
  $navs = paginate_links($args);
?>

忘れがちなのは「’total’」のところ、 「$the_query->max_num_pages」です。
「$the_query」にサブループの情報を代入しているのでここの変更を忘れずに！！