Blog

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

2016.06.25 2017.03.01WordPress

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)

Author: 柴田竹思

ベトナムと日本のに拠点生活Webディベロッパー。国内外のSOHO/フリーランスの方のウェブサイト制作から企業の大規模案件まで幅広く携わっています。