- 8/12 注意事項を追記しました！ループを2つ作ると、システムが認識している記事の出力数が食い違い、ページャーに影響が及んでしまいます…
記事が増えてくると、ページャーを実装して1ページに表示する記事数を調節することで必要な分だけユーザーの意志で見ることが出来るようになります。
ページャーについては「WordPressでページネーション実装したときのWP_Queryとquery_posts共通のハマりポイント」という記事を書きました。
では、複数に分割した記事一覧ページやTOPページの2ページ目の表示を変えるにはどうしたらいいのか…というかそんなことする必要があるのか…
あるんです！
例えば1ページ目の最新記事だけ、他の記事とデザインを変えたい！とか。
だいたいメインループの他にループを作るわけなのですが（たぶん）、だいたい2ページ目まで同じ表示になるとちょっとユーザーの混乱を招く気がします。
以前書いた記事で「wordpressのWP_Queryとかでoffsetを使わずにオフセットする」というものがありますが、
ここに書いたようなタイプだと、2ページ目まで最新記事のが一番最初にデカデカと表示されてしまいます。
2ページ目以降は通常の記事の羅列としたいので、簡単なテンプレートタグを使用します！
複数の記事があるアーカイブページの1ページ目かどうか判断するテンプレートタグis_paged()
まず1ページ目はこれだとして
こんな感じの「1記事目だけ別のデザイン」にしようとすると、僕の場合以下のコードになりました。非プログラマ感満載。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <ul class=“loop1”> <?php //【1】 $postNum1 = array( ‘posts_per_page’ => 1 , ); $post1 = new WP_Query( $postNum1 ); if($post1–>have_posts()){ while($post1–>have_posts()){ //最初の1記事 $post1–>the_post(); ?> <li> <a href=“<?php the_permalink(); ?>”> ループ1で出したい内容… </a> </li> <?php } } ?> </ul> <ul class=“loop2”> <?php //【2】 $firstID = get_the_ID(); //投稿の最初の記事ID $postOthers = array( ‘showposts’ => 5 , ‘paged’ => get_query_var(‘paged’) , ‘post__not_in’ => array($firstID) //ここにさっきの$firstIDを。 ); $postOther = new WP_Query($postOthers) ; if($postOther –> have_posts()){ while($postOther–> have_posts()){ //最初の1記事以降の $postOther–>the_post(); ?> <li class=“<?php echo addCatClass(post);?>”> <a href=“<?php the_permalink(); ?>”> ループ2で出したい内容… <h2><?php echo get_the_title(); ?></h2> <p><span class=“data-date”><?php the_time(‘Y年n月j日’); ?></span></p> <button type=“button” class=“btn btn-default” >記事を読む</button> </a> </li> <?php } } ?> </ul> |
このままだと上にも書きましたが、全記事の中で最新の記事が、2ページ目以降も1番最初に表示されます。
デバイスの縦幅次第では「同じページか？」と思ってしまいます。
ので、is_paged()を使って2ページ目以降はこんな感じにしましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | if(!is_paged()){ <ul class=“loop1”> <?php //【1】 $postNum1 = array( ‘posts_per_page’ => 1 , ); $post1 = new WP_Query( $postNum1 ); if($post1–>have_posts()){ while($post1–>have_posts()){ //最初の1記事 $post1–>the_post(); ?> <li> <a href=“<?php the_permalink(); ?>”> ループ1で出したい内容… </a> </li> <?php } } ?> </ul> <?php }?> <ul class=“loop2”> <?php //【2】 if(!is_paged()){ $showpost = 4; $firstID = get_the_ID(); //投稿の最初の記事ID }else{ $showpost = 5; } $postOthers = array( ‘showposts’ => $showpost , ‘paged’ => get_query_var(‘paged’) , ‘post__not_in’ => array($firstID) //ここにさっきの$firstIDを。 ); $postOther = new WP_Query($postOthers) ; if($postOther –> have_posts()){ while($postOther–> have_posts()){ //最初の1記事以降の $postOther–>the_post(); ?> <li class=“<?php echo addCatClass(post);?>”> <a href=“<?php the_permalink(); ?>”> ループ2で出したい内容… <h2><?php echo get_the_title(); ?></h2> <p><span class=“data-date”><?php the_time(‘Y年n月j日’); ?></span></p> <button type=“button” class=“btn btn-default” >記事を読む</button> </a> </li> <?php } } ?> </ul> |
こんな感じになりました！
if(!is_paged())で、1ページ目の時だけloop1を出力します。
loop2に関してはget_the_ID();で一番最初の記事のIDを取得して、それを除外することで2記事目以降から表示していました。
けどそのままだと、2ページ目以降では「2ページ目の中で1番最初に表示される記事のID」を除外してしまうので、
こちらもif(is_paged())を使い1ページ目のときのみget_the_ID()を変数に入れて、2記事目以降はカラにしてWP_Queryに渡す…ということをしています！
あとは$showpostに数値を入れて、1ページ目とソレ以降で表示する記事の数を変えています。
※追記
このとき、WORDPRESSダッシュボードの、設定>表示設定>「1ページに表示する最大投稿数」に設定している数と、1ページあたりの表示数を同じにして下さい。
例で言うと
1 2 3 4 5 6 7 8 9 10 11 | if(!is_paged()){ $showpost = 4; $firstID = get_the_ID(); //投稿の最初の記事ID }else{ $showpost = 5; } $postOthers = array( ‘showposts’ => $showpost , ‘paged’ => get_query_var(‘paged’) , ‘post__not_in’ => array($firstID) //ここにさっきの$firstIDを。 ); |
1ページ目はloop1が1記事、loop2が4記事＝1ページあたり5記事で、
2ページ目はloop1が非表示、loop2が5記事＝1ページあたり5記事
ですが、この場合はダッシュボードの設定>表示設定>「1ページに表示する最大投稿数」に設定する数は「5」にしてください。
この数に食い違いがあるとページャーが余分に出力されたり、また逆に少なく出力されてしまい、アクセス出来ない記事が発生してしまいます…
※追記おわり
結構簡単な事でしたね～。
でも、放っておいたら確実に混乱を招いてしまうので、使う場面は少ないでしょうがデザインに応じて絶対に”使えるようにしておきたい”テンプレートタグですね！
satohmsysでした。
でわ！
