一覧ページなどで記事出力時に「最初の記事だけ」「最後の記事だけ」など、特定の出力数でデザインを変えたい場合があると思います。デザインの変更程度であれば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; ?>
この記事を書いた人管理人
SAKURAGRAPHICA代表
会社員の傍ら、フリーランスでWEBサイトの制作やWordPressによるCMSの構築・障がい者の就労支援としてホームページ制作の職業指導員も行っております。
