WordPressのアーカイブページで1ページ目と2ページ目以降でデザインを変更する方法
アーカイブページなどで最新記事(1件目の記事)のみ大きく表示したりする場合、アーカイブページの2ページ目以降は最初の記事も他の記事と同様の表示方法にしたいということがあると思います。
この場合、1ページ目と2ページ目以降で条件分岐をすることで表示を切り替えることができます。
なお1件目の記事と2件目以降でスタイルを変更する方法は以下の関連記事をご覧ください。
本記事に出てくるis_first関数はこの記事の手順に沿って作成したものです。
WordPressのアーカイブページで1ページ目と2ページ目以降でデザインを変更する方法
index.phpに記述していく前提で話を進めていきます。
is_paged()関数で条件分岐するループ
is_paged()関数は「現在のページ番号が1より大きいか」を判別するための関数です。
今回は、「ページ番号が1」か「それ以外」かを判別しますので、この関数の前に「!(～に等しくない)」をつけて条件分岐を作ります。
- index.php
-
<div id="content"> <?php if (!is_paged()) : ?> //1ページ目のとき <?php else : ?> //2ページ目以降のとき <?php endif; ?> </div>
1ページ目用のループを記入
1ページ目がそれ以外かで条件分岐ができたら、1ページ目用のループを追記いします。
ここでは前回の記事のソースを流用します。
- index.php
-
<div id="content"> <?php if (!is_paged()) : ?> //1ページ目のとき <?php if(have_posts()) : while(have_posts()) : the_post(); ?> <?php if (is_first()) { ?> //1件目の記事 <div class="post first"> <div class="thumbnail"> <a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail( 'thumb640' ); ?> <?php else: ?> <img src="<?php bloginfo('template_url'); ?>/images/noimage.png" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /> <?php endif; ?> </a> </div> <div class="title"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </div> <div class="date"> <?php echo get_the_date('Y.m.d'); ?> </div> <div class="category"> <?php the_category(' '); ?> </div> <div class="lead"> <?php echo mb_substr(strip_tags($post-> post_content),0,60).'...'; ?> </div> </div> <?php } else { ?> //2件目以降の記事 <div class="post"> <div class="thumbnail"> <a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail( 'thumb640' ); ?> <?php else: ?> <img src="<?php bloginfo('template_url'); ?>/images/noimage.png" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /> <?php endif; ?> </a> </div> <div class="title"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </div> <div class="date"> <?php echo get_the_date('Y.m.d'); ?> </div> <div class="category"> <?php the_category(' '); ?> </div> <div class="lead"> <?php echo mb_substr(strip_tags($post-> post_content),0,60).'...'; ?> </div> </div> <?php } ?> <?php endwhile; else : ?> //記事がない場合 <p>記事が見つかりません。</p> <?php endif; ?> <?php else : ?> //2ページ目以降のとき <?php endif; ?> </div>
2ページ目以降用のループを記入する
続いて2ページ目以降のループを追記します。
2ページ目以降が記事の1件目のスタイルを変える必要はありませんので、1ページ目のループに比べてシンプルです。
また2ページ目以降のソースはID名「onward」のdiv要素で括って、2ページ目以降のスタイルを指定しやすいようにします。
- index.php
-
<div id="content"> <?php if (!is_paged()) : ?> //1ページ目のとき <?php if(have_posts()) : while(have_posts()) : the_post(); ?> <?php if (is_first()) { ?> //1件目の記事 <div class="post first"> <div class="thumbnail"> <a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail( 'thumb640' ); ?> <?php else: ?> <img src="<?php bloginfo('template_url'); ?>/images/noimage.png" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /> <?php endif; ?> </a> </div> <div class="title"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </div> <div class="date"> <?php echo get_the_date('Y.m.d'); ?> </div> <div class="category"> <?php the_category(' '); ?> </div> <div class="lead"> <?php echo mb_substr(strip_tags($post-> post_content),0,60).'...'; ?> </div> </div> <?php } else { ?> //2件目以降の記事 <div class="post"> <div class="thumbnail"> <a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail( 'thumb640' ); ?> <?php else: ?> <img src="<?php bloginfo('template_url'); ?>/images/noimage.png" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /> <?php endif; ?> </a> </div> <div class="title"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </div> <div class="date"> <?php echo get_the_date('Y.m.d'); ?> </div> <div class="category"> <?php the_category(' '); ?> </div> <div class="lead"> <?php echo mb_substr(strip_tags($post-> post_content),0,60).'...'; ?> </div> </div> <?php } ?> <?php endwhile; else : ?> //記事がない場合 <p>記事が見つかりません。</p> <?php endif; ?> <?php else : ?> //2ページ目以降のとき <div id="onward"> <?php if(have_posts()) : while(have_posts()) : the_post(); ?> <div class="post"> <div class="thumbnail"> <a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail( 'thumb640' ); ?> <?php else: ?> <img src="<?php bloginfo('template_url'); ?>/images/noimage.png" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" /> <?php endif; ?> </a> </div> <div class="title"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </div> <div class="date"> <?php echo get_the_date('Y.m.d'); ?> </div> <div class="category"> <?php the_category(' '); ?> </div> <div class="lead"> <?php echo mb_substr(strip_tags($post-> post_content),0,60).'...'; ?> </div> </div> <?php endwhile; else : ?> //記事がない場合 <p>記事が見つかりません。</p> <?php endif; ?> </div><!-- #onward --> <?php endif; ?> </div>
まとめ
以上が、WordPRessのアーカイブページで1ページ目と2ページ目以降でデザインを変更する方法です。
ループを入れ子にする場合、どこがどうループになっているのか混乱しやすいかと思います。
ですので、大枠の条件分岐を作っておいて、そのあとで入れ子になるループを作るのが混乱しにくいかと思います。
またその際インデントをつけておくとあとで編集するときにも変わりやすいかと思います。
関連記事
