WordPress のテーマを改造してみる(その2) - 記事を枠で囲む

WordPress のテーマによっては、以下の様にどこまでが一つの記事か見にくい場合が出てくる。

タイトルは大文字になっているし、よく見るとどこまでが一つの記事かわかるが、直感的には、ちょっと見にくい。

一つ一つの記事を、薄いねずみ色の枠線で囲って、もっと見やすいデザインにしてみる。

トップのページは、 index.php というファイルを呼び出す事で生成されている。
WordPress の記事は、データベースに格納されていて、一つ一つの記事は、ユーザーに見えるようなフラットファイルとしては存在していない。（HTMLをコリコリ手で書いていた時代しかしらなかったので、初めて知った時は、ちょっと驚きだった）

WordPress では、php の関数を使って、一つ一つの記事を DBから呼び出している。その部分のソースは・・・

<div id="content" class="narrowcolumn" role="main">

<?php if (have_posts()) : ?>

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

<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s', 'kubrick'), the_title_attribute('echo=0')); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time(__('F jS, Y', 'kubrick')) ?> </small>

<div class="entry">
<?php the_content(__('Read the rest of this entry »', 'kubrick')); ?>
</div>

<p class="postmetadata"><?php the_tags(__('Tags:', 'kubrick') . ' ', ', ', '<br />'); ?> <?php printf(__('Posted in %s', 'kubrick'), get_the_category_list(', ')); ?> | <?php edit_post_link(__('Edit', 'kubrick'), '', ' | '); ?> <?php comments_popup_link(__('No Comments »', 'kubrick'), __('1 Comment »', 'kubrick'), __('% Comments »', 'kubrick'), '', __('Comments Closed', 'kubrick') ); ?></p>
</div>

<?php endwhile; ?>

<div class="navigation">
<div class="alignleft"><?php next_posts_link(__('« Older Entries', 'kubrick')) ?></div>
<div class="alignright"><?php previous_posts_link(__('Newer Entries »', 'kubrick')) ?></div>
</div>

<?php else : ?>

<h2 class="center"><?php _e('Not Found', 'kubrick'); ?></h2>
<p class="center"><?php _e('Sorry, but you are looking for something that isn’t here.', 'kubrick'); ?></p>
<?php get_search_form(); ?>

<?php endif; ?>

</div>

テーマによって、コードは異なるだろうが、大体同じような感じだと思われる。 (デフォルトのテーマでは↑の部分が、index.php のほぼ全てだ）

while ～ endwhile までが、記事を一つ一つ呼び出して、出力していくループ・ルーチンだ。
ここに挟まれた部分で注目するのは

the_title() 記事のタイトルを表示
the_content() 記事の内容を表示

だ。これらがある部分がひとつの記事を示している。

とすると、、、一つの記事を囲んでいる、class タグの始まりは、<div <?php post_class(); ?> ぽい。ただ、ちょっと見慣れない書き方だ。
CSS では、

<div class=クラス名> クラス名のスタイルを適用したい部分 </div>

で、囲った部分に一つのスタイルを適用するのだが、 WordPress 2.7 では、class=クラス名の代わりに、post_class() を使った以下の書き方ができるようになったらしい。（WordPress.日本語内の解説記事)

<div post_class()> クラス名のスタイルを適用したい部分 </div>

post_class() を実行すると、 class=”クラス名” が代わりに出力される。初心者にはちょっととっつきにくくなったが、多分、ヘビーユーザー？には、これによって利便性が増していると思われる。
状況に応じていろいろな値を返すが、ここでは、post_class() を実行すると、class =”post” という文字列が返ってくるらしい。つまり個別の記事のスタイルを定義するクラスは、post という名前のクラスという事が割る。なので、 post というクラス名を css ファイル内で捜索する。

このpost クラスは、style.css に定義してあった。（css ファイル名は、テーマによって異なる。この場合は、デフォルトのテーマ名）