実装方法を教えてもらったので、復習も兼ねた備忘録です。
WordPressで記事を表示する際に、特定の件数時にclassを付けたり表示する内容を変更させる方法です。
やろうと思えばスタイルの調整とかclass付ける程度であればCSSやjQueryで疑似classを使って実装することも可能ですが、中身をガラッと変えるときや特定の件数後に何かを表示させたいというときなどに非常に便利です。
最初とそれ以外とでclassを変更する
たまに実装しているブログを見かけることもある、記事一覧などで最初の記事だけ背景色や文字サイズを変更するといったことをやりたいときに便利な方法です。
実装にはまず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_class = 'first-article';
} else {
$article_class = 'article';
}
?>
<article class="<?php echo $article_class; ?>">
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<p><?php the_content(); ?></p>
</article>
<?php endwhile; ?>
・・・
<?php else : ?>
・・・
<?php endif; ?>
上記コードの4行目~8行目のように記述することで、最初の記事には.first-article
というclassを、それ以外には.article
というclassをそれぞれarticle
要素に付けることができます。
今回は最初とそうでない時で条件を2つ書いていますが、単純にif ( is_first_post() )
だけを使用して最初の記事にだけ特定のclassを付けることもできます。
最初の記事だけ表示する内容を変更する
先ほどは最初とそれ以外とでclassを変更するという内容でしたが、同様の方法で最初の記事だけ表示する内容を変更させることができます。
まず、先ほどと同じように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項目を表示させ、それ以外の記事ではタイトル・抜粋の2項目を表示させるという記述になります。
このサンプルコード程度の違いであれば「1. 最初とそれ以外とでclassを変更する」のように記述するので十分とは思いますが、特にガラッと内容を変更する場合はこちらの方が個人的にわかりやすいのでこの方法を使っています。
最後の記事だけ○○○する
上2つとは逆に、最後の記事だけclassを付けたり表示内容を変更する方法です。
実装にはまずfunctions.php
へ下記のように記述します。
function is_last_post() {
global $wp_query;
return ( $wp_query->current_post+1 === $wp_query->post_count );
}
記述後、使用したいところでは下記のように記述し、このサンプルコードの場合は最後の記事だけarticle
要素へ.last
というclassが付くようになります。
<?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; ?>
奇数番目の記事に○○○する
1, 3, 5, 7, 9 ...というように、奇数番目の記事だけclassを付けたり表示内容を変更する方法です。
実装にはまずfunctions.php
へ下記のように記述します。
function is_odd_post() {
global $wp_query;
return ( ( ( $wp_query->current_post + 1 ) % 2 ) === 1 );
}
記述後、使用したいところでは下記のように記述し、このサンプルコードの場合は奇数番目の記事だけarticle
要素へ.odd
というclassが付くようになります。
<?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; ?>
偶数番目の記事に○○○する
2, 4, 6, 8, 10 ...というように、偶数番目の記事だけclassを付けたり表示内容を変更する方法です。
実装にはまずfunctions.php
へ下記のように記述します。
function is_even_post() {
global $wp_query;
return ( ( ( $wp_query->current_post + 1 ) % 2 ) === 0 );
}
記述後、使用したいところでは下記のように記述し、このサンプルコードの場合は偶数番目の記事だけarticle
要素へ.even
というclassが付くようになります。
<?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; ?>
post_class()を使用している場合は
これまで紹介してきたものとは違い、以下はテーマ内でpost_class()
を使用している場合に、最初・最後・奇数・偶数の記事に対してそれぞれ新たにクラスを一気に付加するという方法です。
ちなみに、これまで紹介してきたものをpost_class()
と組み合わせて単独で使いたい場合、例えば最初の記事だけclassを付加したい時はif ( is_first_post() ) { post_class( 'first' ); }
みたいな感じで実装することもできます。
実装には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()
はそのまま使用しても様々なクラスが出力されますが、上記を記述することでそれぞれの記事に対してさらにclassを付加することができます。
追加されるclassはコードでハイライト表示になっている部分で上から最初、偶数、奇数、最後という並びになっているので、変更したい場合はこの部分をそれぞれ変更してください。
この方法は以下で紹介されていたものです。