WordPRessのアーカイブページで1ページ目と2ページ目以降でデザインを変更する方法

2016.06.26 WordPress
WordPRessのアーカイブページで1ページ目と2ページ目以降でデザインを変更する方法

前回紹介したようにアーカイブページなどで最新記事(1件目の記事)のみ大きく表示したりする場合、アーカイブページの2ページ目以降は最初の記事も他の記事と同様の表示方法にしたいということがあると思います。

参考:WordPressのアーカイブページで1件目の投稿のみ大きく表示する方法

この場合、1ページ目と2ページ目以降で条件分岐をすることで表示を切り替えることができます。

is_paged()関数で条件分岐するループ

is_paged()関数は「現在のページ番号が1より大きいか」を判別するための関数です。今回は、「ページ番号が1」か「それ以外」かを判別しますので、この関数の前に「!(~に等しくない)」をつけて条件分岐を作ります。

<div id="content">
<?php if (!is_paged()) : ?>
//1ページ目のとき
<?php else : ?>
//2ページ目以降のとき
<?php endif; ?>
</div>

1ページ目用のループを記入

1ページ目がそれ以外かで条件分岐ができたら、1ページ目用のループを追記いします。ここでは前回の記事「WordPressのアーカイブページで1件目の投稿のみ大きく表示する方法」のソースを流用します。

<div id="content">
<?php if (!is_paged()) : ?>
//1ページ目のとき
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<?php if (isFirst()) { ?>
//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ページ目以降のスタイルを指定しやすいようにします。

<div id="content">
<?php if (!is_paged()) : ?>
//1ページ目のとき
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<?php if (isFirst()) { ?>
//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ページ目以降でデザインを変更する方法です。ループを入れ子にする場合、どこがどうループになっているのか混乱しやすいかと思います。

ですので、大枠の条件分岐を作っておいて、そのあとで入れ子になるループを作るのが混乱しにくいかと思います。またその際インデントをつけておくとあとで編集するときにも変わりやすいかと思います。

photo credit: Breathtaking via photopin (license)

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら