【Wordpress】カスタム投稿タイプとそのカテゴリそれぞれのページを作ってページネーションをつける
かなり久々にWordpressをやったら案の定いろいろと忘れていたので書いておく。
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/