記事の一覧を2列にする　Posts in two columns

wordpressのデフォルトでは、記事の一覧は1列で表示されます。

いわゆるこんな感じですね。

サムネイルと記事の表示はまた次回にまわします。

これを記事のcolumn幅で2列表示させたいと思います。

こちらは、wordopress英語版のフォーラムに記載されておりました。

<table cellpadding="10" cellspacing="10" >
<table width="750px">
 <?php  query_posts('cat=21&showposts=4'); //表示数と、カテゴリー名 ?>
<?php
$col = 0;
$cols_per_row = 1;
while (have_posts()) : the_post();
  if($col == 0) echo '<tr>';
  ?>
  <td class="column'<?php echo $col; ?>" style="vertical-align: top">
  <div class="post" id="post-'<?php the_ID(); ?>'">
	<div class="title" ><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></div>
	<div class="descr"><?php the_time('Y/m/d') ?></div>
	<div class="entry">
	<?php the_excerpt(); ?>  

	</div>
  </div>
  <td>
  <?php
  if($col++ >= $cols_per_row){
	$col = 0;
	echo '</tr>';
  }
endwhile;
?>

</table>

①table width=”750px”←はご自分の記事のテーブル幅

②?php  query_posts(‘cat=21&showposts=4′);←は表示させたいカテゴリーIDと見せたい記事数。2列なので偶数が良いでしょう。

③$cols_per_row = 1;←こちらの数字でカラム数を変えます。「0」であれば、1列表示、「1」であれば2列表示になります。

④  <?php the_excerpt(); ?> でサムネイル表示させます。詳しくは次回。

.columns{
overflow:hidden;

}
.columns .column{
float:left;
width:33%;
}
.title{
        font-size: 17px;
        text-decoration:none;
        background:#eee;
        border-left:7px solid #400040;
        padding:.3em .9em
    }  

.descr{
       font-size: 15px;
       padding:.3em
    }

ｃｓｓは上のモノです。

これでこんな感じに。

なりました。

すこし他とは変わったカタチで記事一覧を表示させたい時には良いですね。
topページを新しく作成して、ダラ~っと一列で表示させたくない時なんかに良いです。