チェ・ゲバムラの日記

脱犬の道を目指す男のブログ

【Wordpress】カスタム投稿タイプとそのカテゴリそれぞれのページを作ってページネーションをつける

かなり久々にWordpressをやったら案の定いろいろと忘れていたので書いておく。

1.wp-pagenaviをいれる

普通にインストール
WP-PageNavi – WordPress プラグイン | WordPress.org 日本語


2.ファイル準備

例を上げたほうがわかりやすいので書いておくと、
・news一覧ページ:archive-news.php
・newsカテゴリページ:taxonomy-news.php
の2ファイルを作成しておく。


3.それぞれのコードをコピー

・news一覧ページ:archive-news.php

      <?php
      //ページネーション設定(posts_per_pageは管理画面>表示設定の数と合わないと404エラーとなるため注意)
      $args = array(
      'paged'          => $paged,
      'post_type' => 'news',
      'posts_per_page' => 2,
      ); 
      $the_query = new WP_Query($args);
      global $wp_query;
      $tmp_query = $wp_query;//退避
      $wp_query = $the_query;

      if ($the_query->found_posts > 0) {
          if ($the_query->have_posts()) {
            ?>
            <ul class="news__area">
            <?php
              while ($the_query->have_posts()) {
                  $the_query->the_post();

                  //Advancedカスタムフィールド取得
                  $title = get_the_title();
                  $url = get_field('url');//遷移先URL
                  $date = get_field('date');//デイトピッカー
                  ?>

                  <li>
                    <span class="date"><?php echo $date; ?></span>
                    <a href="<?php echo ($url ? $url : the_ID()); ?>" class="block hover" ontouchstart="" target="<?php echo ($blank ? '_blank' : ''); ?>">
                      <span class="title"><?php echo $title; ?></span>
                    </a>
                  </li>


                  <?php
              }// end while 
            ?>
            </ul>
          <?php
          }
      } else {
          echo '申し訳ございません。該当する投稿はございません。';
      }

      wp_reset_query();
      if(function_exists('wp_pagenavi')) wp_pagenavi(array('query' => $the_query));
      ?>


・newsカテゴリページ:taxonomy-news.php

      <?php
      //ページネーション設定(posts_per_pageは管理画面>表示設定の数と合わないと404エラーとなるため注意)
      $args = array(
      'paged'          => $paged,
      'post_type' => 'news',
      'posts_per_page' => 2,
      ); 
      $cat_query = new WP_Query($args);
      ?>
        <?php if (have_posts()) :  while (have_posts()) : the_post(); ?>
        <?php
           //Advancedカスタムフィールド取得
           $title = get_the_title();
           $url = get_permalink();
           $date = get_field('date');//デイトピッカー
           ?>
           <li>
             <span class="date"><?php echo $date; ?></span>
             <a href="<?php echo $url; ?>">
	             <?php $terms = get_the_terms( get_the_ID(), 'news_cat' ); ?>
               <span class="title"><?php echo $title; ?></span>
             </a>
           </li>
        <?php endwhile; endif; ?>
      <?php
      wp_reset_query();
      if(function_exists('wp_pagenavi')) wp_pagenavi(array());
      ?>


4. 注意
コード内のコメントにも記載したが、管理画面の設定、表示設定のところで指定した数字と違うとうまく動かないので、
その点だけ注意。

アクセスするURLとしては下記のようになる。
一覧ページ
http://xxxxxxxxxx.jp/news/

タクソノミーページ
http://xxxxxxxxxx.jp/news_cat/2020/
上記の2ページ目
http://xxxxxxxxxx.jp/news_cat/2020/page/2/



参考
カスタム投稿タイプのカテゴリ別アーカイブページの作成 – クリエイター:コーディング備忘録ブログ