質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3439閲覧

同一ページでスラッグ毎タブで分けた場合のそれぞれ対応したページネーションの作り方

raidomaru

総合スコア106

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/06/10 05:52

編集2016/06/10 09:33

###前提・実現したいこと
category.phpに投稿一覧を作成しています。
タブで内容を切り替えるようにしていて下記の構成です。
・全一覧
・該当スラッグその1
・該当スラッグその2

問題1
記事の出し分けはできたのですが、ページネーションの紐付けがうまくできません。
一覧のタブの2ページ目に行くとその他のものも2ページ目に入ってしまいます。

問題2
ページ遷移をする際に開いていたタブをキープしたままページ遷移をするようにしたいです。

問題3
投稿記事内のaタグがぺージネーション内にも複製されてしまいます。

###該当のソースコード
category.php

php

1 <div class="tabwrap"> 2 <div class="tabSet"> 3 <ul class="tabs clrFix"> 4 <li id="newstab"><a href="#panel1-1" class="on" style="display: inline-block;"> 5 <h3> 6 <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/newslist_ico_01_on.png" class="ico on"> 7 <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/newslist_ico_01_off.png" class="ico off" style="display:none;">一覧</h3></a></li> 8 <li id="schooltab" class="center"><a href="#panel1-2" class="" style="display: inline-block;"> 9 <h3> 10 <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/newslist_ico_02_on.png" class="ico on" style="display:none;"> 11 <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/newslist_ico_02_off.png" class="ico off">その1</h3></a></li> 12 <li id="salontab"><a href="#panel1-3" class="" style="display: inline-block;"> 13 <h3> 14 <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/newslist_ico_03_on.png" class="ico on" style="display:none;"> 15 <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/newslist_ico_03_off.png" class="ico off">その2</h3></a></li> 16 </ul> 17 <div class="panels"> 18 <div class="panel" id="panel1-1" style="display: block;"> 19 20<?php if(have_posts()): ?> 21 <?php while(have_posts()): ?> 22 <?php the_post(); ?> 23 24 <div class="content"> 25 <p class="date"><?php the_time('Y/m/d'); ?></p> 26 <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4> 27 <p class="text"><a href="<?php the_permalink(); ?>"><?php echo mb_substr($post->post_content,0, 100).'...';?></a></p> 28 </div> 29 30 <?php endwhile; ?> 31<?php endif; ?> 32 <ul class="page clrFix"> 33<?php wp_pagination(); ?> 34 </ul> 35 </div> 36 <div class="panel" id="panel1-2" style="display: none;"> 37 38<?php query_posts("cat=3&paged=".$paged); ?> 39<?php if(have_posts()): ?> 40 <?php while(have_posts()): ?> 41 <?php the_post(); ?> 42 43 <div class="content"> 44 <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/top_news_03.png" class="newstag"> 45 <p class="date"><?php the_time('Y/m/d'); ?></p> 46 <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4> 47 <p class="text"><a href="<?php the_permalink();?>"><?php echo mb_substr($post->post_content,0, 100).'...';?></p> 48 </div> 49 50 <?php endwhile; ?> 51<?php endif; ?> 52 <ul class="page clrFix"> 53<?php wp_pagination(); ?> 54 </ul> 55<?php wp_reset_query(); ?> 56 57 </div> 58 <div class="panel" id="panel1-3" style="display: none;"> 59 60<?php query_posts("cat=4&paged=".$paged); ?> 61<?php if(have_posts()): ?> 62 <?php while(have_posts()): ?> 63 <?php the_post(); ?> 64 65 <div class="content"> 66 <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/top_news_01.png" class="newstag"> 67 <p class="date"><?php the_time('Y/m/d'); ?></p> 68 <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4> 69 <p class="text"><a href="<?php the_permalink();?>"><?php echo mb_substr($post->post_content,0, 100).'...';?></p> 70 </div> 71 72 <?php endwhile; ?> 73<?php endif; ?> 74 <ul class="page clrFix"> 75<?php wp_pagination(); ?> 76 </ul> 77<?php wp_reset_query(); ?> 78 79 </div> 80 </div><!-- .panels --> 81 </div><!-- .tabset --> 82 83 </div><!-- .tabwrap -->

function.php

php

1<?php 2function wp_pagination() { 3 global $wp_query; 4 $big = 99999999; 5 $page_format = paginate_links( array( 6 'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ), 7 'format' => '?paged=%#%', 8 'current' => max( 1, get_query_var('paged') ), 9 'total' => $wp_query->max_num_pages, 10 'prev_next' => True, 11 'prev_text' => __('prev'), 12 'next_text' => __('next'), 13 'type' => 'array', 14 'mid_size' => '1', 15 'end_size' => '1' 16 ) ); 17 if( is_array($page_format) ) { 18 $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged'); 19 // echo '<li><span>'. $paged . ' of ' . $wp_query->max_num_pages .'</span></li>'; 20 foreach ( $page_format as $page ) { 21 echo "<li>$page</li>"; 22 } 23 } 24 wp_reset_query(); 25} 26?>

jQuery

//tab $(function(){ $('.tabSet').each(function(){ var topDiv = $(this); var anchors = topDiv.find('ul.tabs a'); var panelDivs = topDiv.find('div.panel'); var lastAnchor; var lastPanel; anchors.show(); lastAnchor = anchors.filter('.on'); lastPanel = $(lastAnchor.attr('href')); panelDivs.hide(); lastPanel.show(); anchors.click(function(event){ event.preventDefault(); var currentAnchor = $(this); var currentPanel = $(currentAnchor.attr('href')); lastAnchor.removeClass('on'); currentAnchor.addClass('on'); lastPanel.hide(); currentPanel.show(); lastAnchor = currentAnchor; lastPanel = currentPanel; }); }); }); //newslisttabの画像切り替え $(function(){ $('#newstab').click(function(){ $('#newstab .on').show(); $('#newstab .off').hide(); $('#schooltab .on').hide(); $('#schooltab .off').show(); $('#salontab .on').hide(); $('#salontab .off').show(); }); }); $(function(){ $('#schooltab').click(function(){ $('#newstab .on').hide(); $('#newstab .off').show(); $('#schooltab .on').show(); $('#schooltab .off').hide(); $('#salontab .on').hide(); $('#salontab .off').show(); }); }); $(function(){ $('#salontab').click(function(){ $('#newstab .on').hide(); $('#newstab .off').show(); $('#schooltab .on').hide(); $('#schooltab .off').show(); $('#salontab .on').show(); $('#salontab .off').hide(); }); });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

https://github.com/tsuyoshiwebcake/jq-plugin-tab-pager

こちらを利用しました。
ありがとうございます。

投稿2016/06/11 06:54

raidomaru

総合スコア106

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問