この記事は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;
}
[…] WordPressで投稿記事を1行3カラムで表示させたい時の出力方法の例 – WebCake … […]