質問編集履歴

2 追記

tomy

tomy score 105

2016/06/10 18:33  投稿

同一ページでスラッグ毎タブで分けた場合のそれぞれ対応したページネーションの作り方
###前提・実現したいこと
category.phpに投稿一覧を作成しています。
タブで内容を切り替えるようにしていて下記の構成です。
・全一覧
・該当スラッグその1
・該当スラッグその2
問題1  
記事の出し分けはできたのですが、ページネーションの紐付けがうまくできません。
一覧のタブの2ページ目に行くとその他のものも2ページ目に入ってしまいます。
また、ページ遷移をする際に開いていたタブをキープしたままページ遷移をするようにしたいです。
問題2
ページ遷移をする際に開いていたタブをキープしたままページ遷移をするようにしたいです。
問題3
投稿記事内のaタグがぺージネーション内にも複製されてしまいます。
###該当のソースコード
category.php
```php
   <div class="tabwrap">
   <div class="tabSet">
       <ul class="tabs clrFix">
         <li id="newstab"><a href="#panel1-1" class="on" style="display: inline-block;">
         <h3>
         <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/newslist_ico_01_on.png" class="ico on">
         <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>
         <li id="schooltab" class="center"><a href="#panel1-2" class="" style="display: inline-block;">
         <h3>
         <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/newslist_ico_02_on.png" class="ico on" style="display:none;">
         <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/newslist_ico_02_off.png" class="ico off">その1</h3></a></li>
         <li id="salontab"><a href="#panel1-3" class="" style="display: inline-block;">
         <h3>
         <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/newslist_ico_03_on.png" class="ico on" style="display:none;">
         <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/newslist_ico_03_off.png" class="ico off">その2</h3></a></li>
       </ul>
       <div class="panels">
         <div class="panel" id="panel1-1" style="display: block;">
<?php if(have_posts()): ?>
 <?php while(have_posts()): ?>
   <?php the_post(); ?>
           <div class="content">
             <p class="date"><?php the_time('Y/m/d'); ?></p>
             <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
             <p class="text"><a href="<?php the_permalink(); ?>"><?php echo mb_substr($post->post_content,0, 100).'...';?></a></p>
           </div>
 <?php endwhile; ?>
<?php endif; ?>
       <ul class="page clrFix">
<?php wp_pagination(); ?>
       </ul>
         </div>
         <div class="panel" id="panel1-2" style="display: none;">
<?php query_posts("cat=3&paged=".$paged); ?>
<?php if(have_posts()): ?>
 <?php while(have_posts()): ?>
   <?php the_post(); ?>
           <div class="content">
             <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/top_news_03.png" class="newstag">
             <p class="date"><?php the_time('Y/m/d'); ?></p>
             <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
             <p class="text"><a href="<?php the_permalink();?>"><?php echo mb_substr($post->post_content,0, 100).'...';?></p>
           </div>
 <?php endwhile; ?>
<?php endif; ?>
       <ul class="page clrFix">
<?php wp_pagination(); ?>
       </ul>
<?php wp_reset_query(); ?>
         </div>
         <div class="panel" id="panel1-3" style="display: none;">
<?php query_posts("cat=4&paged=".$paged); ?>
<?php if(have_posts()): ?>
 <?php while(have_posts()): ?>
   <?php the_post(); ?>
           <div class="content">
             <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/top_news_01.png" class="newstag">
             <p class="date"><?php the_time('Y/m/d'); ?></p>
             <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
             <p class="text"><a href="<?php the_permalink();?>"><?php echo mb_substr($post->post_content,0, 100).'...';?></p>
           </div>
 <?php endwhile; ?>
<?php endif; ?>
       <ul class="page clrFix">
<?php wp_pagination(); ?>
       </ul>
<?php wp_reset_query(); ?>
         </div>
       </div><!-- .panels -->
   </div><!-- .tabset -->
   </div><!-- .tabwrap -->
```
function.php
```php
<?php
function wp_pagination() {
   global $wp_query;
   $big = 99999999;
   $page_format = paginate_links( array(
       'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
       'format' => '?paged=%#%',
       'current' => max( 1, get_query_var('paged') ),
       'total' => $wp_query->max_num_pages,
       'prev_next'   => True,
       'prev_text'   => __('prev'),
       'next_text'   => __('next'),
       'type' => 'array',
       'mid_size' => '1',
       'end_size' => '1'
   ) );
   if( is_array($page_format) ) {
       $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
       // echo '<li><span>'. $paged . ' of ' . $wp_query->max_num_pages .'</span></li>';
       foreach ( $page_format as $page ) {
           echo "<li>$page</li>";
       }
   }
   wp_reset_query();
}
?>
```
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();
   });
});
```
  • jQuery

    12450 questions

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

  • WordPress

    14029 questions

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

1 誤字

tomy

tomy score 105

2016/06/10 14:53  投稿

同一ページでスラッグ毎タブで分けた場合のそれぞれ対応したページネーションの作り方
###前提・実現したいこと
category.phpに投稿一覧を作成しています。
タブで内容を切り替えるようにしていて下記の構成です。
・全一覧
・該当スラッグその1
・該当スラッグその2
記事の出し分けはできたのですが、ページネーションの紐付けがうまくできません。
一覧のタブの2ページ目に行くとその他のものも2ページ目に入ってしまいます。
また、ページ遷移をする際に開いていたタブをキープしたままページ遷移をするようにしたいです。
###該当のソースコード
category.php
```php
   <div class="tabwrap">
   <div class="tabSet">
       <ul class="tabs clrFix">
         <li id="newstab"><a href="#panel1-1" class="on" style="display: inline-block;">
         <h3>
         <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/newslist_ico_01_on.png" class="ico on">
         <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>
         <li id="schooltab" class="center"><a href="#panel1-2" class="" style="display: inline-block;">
         <h3>
         <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/newslist_ico_02_on.png" class="ico on" style="display:none;">
         <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/newslist_ico_02_off.png" class="ico off">その1</h3></a></li>
         <li id="salontab"><a href="#panel1-3" class="" style="display: inline-block;">
         <h3>
         <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/newslist_ico_03_on.png" class="ico on" style="display:none;">
         <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/newslist_ico_03_off.png" class="ico off">その2</h3></a></li>
       </ul>
       <div class="panels">
         <div class="panel" id="panel1-1" style="display: block;">
<?php if(have_posts()): ?>
 <?php while(have_posts()): ?>
   <?php the_post(); ?>
           <div class="content">
             <p class="date"><?php the_time('Y/m/d'); ?></p>
             <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
             <p class="text"><a href="<?php the_permalink(); ?>"><?php echo mb_substr($post->post_content,0, 100).'...';?></a></p>
           </div>
 <?php endwhile; ?>
<?php endif; ?>
       <ul class="page clrFix">
<?php wp_pagination(); ?>
       </ul>
         </div>
         <div class="panel" id="panel1-2" style="display: none;">
<?php query_posts("cat=3&paged=".$paged); ?>
<?php if(have_posts()): ?>
 <?php while(have_posts()): ?>
   <?php the_post(); ?>
           <div class="content">
             <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/top_news_03.png" class="newstag">
             <p class="date"><?php the_time('Y/m/d'); ?></p>
             <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
             <p class="text"><a href="<?php the_permalink();?>"><?php echo mb_substr($post->post_content,0, 100).'...';?></p>
           </div>
 <?php endwhile; ?>
<?php endif; ?>
       <ul class="page clrFix">
<?php wp_pagination(); ?>
       </ul>
<?php wp_reset_query(); ?>
         </div>
         <div class="panel" id="panel1-3" style="display: none;">
<?php query_posts("cat=4&paged=".$paged); ?>
<?php if(have_posts()): ?>
 <?php while(have_posts()): ?>
   <?php the_post(); ?>
           <div class="content">
             <img src="<?php echo esc_url(get_template_directory_uri());?>/shared/images/top_news_01.png" class="newstag">
             <p class="date"><?php the_time('Y/m/d'); ?></p>
             <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
             <p class="text"><a href="<?php the_permalink();?>"><?php echo mb_substr($post->post_content,0, 100).'...';?></p>
           </div>
 <?php endwhile; ?>
<?php endif; ?>
       <ul class="page clrFix">
<?php wp_pagination(); ?>
       </ul>
<?php wp_reset_query(); ?>
         </div>
       </div><!-- .panels -->
   </div><!-- .tabset -->
   </div><!-- .tabwrap -->
```
function.php
```php
<?php
function wp_pagination() {
   global $wp_query;
   $big = 99999999;
   $page_format = paginate_links( array(
       'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
       'format' => '?paged=%#%',
       'current' => max( 1, get_query_var('paged') ),
       'total' => $wp_query->max_num_pages,
       'prev_next'   => True,
       'prev_text'   => __('prev'),
       'next_text'   => __('next'),
       'type' => 'array',
       'mid_size' => '1',
       'end_size' => '1'
   ) );
   if( is_array($page_format) ) {
       $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');
       // echo '<li><span>'. $paged . ' of ' . $wp_query->max_num_pages .'</span></li>';
       foreach ( $page_format as $page ) {
           echo "<li>$page</li>";
       }
   }
   wp_reset_query();
}
?>
```
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();
   });
});
```
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
```
  • jQuery

    12450 questions

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

  • WordPress

    14029 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る