この記事は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 … […]