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

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

WordPressでブログを運営するとき、アーカイブページ(記事一覧ページ)で最新の記事(1件目の記事)を大きく表示させて目立たせるのが効果的なときがあります。

特にリピーターを想定してブログを構築しているときには、最新記事を目立つようにしておけば何度も訪問してくれるユーザーに更新を分かりやすく伝えることができます。

WordPressでこのような処理をする場合、1件目の記事と2件目以降の記事とで分岐するループを作成し、それぞれにスタイルを指定することで可能になります。

1件目の記事とそれ以外で分岐するループ

まずは1件目と2件目以降とで分岐するループを作成します。今回のように条件によって分岐するようなものは大枠から作成していくと混乱せずに進めることができます。

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<?php if (isFirst()) { ?>
//1件目の記事
<?php } else { ?>
//2件目以降の記事
<?php } ?>
<?php endwhile; else : ?>
//記事がない場合
<?php endif; ?>

1件目の記事用ソース

次に、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件目以降の記事
<?php } ?>
<?php endwhile; else : ?>
//記事がない場合
<?php endif; ?>

今回は、各記事のサムネイル、投稿日、カテゴリー、記事抜粋を表示するようにしてみます。サムネイル画像に関する記述は上記ソースのクラス名「thumbnail」の部分です。ここではサムネイル画像(アイキャッチ画像)が設定されている場合はその画像を、設置されていなければ「noimage.png」を表示するようにしています。

アイキャッチ画像を使用するには、事前にfunctions.phpを編集してアイキャッチ画像を有効にしておく必要があります。functions.phpに下記のように記述を追加してください。画像サイズ640px×400pxのサムネイル画像が生成させるようになります。

/* サムネイル画像
---------------------------------------------------------- */
add_theme_support('post-thumbnails');
add_image_size('thumb640',640,400,true);

クラス名が「lead」となっているdiv要素内の記述は記事の冒頭部分を60文字抜粋して表示するためのものです。抜粋する文字数を変えたい場合は、この記述の中の「60」のところを変更してください。

2件目以降の記事用ソース

2件目以降の記事用のソースを追記します。

<?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 : ?>
//記事がない場合
<?php endif; ?>

1件目用のソースとほぼ変わりませんが、クラス名「post」となっているdiv要素に、1件目は「first」というクラス名が記入されているのに対し、2件目以降用のソースは記入されていません。

これにより、アーカイブページの全記事に適用したいスタイルはクラス名「post」に、1件目にだけ適用したい場合はクラス名「first」を利用することで指定できます。

記事がないとき用ソース

最後に、記事が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; ?>

以上が、WordPressのアーカイブページで1件目の投稿のみ大きく表示する方法です。ソース自体は長くなりますが、やっていることは1件目と2件目以降で条件分岐してループさせているだけです。

先ほども言いましたが、大枠から作っていく(ループを作ってからその中身を作っていく)ようにすると混乱することなく制作がすすめられると思います。

photo credit: Hana Kiki via photopin (license)

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

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

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

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

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

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

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

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

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

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

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

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

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

柴田竹思

柴田竹思

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

プロフィールはこちら