WordPress：最初・最後・奇数・偶数の記事にそれぞれクラスを付けたり、表示内容を変更する方法

Posted on November 21th, 2014
In: WordPress

実装方法を教えてもらったので、復習も兼ねた備忘録です。WordPressで記事を表示する際に、特定の件数時にクラスを付けたり表示する内容を変更させる方法です。やろうと思えばスタイルの調整とかクラス付ける程度であればCSSやjQueryで疑似クラスを使って実装することも可能ですが、中身をガラッと変えるときや特定の件数後に何かを表示させたいという時などに非常に便利です。

※以下で紹介する内容は直接テンプレートに記述する形でも実装することはできますが、いろんな場所で使いまわすのを想定してfunctions.phpを用いて実装しているので、テーマ内にfunctions.phpがない場合は作成してください。

WordPress：最初・最後・奇数・偶数の記事にそれぞれクラスを付加したり、表示内容を変更する方法目次

1. 最初とそれ以外とでクラスを変更する

たまに実装しているブログを見かけることもある、記事一覧などで最初の記事だけ背景色や文字サイズを変更するといったことをやりたい時に便利な方法です。
実装にはまずfunctions.phpへ以下のように記述します。

functions.php

function is_first_post(){
	global $wp_query;
	return ($wp_query->current_post === 0);
}

あとは以下のような感じで記事を表示させたい部分に記述します。

<?php if ( have_posts()) : ?>
	<?php while ( have_posts()) : the_post(); ?>
		<article class="<?php if (is_first_post()) {
				echo 'first-article'; // 最初の記事に付けたいクラス
			} else {
				echo 'article'; // 最初以外の記事に付けたいクラス
			} ?>">
			<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
			<p><?php the_content(); ?></p>
		</article>
	<?php endwhile; ?>
	・・・
<?php else : ?>
	・・・
<?php endif; ?>

上記ソースの3行目～7行目のように記述することで、最初の記事には「first-article」というクラスを、それ以外には「article」というクラスをそれぞれarticle要素に付けることができます。
今回は最初とそうでない時で条件を2つ書いていますが、単純にif (is_first_post())だけを使用して最初の記事にだけ特定のクラスを付けることもできます。

目次へ

2. 最初の記事だけ表示する内容を変更する

先ほどは最初とそれ以外とでクラスを変更するという内容でしたが、同様の方法で最初の記事だけ表示する内容を変更させることができます。
まず、先ほどと同じようにfunctions.phpへ以下のように記述します。

functions.php

function is_first_post(){
	global $wp_query;
	return ($wp_query->current_post === 0);
}

次に以下のような感じで記事を表示させたい部分に記述します。

<?php if ( have_posts()) : ?>
	<?php while ( have_posts()) : the_post(); ?>
		<?php if (is_first_post()): ?> 
			<article>
				<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
				<div><?php the_post_thumbnail(); ?></div>
				<p><?php the_excerpt(); ?></p>
			</article>
		<?php else: ?>
			<article>
				<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
				<p><?php the_excerpt(); ?></p>
			</article>
		<?php endif; ?>
	<?php endwhile; ?>
	・・・
<?php else : ?>
	・・・
<?php endif; ?>

上記の場合は、最初の記事だけタイトル・アイキャッチ・抜粋の3項目を表示（4行目～8行目）させ、それ以外の記事ではタイトル・抜粋の2項目を表示（10行目～13行目）させるという記述になります。
このサンプルソースのように一箇所違う程度であれば「1. 最初とそれ以外とでクラスを変更する」のように記述するので十分なんでしょうが、特にガラッと内容を変更する場合はこちらの方が個人的にわかりやすいのでこの方法を使っています。

目次へ

3. 最後の記事だけ○○○する

上2つとは逆に、最後の記事だけクラスを付けたり表示内容を変更する方法です。
実装にはまずfunctions.phpへ以下のように記述します。

functions.php

function is_last_post(){
	global $wp_query;
	return ($wp_query->current_post+1 === $wp_query->post_count);
}

次に以下のような感じで記事を表示させたい部分に記述します。

<?php if ( have_posts()) : ?>
	<?php while ( have_posts()) : the_post(); ?>
		<?php if (is_last_post()): ?> 
			<article class="last">
				・・・
			</article>
		<?php else: ?>
			<article>
				・・・
			</article>
		<?php endif; ?>
	<?php endwhile; ?>
	・・・
<?php else : ?>
	・・・
<?php endif; ?>

上記の場合は、最後の記事だけarticle要素へ「last」というクラスを付けるという記述になりますが、クラスだけでなく表示させる内容をガラッと変えたいという場合は、「2. 最初の記事だけ表示する内容を変更する」と同じように最後の記事で表示させたいものを4行目～6行目に記述し、それ以外の記事で表示させたいものを8行目～10行目に記述すれば実装できます。

目次へ

4. 奇数番目の記事に○○○する

1、3、5、7、9…というように、奇数番目の記事だけクラスを付けたり表示内容を変更する方法です。
実装にはまずfunctions.phpへ以下のように記述します。

functions.php

function is_odd_post(){
	global $wp_query;
	return ((($wp_query->current_post+1) % 2) === 1);
}

次に以下のような感じで記事を表示させたい部分に記述します。

<?php if ( have_posts()) : ?>
	<?php while ( have_posts()) : the_post(); ?>
		<?php if (is_odd_post()): ?> 
			<article class="odd">
				・・・
			</article>
		<?php else: ?>
			<article>
				・・・
			</article>
		<?php endif; ?>
	<?php endwhile; ?>
	・・・
<?php else : ?>
	・・・
<?php endif; ?>

これまでの内容とほぼ一緒で、先ほど作成したis_odd_post()の関数を使った条件分岐で奇数番目の記事に対してクラスを付けたり表示内容を変更させることができます。

目次へ

5. 偶数番目の記事に○○○する

2、4、6、8、10…というように、偶数番目の記事だけクラスを付けたり表示内容を変更する方法です。
実装にはまずfunctions.phpへ以下のように記述します。

functions.php

function is_even_post(){
	global $wp_query;
	return ((($wp_query->current_post+1) % 2) === 0);
}

次に以下のような感じで記事を表示させたい部分に記述します。

<?php if ( have_posts()) : ?>
	<?php while ( have_posts()) : the_post(); ?>
		<?php if (is_even_post()): ?> 
			<article class="even">
				・・・
			</article>
		<?php else: ?>
			<article>
				・・・
			</article>
		<?php endif; ?>
	<?php endwhile; ?>
	・・・
<?php else : ?>
	・・・
<?php endif; ?>

これまでの内容とほぼ一緒で、先ほど作成したis_even_post()の関数を使った条件分岐で偶数番目の記事に対してクラスを付けたり表示内容を変更させることができます。

目次へ

6. post_class()を使用している場合は…

これまで紹介してきたものとは違い、以下はテーマ内でpost_class()を使用している場合に、最初・最後・奇数・偶数の記事に対してそれぞれ新たにクラスを一気に付加するという方法です。

※ちなみに、これまで紹介してきたものをpost_class()と組み合わせて単独で使いたい場合、例えば最初の記事だけクラスを付加したい時はif (is_first_post()) { post_class('first'); }みたいな感じで実装することもできます。

実装にはfunctions.phpへ以下のように記述します。

functions.php

function additional_post_classes( $classes ) {
	global $wp_query;
	if( $wp_query->found_posts < 1 ) {
		return $classes;
	}
	if( $wp_query->current_post == 0 ) {
		$classes[] = 'first';
	}
	if( $wp_query->current_post % 2 ) {
		$classes[] = 'even';
	} else {
		$classes[] = 'odd';
	}
	if( $wp_query->current_post == ( $wp_query->post_count - 1 ) ) {
		$classes[] = 'last';
	}
	return $classes;
}
add_filter( 'post_class', 'additional_post_classes' );

post_class()はそのまま使用しても様々なクラスが出力されますが、上記を記述することでそれぞれの記事に対して更にクラスを付加することができます。
追加されるクラスはソースで赤文字になっている部分で、上から最初、偶数、奇数、最後という並びになっているので、変更したい場合はこの部分をそれぞれ変更してください。

この方法は以下で紹介されていたものです。

[WordPress] 記事一覧で記事の順番に応じてそれぞれ任意のclassを与える – かちびと.net

目次へ