web関連

wordpressのループで2の倍数の時に特定のクラスをつける方法

wordpressのループで2の倍数の時に特定のクラスをつける方法

cssの「nth-child(2n+0)」で2の倍数を指定しようと思ったらうまくいかなかったのでループ側で2の倍数の時にクラスを振る事にしたときの備忘録

直接書く場合

<?php $i= 1; ?>
<?php if (have_posts()):while(have_posts()):the_post(); ?>

<?php if( ($i % 2) == 0 ): ?>
// 2の倍数の時に表示するもの
<?php else: ?>
// 2の倍数じゃない時に表示するもの
<?php endif; ?>
<?php $i++; ?>// ループの最後で加算

<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
「if( ($i % 2) == 0 )」は2で割り切れたらtrue、割り切れなかったらfalseって感じで分岐してます。

関数を作成して呼び出す場合

上記の「$i」部分をfunction.phpに書いて関数を使って呼び出します。

function.phpに下記コードを書きます。

function loopCountNum(){
global $wp_query;
return $wp_query->current_post+1;
}

テンプレートに書きます。

<?php if (have_posts()):while(have_posts()):the_post(); ?>

<?php if ( (loopCountNum() % 2) === 0 ): ?>
// 2の倍数の時に表示するもの
<?php else: ?>
// 2の倍数じゃない時に表示するもの
<?php endif; ?>

<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
関数で作っておくと変数「$i」を宣言しなくてもいいからコードがすっきりする。 まじ便利