JOURNAL クリエイティブとマーケティングの話

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

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

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

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

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

1件目の記事を分岐する関数を作成する

functions.phpに追記します。

functions.php
function is_first(){
	global $wp_query;
	return ($wp_query->current_post === 0);
}

1件目の記事とそれ以外で分岐させる

次に1件目と2件目以降とで分岐するループを作成します。

index.phpなどの記事一覧を表示したい箇所に記述していきます。

なお今回のような条件分岐は、大枠から作成していくと混乱せずに進めることができます。

index.php
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>

	<?php if (is_first()) { ?>

		//1件目の記事

	<?php } else { ?>

		//2件目以降の記事

	<?php } ?>
	<?php endwhile; else : ?>

		//記事がない場合

	<?php endif; ?>

1件目の記事用ソース

次に、1件目の記事用のソースを記述します。

index.php
<?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件目以降の記事

	<?php } ?>
	<?php endwhile; else : ?>

		//記事がない場合

	<?php endif; ?>

今回は、各記事のサムネイル、投稿日、カテゴリー、記事抜粋を表示するようにしてみます。

サムネイル画像に関する記述は上記ソースのクラス名「thumbnail」の部分です。

ここではサムネイル画像(アイキャッチ画像)が設定されている場合はその画像を、設置されていなければ「noimage.png」を表示するようにしています。

アイキャッチ画像を使用するには、事前にfunctions.phpを編集してアイキャッチ画像を有効にしておく必要があります。

functions.phpに下記のように記述を追加してください。画像サイズ640px×400pxのサムネイル画像が生成させるようになります。

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

クラス名が「lead」となっているdiv要素内の記述は記事の冒頭部分を60文字抜粋して表示するためのものです。

抜粋する文字数を変えたい場合は、この記述の中の「60」のところを変更してください。

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

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

index.php
<?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 : ?>

		//記事がない場合

	<?php endif; ?>

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

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

記事がないとき用ソース

最後に、記事が1件もないときにメッセージが表示されるようにしておきましょう。

index.php
<?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; ?>

まとめ

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

ソース自体は長くなりますが、やっていることは1件目と2件目以降で条件分岐してループさせているだけです。

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