三列の記事リスト

当ブログはリニューアルを行いましたが、個人的なメモにもしたい・・ということでその際に書いたコードやTipsを紹介していきたいと思います。

現在PCテーマでは記事リストを3カラム（三列）でお見せしているのですが、WordPressで作る以上PHPでのプログラミングは不可欠でした。

記事を三列で表示し、divでグループ化したい・・ということをWordPressで実現するためには少し難しいコードを書かなければいけません。

結構凡庸性のあるコードだとは思うのですが、意外と書いている人が少ないのでコピペで使えるように紹介しようと思います。

３カラムで記事リスト表示するコード

<?php for ( $i = 1; have_posts(); $i++ ) : the_post(); ?>
        <?php /** 開始タグを出力 */ ?>
        <?php if ( ( $i % 6 ) == 1 ) : ?>
        <div>
                <!-- .box6 -->
        <?php endif; ?>
        <!-- .posts -->
       	<article>
		<!-- ここに繰り返すコードを記述 -->
       	</article>
        <!-- /.posts -->

        <?php /** 6件出力後終了タグを出力 */ ?>
        <?php if ( ( $i % 6 ) == 0 ) : ?>
       　 </div>
       	<!-- /.box6 -->
        <?php endif; ?>
<?php endfor; ?>

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

解説

制作するにあたり、コードはこちらを参考にさせて頂きました。

今回は余剰判定するループになります。

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

変数iの値が６の倍数になった場合に６で割り、余剰で判定し、６件出力後にdivをを閉じるようにするというコードです。

HTMLの構造とCSSの設計次第というところもありますが、6という値を変更すれば５列にできますし、２とすればで２列ずつ表示できます。

３記事出力後ににdivを閉じたいときのコード

三列ずつ表示する場合はこちらのコードで。

<?php for ( $i = 1; have_posts(); $i++ ) : the_post(); ?>
        <?php /** 開始タグを出力 */ ?>
        <?php if ( ( $i % 3 ) == 1 ) : ?>
        <div>
                <!-- .box3 -->
        <?php endif; ?>
        <!-- .posts -->
       	<article>
		<!-- ここに繰り返すコードを記述 -->
       	</article>
        <!-- /.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; ?>

また、カラムのdivの下に表示したいものがある場合は『投稿数が3で割り切れずにループが終了した場合終了タグを出力』のdivの下に書き足してください。６件ずつの場合は６件ずつのループ毎に表示できます。

まとめ

◯件ずつで記事をを表示したい、出力したい・・というデザインにしたい場合、今回のコードで大体実現出来ると思います。

ブログなどで３カラムの記事リストを出力し、途中になにかを挟みたいという場合に効果的に使えるかと思います。

アルゴリズムをしっかり理解していれば、そう難しくないかと思いますので同じようなデザインを実現したい場合に是非参考にしてみてください。