スタッフブログ

BLOG


WordPressで3の倍数の記事にClassをつける方法（エントリの3列表示）

公開日 2012/07/30 更新日

WordPress（ワードプレス：WP）をCMSとして使う場合、2列表示や3列表示などエントリを横に並べたいケースが多いと思います。

HTMLとCSSで横並びにする場合、CSSでfloatを使い横に配置し、ブロック要素とブロック要素の間にmarginを指定し間隔を開けることが多いと思います。また右端（折り返し）のブロックにはmargin:0;を指定するためのclass（クラス）をhtmlに記述することも多いと思います。

CMSで出力する場合、3の倍数だけにclass（クラス）を割り当てる処理が必要になります。
WordPressでは意外と簡単に実装可能です。

以下、覚え書きです。

wordpressで3の倍数にクラスを割り当てる

3の倍数にclassを割り当てるために、ループ回数を入れる変数を用意し、if文でループ回数により条件分岐させます。下記の例は「count」という変数を用意しています。

if文の分岐は、3で割って余りが0だったら3の倍数という形で処理します。
例）「if ($count % 3 == 0 )」

※仮に4つ並びの場合なら$count%4にして、5なら$count%5に変更します。
これで応用してｘ番目にクラスを適用するということが可能ですね。

以下、記述例になります。

		<?php $count = 1; //ループ回数を入れる変数 ?>
		<div class="entry">
			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			<?php
				//3番目だったらclass=mr0、それ以外はクラスなし
				if ($count%3 == 0) {
					echo '<div class="mr0">';
				} else {
					echo '<div>';
				}
			?>
				<h3><?php the_title(); ?></h3>
				<p><?php echo get_the_excerpt(); ?></p>
			</div>
			<?php $count++; //最後にループ回数を一つ進める ?>
			<?php endwhile; else: ?>
				<p><?php _e('no post'); ?></p>
			<?php endif; ?>
		</div>

 

おまけでMovable Type（MT:ムーバブルタイプ）で、3の倍数の記事にclassをつける方法も紹介します。MTで【横並び３列】でエントリー記事を出力したい時は、計算用のモディファイア（属性）を使います。

<mt:Entries>
	<mt:If name="__counter__" op="%" value="3" eq="0">
		<div class="mr0"><!-- 3の倍数番目 -->
	<mt:Else>
		<div><!-- その他 -->
	</mt:If>

	<h3><$mt:EntryTitle$></h3>

	<$mt:EntryBody$>
</mt:Entries>

下記サイトを参考にさせていただきました。
webOpixel | WordPressのエントリーを横並びにしてぴったり揃える
mt:Entriesタグで特定の倍数番目の出力を変える


関連記事