WordPressで投稿記事を1行3カラムで表示させたい時の出力方法の例

WordPressでブログじゃないWebサイトを制作する時、投稿データを3カラムずつ表示させるパターンって良くあると思います。

そのサンプルを作ってみました:)

  
この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

photo credit: Eric M Martin via photopin cc
PHPやWordPressのバージョンによってはもしかしたら上手く動作しないかも知れません。

PHPの演算子には%(剰余)があり、これは「$a % $b」とした場合に$aを$bで割った余りを求めるものです。
これが使われてる例を割りと見かけたりしますが、今回は試しに別のパターンを作ってみました。

box3というクラスのdivの中にpostsというクラス名のdivが最大3つ入る例です。

出力したいHTML

<!-- .box3 -->
<div class="box3">
	<!-- .posts -->
	<div class="posts">
		<h2>記事タイトル1</h2>
		<p>記事本文1</p>
	</div>
	<!-- /.posts -->
			
	<!-- .posts -->
	<div class="posts">
		<h2>記事タイトル2</h2>
		<p>記事本文2</p>
	</div>
	<!-- /.posts -->
			
	<!-- .posts -->
	<div class="posts">
		<h2>記事タイトル3</h2>
		<p>記事本文3</p>
	</div>
	<!-- /.posts -->
</div>
<!-- /.box3 -->
	
<!-- .box3 -->
<div class="box3">
	<!-- .posts -->
	<div class="posts">
		<h2>記事タイトル4</h2>
		<p>記事本文4</p>
	</div>
	<!-- /.posts -->
			
	<!-- .posts -->
	<div class="posts">
		<h2>記事タイトル5</h2>
		<p>記事本文5</p>
	</div>
	<!-- /.posts -->
</div>
<!-- /.box3 -->

このようなHTMLを出力したい場合、下記のPHPコードを書いてみました。

テーマのPHP

<?php while( have_posts() ) : ?>
 
	<!-- .box3 -->
	<div class="box3">
		<?php /** 3カラムで表示させるためのサブループ */ ?>
		<?php for ( $i = 0; $i < 3; $i++ ) : ?>
			<?php
			//投稿数が3で割り切れるとは限らないので、途中で次の投稿データがなくなった場合
			if ( ! have_posts() ) {
				//終了タグを出力
				echo '</div>
					  <!-- /.box3 -->';
				break 2;	//親ループを抜ける
			}
			the_post();  //投稿データのロード
			?>
			<!-- .posts -->
			<div class="posts">
				<h2><?php the_title(); ?></h2>
				<?php the_content(); ?>
			</div>
			<!-- /.posts -->
		<?php endfor; ?>
	</div>
	<!-- /.box3 -->
 
<?php endwhile; ?>

下記のように普通にbreakすると無限ループになる場合があります。

break;

なお、下記のようにすると1行あたりの出力件数が5件になります。

<?php for ( $i = 0; $i < 5; $i++ ) : ?>

テーマのPHP(例2)

こっちは%(剰余)を使用したパターンです。参考までに載せておきます。

<?php for ( $i = 1; have_posts(); $i++ ) : the_post(); ?>

	<?php /** 開始タグを出力 */ ?>
	<?php if ( ( $i % 3 ) == 1 ) : ?>
		<!-- .box3 -->
		<div class="box3">
	<?php endif; ?>
	
	<!-- .posts -->
	<div class="posts">
		<h2><?php the_title(); ?></h2>
		<?php the_content(); ?>
	</div>
	<!-- /.posts -->
	
	<?php /** 3件出力後終了タグを出力 */ ?>
	<?php if ( ( $i % 3 ) == 0 ) : ?>
		</div>
		<!-- /.box3 -->
	<?php endif; ?>
<?php endfor; ?>

<?php /** 投稿数が3で割り切れずにループが終了した場合終了タグを出力 */ ?>
<?php if ( ( $i % 3 ) != 1 ) : ?>
	</div>
	<!-- /.box3 -->
<?php endif; ?>

テーマのPHP(例3)

頻繁に使うのであればfunction化するのもありですね。上の例を流用して適当に書きましたが、もっと汎用的にも書けると思います。

<?php the_box( 3 ); //3カラムで投稿データを表示する ?>

<?php function the_box( $column ) { ?>
	<?php while ( have_posts() ) : ?>
	 
		<!-- .box3 -->
		<div class="box3">
			<?php for ( $i = 0; $i < $column; $i++ ) : ?>
				<?php
				//次の投稿データがなくなった場合
				if ( ! have_posts() ) {
					//終了タグを出力
					echo '</div>
						  <!-- /.box3 -->';
					return;
				}
				the_post();  //投稿データのロード
				?>
				<!-- .posts -->
				<div class="posts">
					<h2><?php the_title(); ?></h2>
					<?php the_content(); ?>
				</div>
				<!-- /.posts -->
			<?php endfor; ?>
		</div>
		<!-- /.box3 -->
	<?php endwhile; ?>
<?php } /** endfunction */?>

CSSの例

ざっくりですがCSSも書いておきますねー、イメージが湧きやすいかと思います。
あくまで例ですが例えばこんなイメージ。

style.css

@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	}

h2 {
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 1.2em;
	}
	
.box3 {
	width: 900px;
	margin: 5px;
	font-size: .9em;
	overflow: auto;
	}
	.box3 .posts {
		float: left;
		width: 260px;
		margin: 0 4px;
		padding: 15px;
		border: 1px solid #999;
		background: #f9f9f9;
		}
  

共有やブックマークなど

One Response to “WordPressで投稿記事を1行3カラムで表示させたい時の出力方法の例”

  1. […] WordPressで投稿記事を1行3カラムで表示させたい時の出力方法の例 – WebCake … […]