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

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

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

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

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

  1. 最初とそれ以外とでclassを変更する
  2. 最初の記事だけ表示する内容を変更する
  3. 最後の記事だけ○○○する
  4. 奇数番目の記事に○○○する
  5. 偶数番目の記事に○○○する
  6. post_class()を使用している場合は…

1. 最初とそれ以外とでclassを変更する

たまに実装しているブログを見かけることもある、記事一覧などで最初の記事だけ背景色や文字サイズを変更するといったことをやりたい時に便利な方法です。
実装にはまず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'; // 最初の記事に付けたいclass
      } else {
        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; ?>

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

目次へ

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

先ほどは最初とそれ以外とでclassを変更するという内容でしたが、同様の方法で最初の記事だけ表示する内容を変更させることができます。
まず、先ほどと同じように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. 最初とそれ以外とでclassを変更する」のように記述するので十分なんでしょうが、特にガラッと内容を変更する場合はこちらの方が個人的にわかりやすいのでこの方法を使っています。

目次へ

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

上2つとは逆に、最後の記事だけclassを付けたり表示内容を変更する方法です。
実装にはまず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というclassを付けるという記述になりますが、classだけでなく表示させる内容をガラッと変えたいという場合は、「2. 最初の記事だけ表示する内容を変更する」と同じように最後の記事で表示させたいものを4行目~6行目に記述し、それ以外の記事で表示させたいものを8行目~10行目に記述すれば実装できます。

目次へ

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

1、3、5、7、9...というように、奇数番目の記事だけclassを付けたり表示内容を変更する方法です。
実装にはまず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()の関数を使った条件分岐で奇数番目の記事に対してclassを付けたり表示内容を変更させることができます。

目次へ

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

2、4、6、8、10...というように、偶数番目の記事だけclassを付けたり表示内容を変更する方法です。
実装にはまず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()の関数を使った条件分岐で偶数番目の記事に対してclassを付けたり表示内容を変更させることができます。

目次へ

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

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

※ちなみに、これまで紹介してきたものをpost_class()と組み合わせて単独で使いたい場合、例えば最初の記事だけ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()はそのまま使用しても様々なクラスが出力されますが、上記を記述することでそれぞれの記事に対して更にclassを付加することができます。
追加されるclassはコードでハイライト表示になっている部分で、上から最初、偶数、奇数、最後という並びになっているので、変更したい場合はこの部分をそれぞれ変更してください。

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

目次へ

Close the search window,
please press close button or esc key.