web関連
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」を宣言しなくてもいいからコードがすっきりする。
まじ便利