ショウジンブログ on Hatena

“お芝居をしないと、この社会では異邦人として扱われるほかない”

複数のclass名をランダムにループで出力@WordPress

たとえば、ホームで出力する記事一覧において。

各記事に対して異なるclass名を与えたい。(cssでレイアウト、デザインをコントロールするため)

よくあるのは

・最初の記事 ・最後の記事 ・奇数番目の記事 ・偶数番目の記事

を判別して、それ用に用意したclass名を付与するやつ。

そうではなくて、例えば10件出力する場合にその10件それぞれに異なる(でも重複してもいいのでidではなくclass)class名を「ランダム」で付与したいと。

事前に

a, b, c, d

といったclass名を用意しておき、これらをランダムで各投稿に対して付与することにします。

以下がコード。

<?php $class_name = array('a', 'b', 'c', 'd', 'e'); ?> // 用意したclass名を配列$class_nameに格納
<?php query_posts('showposts=5&orderby=rand&cat=-6,-3'); ?>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
 <li class="main loop">
  <div class="wrapper_body-entry <?php echo $class_name[rand(0, count($class_name)-1)]; ?>">
   <h1 class="title-post">
    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
   </h1>
   <div>カテゴリ:<?php the_category(', '); ?></div>
   <?php the_content('... 続きを読む'); ?>
  <!-- // .wrapper_body-entry --></div>
 </li>
<?php endwhile; endif; ?>

これでブラウザで表示するたびにランダムで表示内容も変わりますし、そのときに表示される各投稿のclass名もランダムで変化するので、jQuery Masonryなんかを使って異なる幅のボックスを隙間なくタイリングさせるグリッドレイアウトが実現できます。

WordPressの公式フォーラムが参考になりました。

フォーラム » 複数あるclass名をランダムでループに出力 — WordPress

ようするに、先に使いたいclass名を用意して、それを変数(配列)に格納(a,b,c,d,e)。

そしてこれをループ内での出力させたい部分(投稿のボックス=div等)にrand関数を使って記述するということです。

一歩先にいくWordPressのカスタマイズがわかる本

一歩先にいくWordPressのカスタマイズがわかる本