ブログ

【WordPress】ループの出力数毎にデザインやレイアウトを変更する方法

一覧ページなどで記事出力時に「最初の記事だけ」「最後の記事だけ」など、特定の出力数でデザインを変えたい場合があると思います。デザインの変更程度であればCSSの疑似クラスを使えば実現できますが、HTMLの出力そのものを変更したい場合はCSSではどうにもできません。

今回は出力させるループの回数毎に内容を変更する方法です。

ループの回数毎に出力を変更する

「class」を付与する

functions.phpへ下記を追記してください。下記は「最初とそれ以外」で付与するclassを変更する例です。

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

出力するPHPファイルのループ部分を下記の通り変更します。

<?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; ?>

「最初」の記事だけ表示内容を変える

classの付与ではなく、出力させる内容(HTML)を変更する場合は、下記のコードをfunctions.phpに追記してください。

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

出力したいPHPファイルのループを変更します。下記は最初の記事だけ「タイトル」「アイキャッチ」「抜粋」を表示し、それ以外は「タイトル」「抜粋」だけを出力させる場合。

<?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; ?>

「最後」の記事だけ内容を変える

最後の出力だけclassを付与したり出力内容を変える方法です。functions.phpに下記コードを追記してください。

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

下記は最後のarticleだけ.lastのclassを付与します。また、HTMLの出力を変える場合は、<article class="last">~</article>内に最後の出力にだけ適用させるHTMLを記述し、<article>~</article>に最後以外に適用させるHTMLを記述してください。

<?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; ?>

「奇数毎」「偶数毎」に内容を変える

functions.phpに下記コードを追記してください。

//奇数毎の場合
function is_odd_post() {
  global $wp_query;
  return ( (($wp_query->current_post+1) % 2) === 1 );
}

//偶数毎の場合
function is_even_post() {
  global $wp_query;
  return ( (($wp_query->current_post+1) % 2) === 0 );
}

<article class="クラス名">~</article>に奇数毎または偶数毎のHTMLを、<article>~</article>内に、それ以外のHTMLを記述してください。

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>
    <?php if ( is_odd_post() ): ?> 
      <article class="クラス名">
        ・・・
      </article>
    <?php else: ?>
      <article>
        ・・・
      </article>
    <?php endif; ?>
  <?php endwhile; ?>
  ・・・
<?php else : ?>
  ・・・
<?php endif; ?>
最近の記事 おすすめ記事
PAGE TOP