実現したいこと
カテゴリー別にタブで切り替え表示させ、それぞれのカテゴリーにページネーションも付けたい。
前提
【例】こういうタブメニューがあり、同一ページ内でカテゴリー記事一覧を切り替え、ページネーションも付けたい。
■カテゴリー１(全てのカテゴリ表示)、■カテゴリー２(works表示)、■カテゴリー３(info表示)
発生している問題・エラーメッセージ
JavaScriptで切り替え表示までは実現出来てるのですが、ページネーションがカテゴリー１(全件表示)のものしか実装できない。
同一ページ(home.php)にカテゴリー別のページネーションを実装したいのですが、どんな実装法がありますでしょうか？
該当のソースコード
【Wordpress】オリジナルテーマ制作のhome.php内のコードです。
php
1<?php get_header(); ?>2 3<!-- ページヘッダー -->4<div class="page_header">5 <img src="<?php echo get_theme_file_uri('./assets/images/top/page_header.png'); ?>" alt="ヘッダー画像" />6 <div class="section_title page">7 <h2 class="gradient">News</h2>8 <span>ニュース</span>9 </div>10</div>11 12<section class="home">13 <div class="home_container">14 <div class="home_tab_wrap">15 <ul class="home_tab">16 <li class="home_tab_menu js_tab current">ALL</li>17 <li class="home_tab_menu js_tab">Information</li>18 <li class="home_tab_menu js_tab">Press Release</li>19 <li class="home_tab_menu js_tab">Global Portal </li>20 <li class="home_tab_menu js_tab">Works</li>21 </ul>22 </div>23 24 <!-- ALL -->25 <div class="js_sort js_content active">26 <div class="home_article_sort">27 <?php if (have_posts()) : ?>28 <?php while (have_posts()) : the_post(); ?>29 <article class="home_article_content">30 <a href="<?php the_permalink(); ?>">31 <div class="home_article_image">32 <!-- サムネイル画像 -->33 <?php if (has_post_thumbnail()) : ?>34 <?php the_post_thumbnail(); ?>35 <?php else : ?>36 <!-- 無ければ NO IMAGE -->37 <img src="<?php echo get_template_directory_uri(); ?>/assets/images/service/no_image.png" alt="">38 <?php endif; ?>39 </div>40 <div class="home_article_header">41 <time datetime="<?php echo get_the_date('Y.m.d') ?>" class="home_article_date"><?php echo get_the_date('Y.m.d') ?></time>42 <span class="home_article_category">43 <?php44 $category = get_the_category();45 $cat_name = $category[0]->cat_name; ?>46 <?php echo $cat_name; ?>47 </span>48 </div>49 <div class="home_article_title"><?php the_title(); ?></div>50 </a>51 </article>52 <?php endwhile; ?>53 <?php endif; ?>54 </div>55 </div>56 57 <!-- Information -->58 <div class="js_sort js_content">59 <div class="home_article_sort">60 <?php61 $args = [62 'post_type' => 'post', // 投稿タイプのスラッグ(通常投稿は'post')63 'posts_per_page' => 9, // 表示件数64 'category_name' => 'information', // カテゴリー指定65 ];66 $the_query = new WP_Query($args);67 ?>68 <?php if ($the_query->have_posts()) : ?>69 <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>70 <article class="home_article_content">71 <a href="<?php the_permalink(); ?>">72 <div class="home_article_image">73 <!-- サムネイル画像 -->74 <?php if (has_post_thumbnail()) : ?>75 <?php the_post_thumbnail(); ?>76 <?php else : ?>77 <!-- 無ければ NO IMAGE -->78 <img src="<?php echo get_template_directory_uri(); ?>/assets/images/service/no_image.png" alt="">79 <?php endif; ?>80 </div>81 <div class="home_article_header">82 <time datetime="<?php echo get_the_date('Y.m.d') ?>" class="home_article_date"><?php echo get_the_date('Y.m.d') ?></time>83 <span class="home_article_category">84 <?php85 $category = get_the_category();86 $cat_name = $category[0]->cat_name; ?>87 <?php echo $cat_name; ?>88 </span>89 </div>90 <div class="home_article_title"><?php the_title(); ?></div>91 </a>92 </article>93 <?php endwhile; ?>94 <?php wp_reset_postdata(); ?>95 <?php endif; ?>96 </div>97 </div>98 99 <!-- Press Release -->100 <div class="js_sort js_content">101 <div class="home_article_sort">102 <?php103 $args = [104 'post_type' => 'post', // 投稿タイプのスラッグ(通常投稿は'post')105 'posts_per_page' => 9, // 表示件数106 'category_name' => 'pressrelease', // カテゴリー指定107 ];108 $the_query = new WP_Query($args);109 ?>110 <?php if ($the_query->have_posts()) : ?>111 <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>112 <article class="home_article_content">113 <a href="<?php the_permalink(); ?>">114 <div class="home_article_image">115 <!-- サムネイル画像 -->116 <?php if (has_post_thumbnail()) : ?>117 <?php the_post_thumbnail(); ?>118 <?php else : ?>119 <!-- 無ければ NO IMAGE -->120 <img src="<?php echo get_template_directory_uri(); ?>/assets/images/service/no_image.png" alt="">121 <?php endif; ?>122 </div>123 <div class="home_article_header">124 <time datetime="<?php echo get_the_date('Y.m.d') ?>" class="home_article_date"><?php echo get_the_date('Y.m.d') ?></time>125 <span class="home_article_category">126 <?php127 $category = get_the_category();128 $cat_name = $category[0]->cat_name; ?>129 <?php echo $cat_name; ?>130 </span>131 </div>132 <div class="home_article_title"><?php the_title(); ?></div>133 </a>134 </article>135 <?php endwhile; ?>136 <?php wp_reset_postdata(); ?>137 <?php endif; ?>138 </div>139 </div>140 141 <!-- Global Portal -->142 <div class="js_sort js_content">143 <div class="home_article_sort">144 <?php145 $args = [146 'post_type' => 'post', // 投稿タイプのスラッグ(通常投稿は'post')147 'posts_per_page' => 9, // 表示件数148 'category_name' => 'globalportal', // カテゴリー指定149 ];150 $the_query = new WP_Query($args);151 ?>152 <?php if ($the_query->have_posts()) : ?>153 <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>154 <article class="home_article_content">155 <a href="<?php the_permalink(); ?>">156 <div class="home_article_image">157 <!-- サムネイル画像 -->158 <?php if (has_post_thumbnail()) : ?>159 <?php the_post_thumbnail(); ?>160 <?php else : ?>161 <!-- 無ければ NO IMAGE -->162 <img src="<?php echo get_template_directory_uri(); ?>/assets/images/service/no_image.png" alt="">163 <?php endif; ?>164 </div>165 <div class="home_article_header">166 <time datetime="<?php echo get_the_date('Y.m.d') ?>" class="home_article_date"><?php echo get_the_date('Y.m.d') ?></time>167 <span class="home_article_category">168 <?php169 $category = get_the_category();170 $cat_name = $category[0]->cat_name; ?>171 <?php echo $cat_name; ?>172 </span>173 </div>174 <div class="home_article_title"><?php the_title(); ?></div>175 </a>176 </article>177 <?php endwhile; ?>178 <?php wp_reset_postdata(); ?>179 <?php endif; ?>180 </div>181 </div>182 183 <!-- Works -->184 <div class="js_sort js_content">185 <div class="home_article_sort">186 <?php187 $args = [188 'post_type' => 'post', // 投稿タイプのスラッグ(通常投稿は'post')189 'posts_per_page' => 9, // 表示件数190 'category_name' => 'works', // カテゴリー指定191 ];192 $the_query = new WP_Query($args);193 ?>194 <?php if ($the_query->have_posts()) : ?>195 <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>196 197 <article class="home_article_content">198 <a href="<?php the_permalink(); ?>">199 <div class="home_article_image">200 <!-- サムネイル画像 -->201 <?php if (has_post_thumbnail()) : ?>202 <?php the_post_thumbnail(); ?>203 <?php else : ?>204 <!-- 無ければ NO IMAGE -->205 <img src="<?php echo get_template_directory_uri(); ?>/assets/images/service/no_image.png" alt="">206 <?php endif; ?>207 </div>208 <div class="home_article_header">209 <time datetime="<?php echo get_the_date('Y.m.d') ?>" class="home_article_date"><?php echo get_the_date('Y.m.d') ?></time>210 <span class="home_article_category">211 <?php212 $category = get_the_category();213 $cat_name = $category[0]->cat_name; ?>214 <?php echo $cat_name; ?>215 </span>216 </div>217 <div class="home_article_title"><?php the_title(); ?></div>218 </a>219 </article>220 <?php endwhile; ?>221 <?php wp_reset_postdata(); ?>222 <?php endif; ?>223 </div>224 </div>225 226 <div class="home_pagination">227 <?php228 $args = array(229 'mid_size' => 2,230 'prev_text' => '',231 'next_text' => '',232 'screen_reader_text' => 'ページャー'233 );234 the_posts_pagination($args);235 ?>236 </div>237 </div>238</section>239 240<?php get_footer(); ?>
試したこと
ネット記事などで沢山調べたのですが、良い方法が見つかりません。
何かアドバイスをいただけるとありがたいです。
よろしくお願いいたします。
補足情報（FW/ツールのバージョンなど）
トップページ：固定ページ(front-page.php)
投稿ページ：news(home.php)
0 コメント