Q&A
タグに「WordPress」を追加すると、詳しい人に見てもらえる確率が高まります。
実現したいこと
目的: ページ内のタブのカテゴリー切り替えをした際に、それぞれのカテゴリーにて1ページ目にリセットされるようにしたい。
発生している問題
現在カテゴリー一覧ページ(page-categories.php)内にてタブのカテゴリー切り替えで記事が切り替わるようにしています、その際にページネーションでページを変えた後(3ページ目など)、他のカテゴリーに切り替えると3ページ分もまだないカテゴリーの記事が何も表示されない状態になってしまいます。どうすれば良いでしょうか？
１）現在、ページネーションにてページ数を変更後に別のカテゴリーへ切り替えると、元のページ番号が維持されたまま切り替えが行われている。
２）このため、切り替えた先のカテゴリーに該当するページ番号の記事が存在しない場合、何も表示されない状態になってしまう。
３）カテゴリーを切り替えた場合、常に1ページ目にリセットされるようにしたい。
該当のソースコード
php
1```lang-php 2<!-- ここにカテゴリータグ表示 --> 3 <ul class="p-category-news__category-list"> 4 <li class="p-category-news__category-item current" data-category="category_fun">あそび</li> 5 <li class="p-category-news__category-item" data-category="category_gourmet">ぐるめ</li> 6 <li class="p-category-news__category-item" data-category="category_web">うぇぶ</li> 7 <li class="p-category-news__category-item" data-category="category_fun">たび</li> 8 </ul> 9 <!-- ここにカテゴリータグ表示 --> 10 <!-- あそびタグ選択時の記事出力 --> 11 <div class="tab-contents tab-list show"> 12 <ul class="p-category-news__article-list p-page-category-news-main__article-list"> 13 <!-- 引用コード --><!-- 引用コード --> 14 <!-- ページネーション用 --> 15 <?php 16 $paged = (get_query_var('paged')) ? get_query_var('paged'): 1; 17 $args = array( 18 'post_type' => 'post', 19 'category_name' => 'category_fun', //特定のカテゴリースラッグを指定 20 'posts_per_page' => 5, 21 'paged' => $paged, 22 ); 23 $the_query = new WP_Query($args); 24 ?> 25 <!-- ページネーション用 --> 26 <!-- ここにHTMLやPHPを記述 --> 27 <!-- ページネーション用 --> 28 <?php if($the_query->have_posts()):?> 29 <?php while($the_query->have_posts()):?> 30 <?php $the_query->the_post();?> 31 <!-- ページネーション用 --> 32 <li class="p-category-news__article-item"> 33 <a href="<?php the_permalink(); ?>?origin=categories" class="c-category-article"> 34 <div class="c-category-article__img-wrapper"> 35 <?php 36 $categories = get_the_category(); 37 foreach ($categories as $category) { 38 $this_category_color = get_field('category_color', 'category_' . $category->term_id); $this_category_name = $category->name; 39 echo '<p class="c-category-article__category" style="' . esc_attr('background-color:' . $this_category_color) . ';">' . esc_html($this_category_name) . '</p>'; 40 } 41 ?> 42 <div class="c-category-article__img"> 43 <?php 44 // サムネイルがある場合に表示する 45 if (has_post_thumbnail()) { 46 // サムネイルを表示する（デフォルトのサイズ） 47 the_post_thumbnail(array(227, 132)); 48 } else { 49 echo '<img src="' . get_template_directory_uri() . '/assets/images/c-article10.JPG" alt="デフォルト画像" width="227" height="170">'; 50 } 51 ?> 52 </div> 53 </div> 54 <div class="c-category-article__main"> 55 <div class="c-category-article__main-wrapper"> 56 <h3 class="c-category-article__title"><?php the_title();?></h3> 57 <time class="c-category-article__time" datetime="<?php the_time('Y/m/d'); ?>"><?php the_time("Y/m/d");?></time> 58 </div> 59 <p class="c-category-article__text"><?php the_excerpt();?></p> 60 </div> 61 </a> 62 </li> 63 <?php endwhile;?> 64 <?php endif;?> 65 </ul> 66 <div class="p-page-category-news__pagination"> 67 <div class="c-pagination"> 68 <div class="c-pagination__container"> 69 <?php 70 if ($the_query->max_num_pages > 1) { 71 echo paginate_links(array( 72 'total' => $the_query->max_num_pages, 73 'end_size' => 2, 74 'mid_size' => 1, 75 'prev_next' => true, 76 'prev_text' => '', 77 'next_text' => '', 78 )); 79 } 80 ?> 81 </div> 82 </div> 83 </div> 84 <!-- ページネーション用 --> 85 </div> 86//下記同じ記述が3つ(ぐるめ、うぇぶ、たび)繰り返し//
```JavaScript ```lang-JavaScript jQuery(function(){ $('.p-category-news__category-item').on('click', function(){ var index = $('.p-category-news__category-item').index(this); $('.p-category-news__category-item').removeClass('current'); $(this).addClass('current'); $('.tab-contents.tab-list.show').removeClass('show'); $('.tab-contents.tab-list').eq(index).addClass('show'); }); });
```scss ```lang-scss .p-category-news { } .p-category-news__wrapper { } .p-category-news__category-list { margin-top: myrem(33); display: flex; justify-content: center; align-items: center; column-gap: myrem(40); @include mq(md) { margin-top: myrem(20); display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); width: myrem(185); margin-inline: auto; row-gap: myrem(5); } } .p-category-news__article-item:nth-child(n+4) { display: none; } .p-category-news__category-item.current::before { content: ""; display: block; background-color: #5426D9; width: 8px; height: 8px; border-radius: 50%; position: absolute; top: myrem(-10); left: 50%; transform: translateX(-50%, -100%); @include mq(md) { left: myrem(-10); top: 50%; transform: translate(-100%, -50%); } } .p-category-news__category-item { font-size: myrem(20); //カンプは22px(調整) font-family: $font-main; font-weight: 400; line-height: calc(33 / 20); position: relative; @include mq(md) { font-size: myrem(16); } } .p-category-news__category-item:hover { cursor: pointer; } .p-category-news__article-list { margin-top: myrem(50); background-color: $white; width: calc(800 / 1024 * 100%); margin-inline: auto; @include mq(md) { margin-top: myrem(40); width: calc(320 / 335 * 100%); max-width: myrem(400); } } .p-category-news__article-item { border-top: solid 1px #000; padding: myrem(25) myrem(23) myrem(18); @include mq(md) { padding: myrem(30) myrem(20); } } .p-category-news__article-item:last-child { border-bottom: solid 1px #000; } .p-category-news__btn { text-align: center; margin-top: myrem(40); @include mq(md) { margin-top: myrem(30); } } .tab-list { display: none; opacity: 0; transition: opacity 0.3s ease-in-out; /* アニメーション */ } .tab-list.show{ display: block; transition: .3s; opacity: 1; }
### 試したこと・調べたこと - [x] teratailやGoogle等で検索した - [x] ソースコードを自分なりに変更した ##### 上記の詳細・結果 ページ内でのカテゴリー切り替えと連動した記事出力についてはGoogle検索などで上手く実装できたのですが、それに伴ったページネーションの実装などは独自のものなので検索しようがなくこちらにて質問させて頂きたく思いました。 ChatGPTで何度も質問したが納得いく答えが出ず、クエリパラメータをリセットするという方法までは導き出せたが解決されずの状態です。 どなたかご教授いただけると幸いです。 ChatGPTの解答例は下記になります ```lang-JavaScript jQuery(function() { $('.p-category-news__category-item').on('click', function() { var index = $('.p-category-news__category-item').index(this); // カテゴリータブの切り替え $('.p-category-news__category-item').removeClass('current'); $(this).addClass('current'); $('.tab-contents.tab-list.show').removeClass('show'); $('.tab-contents.tab-list').eq(index).addClass('show'); // ページ番号をリセット var baseUrl = window.location.href.split('?')[0]; // 現在のURLからパラメータを削除 window.location.href = baseUrl + '?page=1'; // ページ番号を1にリセットしてリロード }); });
lang
1<?php 2$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; // 現在のページ番号を取得（デフォルト1） 3$args = array( 4 'post_type' => 'post', // 投稿タイプ 5 'posts_per_page' => 3, // 1ページあたりの投稿数 6 'paged' => $paged, // ページ番号 7 'category_name' => '指定するカテゴリーのスラッグ', // カテゴリー指定 8); 9$the_query = new WP_Query($args); 10if ($the_query->have_posts()) : 11 while ($the_query->have_posts()) : $the_query->the_post(); 12 // 投稿の表示部分 13 endwhile; 14endif; 15// ページネーション 16if ($the_query->max_num_pages > 1) { 17 echo paginate_links(array( 18 'total' => $the_query->max_num_pages, 19 'current' => $paged, 20 'end_size' => 2, 21 'mid_size' => 1, 22 'prev_next' => true, 23 'prev_text' => '', 24 'next_text' => '', 25 )); 26} 27?>
回答1件
0
アクティブなカテゴリ以外はpagedパラメータを1固定にすればよいと思います。
PHP
1$args = array( 2 'post_type' => 'post', 3 'category_name' => 'xxx', //特定のカテゴリースラッグを指定 4 'posts_per_page' => 5, 5 'paged' => 1, 6);
投稿2024/12/20 06:22
総合スコア2493
回答有難うございます、アクティブなカテゴリのみ
```lang-php
$args = array(
'post_type' => 'post',
'category_name' => 'xxx', //特定のカテゴリースラッグを指定
'posts_per_page' => 5,
'paged' => $paged,
);
```
にしそれ以外を
```lang-php
$args = array(
'post_type' => 'post',
'category_name' => 'xxx', //特定のカテゴリースラッグを指定
'posts_per_page' => 5,
'paged' => 1,
);
```
にしてやってみましたが挙動は変わらずでした。
アクティブなカテゴリと非アクティブなカテゴリはどのように判定していますか？
あなたの回答
tips
プレビュー
