WordPressのエントリーを横並びにしてぴったり揃える

とりあえずhtml+cssで作ってみます。

Wordpressといっても最終的にはhtml+cssなんで、どうやったらぴったり横並びになるかといのを書いておきます。
例えばh3+pをdivで囲んだブロックが3つあるとします。
cssで横並びにするには単純に考えてfloat使えば良いわけですが、ブロックとブロックの間をmarginで開けようとした場合、一番左か右のどちらかのmarginを0にしないとだめでえすよね。
そこでここでは一番右端だけ「margin0」というクラスを割り当てcssでmarginを0にします。
こうすれば両端に隙間なく収まるはずです。

html

		<div class="entry">
			<div>
				<h3>エントリー1</h3>
				<p>
					これはエントリーのテキストです。これはエントリーのテキストです。これはエントリーのテキストです。
				</p>
			</div>
			<div>
				<h3>エントリー2</h3>
				<p>
					これはエントリーのテキストです。これはエントリーのテキストです。これはエントリーのテキストです。
				</p>
			</div>
			<div class="right0">
				<h3>エントリー3</h3>
				<p>
					これはエントリーのテキストです。これはエントリーのテキストです。これはエントリーのテキストです。
				</p>
			</div>
		</div>
	

css

		div.entry {
			width: 530px;
		}
		div.entry div {
			width: 170px;
			background: #EFEFEF;
			float: left;
			margin-right: 10px;
		}
		div.entry div.right0 {
			margin-right: 0;
		}
	

※実際はclearfixとかしなくちゃ崩れそうですが長くなりそうなので省略します。

3の倍数だけクラスを割り当てるテンプレート

Wordpressのタグを埋め込んでいきます。
通常の縦方向の並びの場合こんな感じになりますよね。

wordpressテンプレート

		<div class="entry">
			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			<div>
				<h3><?php the_title(); ?></h3>
				<p><?php echo get_the_excerpt(); ?></p>
			</div>
			<?php endwhile; else: ?>
				<p><?php _e('no post'); ?></p>
			<?php endif; ?>
		</div>
	

htmlだと３つのブロックしか用意しませんでしたが、ブログのエントリーは３つ以上あるものが普通だと思うのでそれ以上の数にも対応した方がよさそうです。
3.6.9……という３の倍数だったらクラスを割り当てればいいんですね。
それにはループ回数を入れる変数を一つ用意して、現在のループ回数に応じてif文で条件分岐すればよさそうです。
if文は以下のようにするとよさそうです。

if ($hoge % 3 == 0 )

3で割って余りが0だったら3の倍数ということですね。
ではこれを前述のテンプレートに組み込んでみます。

wordpressテンプレート

		<?php $count = 1; //ループ回数を入れる変数 ?>
		<div class="entry">
			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			<?php
				//３番目だったらclass=right0、それ以外はクラスなし
				if ($count%3 == 0) {
					echo '<div class="right0">';
				} 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>
	

もし４つ並びの場合なら$count%4にして、５なら$count%5にすればいいんですね。

ついでにストライプっぽいこともやってみる

これでｘ番目にクラスを適用するということができました。
これさえできれば表現の幅がすこし広がりそうです。
少々脱線しますが、たとえばエントリーをストライプ模様にしたいとかも簡単ですよね。

wordpressテンプレート

		<?php $count = 1;?>
		<div class="entry">
			<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			<?php
				if ($count%2 == 0) {
					echo '<div class="even">';
				} else {
					echo '<div class="odd">';
				}
			?>
				<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>
	

交互にクラスを割り当てれば良いわけですから$count%2にするだけですね。

ぴったり横並びはcssだけで対応でる！

ここまで書いておいてあれですが、x番目にright0を……とかしなくてもcssだけでうまく解決できたりします。

css

		div.entry	{
			width: 540px;
			margin-right: 10px;
			_zoom: 1;   
			overflow: hidden;
		}
		div.entry div	{
			width: 170px;
			margin-right: 10px;
			float: left;
			background: #EFEFEF;
		}
	

overflow: hiddenすればぴったりと収まるみたいです。zoomはIE対策ですね。
といった具合に今回はかなりの無駄記事コーナーでした。

参考サイト

コーディングするのが楽になるかも？と思うCSSテクニックのまとめ | CSS Lecture