Twenty Ten テーマの記事を枠線で囲む方法

WordPressが3.0になり、新テーマTwenty Tenがデフォルトになりました。

このTwenty Tenテーマですが、記事が枠線で囲まれていないこともあり、記事と記事の境い目がわかりにくくなっています。

そこで、個々の記事を枠線で囲み、それぞれの記事を目立ちやすくカスタマイズします。

枠線で囲む方法は、記事単位を＜div＞で囲み、その＜div＞をCSSで装飾します。

まず、Twenty Ten　ディレクトリ内のloop.phpを開きます。そして、いわゆるWordPressループと呼ばれる次の行をみつけます。

<?php while ( have_posts() ) : the_post(); ?>

この行を見つけたら、次の１行を書き加えます。

<?php while ( have_posts() ) : the_post(); ?>
<div class="kizi">

記事を囲むdivクラスのため、kiziとしましたが、他のクラスとかぶらなければ何でも良いです。

次に、このdivを閉じるタグを記入する場所をさがします。

<?php endwhile; // End the loop. Whew. ?>

繰り返しである、while　が終了する、endwhile　を探します。そして、divの閉じるタグをその前に書き加えます。

</div><!-- kizi -->
<?php endwhile; // End the loop. Whew. ?>

なお、記事が終わることを表すための＜！－－kizi－－＞も加えて保守しやすくしています。

そして、このdivを枠線で囲むため、style.cssにクラスkiziのCSSを次のように書き加えます。

div.kizi {border: solid 1px silver;
 padding: 18px;
 margin: 0px 0px 20px 0px ;}

ここでは、枠線は、直線で、1px、シルバーとして、枠線内のパディングは、18px、マージンは、他の記事との間隔として、下部を20pxとしています。

これで、記事に枠線が表示されるはずです。

補足

loop.phpで上記変更を加えても、個別ページには、枠線が付きません。個別ページに枠線を付けるためには、single.phpにも、上記のように変更を加える必要があります。

つまり、ワードプレスループの後に、divクラスを書き加えます。

<?php if ( have_posts() ) while ( have_posts() ) :
the_post(); ?>
<div class="kizi">

そして、ループ終了の前に、divの閉じタグを書き加えます。

</div><!-- kizi -->
<?php endwhile; // end of the loop. ?>

single.phpで、上記変更をすれば、CSSのkiziクラスが適用されるので、個別ページでも枠線が付くようになります。

さらに補足

投稿だけでなく、ページにも枠線をつけるには、同様の記述をpage.phpに書き込む必要があります。要領は、上の二つと同じようにするだけです。