三列の記事リスト

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

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

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

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

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

<?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の値が6の倍数になった場合に6で割り、余剰で判定し、6件出力後にdivをを閉じるようにするというコードです。

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

3記事出力後にに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の下に書き足してください。6件ずつの場合は6件ずつのループ毎に表示できます。

まとめ

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

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

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