WordPress｜カテゴリーアーカイブとページネーションの作り方｜category.php

href="<?php echo esc_url(home_url('/')); ?>categoly_slug"

href="<?php echo esc_url(home_url('/')); ?>news"

/%category%/%post_id%.html

<!-- カテゴリーページのタイトルタグ：カテゴリ名が自動的に入る -->
<h1>カテゴリー：『<?php single_cat_title(); ?>』の記事一覧</h1>

<ul class="###">
  <?php
  // ページ番号取得
  $paged = get_query_var('paged') ? get_query_var('paged') : 1;
  $cat = get_category(get_query_var('cat'));
  $args = array(
    'post_type' => array('post'), // 投稿タイプのスラッグ
    'paged' => $paged, // 何ページ目の情報を取得するかを指定
    'posts_per_page' => 3, // 表示件数
    'category_name' => $cat->slug, // カテゴリースラッグ
  );
  $the_query = new WP_Query($args);
  //ここからカテゴリー記事のループ
  if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>
      <li class="hoge">
        <!-- 記事パーマリンク -->
        <a href="<?php the_permalink(); ?>" class="li-a">
          <!-- サムネイル表示 -->
          <div class="hoge">
            <?php if (has_post_thumbnail()) : ?>
              <!-- 投稿画面で設定したサムネイル画像 -->
              <?php the_post_thumbnail(); ?>    
            <?php else : ?>
              <!-- 投稿画面でサムネ未設定の場合に表示される画像 -->
              <img src="<?php echo esc_url(get_template_directory_uri() . '/image/default-thumbnail.jpg'); ?>" alt="都会の夜景" class="default-thumbnail">
            <?php endif; ?>
          </div>
          <!-- テキスト区画 -->
          <div class="hoge">
            <div class="hoge">
              <!-- 記事タイトル表示 -->
              <h2 class=""><?php the_title(); ?></h2>
              <!-- 投稿日表示 -->
              <div class="hoge"><?php the_time('Y年n月j日') ?></div>
            </div>
          </div>
        </a>
      </li>
    <?php endwhile; ?>
  <?php else : ?>
    <p>投稿がありませんでした。</p>
  <?php endif; ?>
  <?php wp_reset_postdata(); ?>

</ul>

<!-- ページネーション全体 -->
<div class="post-pagination-wrapper">
  <?php
  $args = array(
    'type' => 'list',
    'current' => $paged,
    'total' => $the_query->max_num_pages,
    'prev_text' => '<',
    'next_text' => '>',
  );
  echo paginate_links($args);
  ?>
</div>

<!-- カテゴリーページのタイトルタグ：カテゴリ名が自動的に入る -->
<h1 class="hogehoge">カテゴリー：「<?php single_cat_title(); ?>」の記事一覧</h1>

<!-- ループの基本設定 -->
<ul class="###">
  <?php
  // ページ番号取得
  $paged = get_query_var('paged') ? get_query_var('paged') : 1;
  $cat = get_category(get_query_var('cat'));
  $args = array(
    'post_type' => array('post'), // 投稿タイプのスラッグ
    'paged' => $paged, // 何ページ目の情報を取得するかを指定
    'posts_per_page' => 3, // 表示件数
    'category_name' => $cat->slug, // カテゴリースラッグ
  );
  $the_query = new WP_Query($args);
  //ここからカテゴリー記事のループ
  if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>

<!-- 記事パーマリンク -->
<a href="<?php the_permalink(); ?>" class="li-a">

<!-- サムネイル区画 -->
<div class="hogehoge">
  <?php
  if (has_post_thumbnail()) {
    the_post_thumbnail('medium');
  } else {
    // サムネイルが指定されていない場合のデフォルトのサムネイル用画像の指定
    echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/hogehoge"  alt="">';
  }
  ?>
</div>

<!-- テキスト区画 -->
<div class="hogehoge">
  <div class="hogehoge">
    <!-- 記事タイトル表示 -->
    <h2 class="hogehoge"><?php the_title(); ?></h2>
    <!-- 投稿日表示 -->
    <div class="hogehoge"><?php the_time('Y年n月j日') ?></div>
  </div>
 </div>

<!-- ページネーション全体 -->
<div class="post-pagination-wrapper">
  <?php
  $args = array(
    'type' => 'list',
    'current' => $paged,
    'total' => $the_query->max_num_pages,
    'prev_text' => '<',
    'next_text' => '>',
  );
  echo paginate_links($args);
  ?>
</div>

// =================================================================
// カテゴリーアーカイブのページネーション設定
// =================================================================
function change_pre_get_posts($query){
  if(!is_admin() && $query->is_main_query()){
    if(is_category()){
      $query->set('posts_per_page', 1);
    }
  }
}
add_action('pre_get_posts', 'change_pre_get_posts');