単体の投稿記事

前述したように、WordPressは別々のファイルが責任分担をして情報を表示している。トップページはindex.phpによって処理されるが、このファイルのスタイリングはすでに済んでいる。では、投稿記事のタイトルをクリックしてみよう。ちょっと困った秘密が露見する：

魅力的とは言いがたいスタイル！この乱雑さの理由は、単体の投稿記事がindex.phpではなくsingle.phpで処理されているためだ。single.phpにまだスタイリングを施していないためにこうなったわけだ。ではこれからスタイリングしていこう。

<?php get_header(); ?><div id=“content” class=“widecolumn”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class=“navigation”>
<div class=“alignleft”><?php previous_post(‘« %’,‘’,‘yes’) ?></div><div class=“alignright”><?php next_post(‘ % »’,‘’,‘yes’) ?></div>

</div>

<div class=“post”>
<h2 id=“post-<?php the_ID(); ?>”><a xhref=“<?php echo get_permalink() ?>” rel=“bookmark” title=“Permanent Link: <?php the_title(); ?>”><?php the_title(); ?></a></h2>
<div class=“entrytext”>
<?php the_content(‘<p class=”serif”>Read the rest of this entry »</p>’); ?>
<?php link_pages(‘<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>
<p class=“postmetadata alt”>
<small>

This entry was posted
<?php /* This is commented, because it requires a little adjusting sometimes.

You’ll need to download this plugin, and follow the instructions:
http://binarybonsai.com/archives/2004/08/17/time-since-plugin/ */

/* $entry_datetime = abs(strtotime($post->post_date) – (60*120)); echo time_since($entry_datetime); echo ‘ ago’; */ ?>
on <?php the_time(‘l, F jS, Y’) ?> at <?php the_time() ?>

and is filed under <?php the_category(‘, ‘) ?>.
You can follow any responses to this entry through the <?php comments_rss_link(‘RSS 2.0′); ?> feed.
<?php if ((‘open’ == $post-> comment_status) && (‘open’ == $post->ping_status)) {

// Both Comments and Pings are open ?>
You can <a xhref=“#respond”>leave a response</a>, or <a xhref=“<?php trackback_url(display); ?>”>trackback</a> from your own site.
<?php } elseif (!(‘open’ == $post-> comment_status) && (‘open’ == $post->ping_status)) {

// Only Pings are Open ?>
Responses are currently closed, but you can <a xhref=“<?php trackback_url(display); ?> “>trackback</a> from your own site.
<?php } elseif ((‘open’ == $post-> comment_status) && !(‘open’ == $post->ping_status)) {

// Comments are open, Pings are not ?>
You can skip to the end and leave a response. Pinging is currently not allowed.
<?php } elseif (!(‘open’ == $post-> comment_status) && !(‘open’ == $post->ping_status)) {

// Neither Comments, nor Pings are open ?>
Both comments and pings are currently closed.
<?php } edit_post_link(‘Edit this entry.’,‘’,‘’); ?>
</small>
</p>
</div>
</div>

<?php comments_template(); ?>
<?php endwhile; else: ?>

<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
<?php endif; ?>

</div>

<?php get_footer(); ?>

基本的な構造はindex.phpと同じだ – ヘッダーが表示され、次にコンテンツが表示され、次にフッターが表示される。さらに詳しく見てみると次のコードがある：

<div id=“content” class=“widecolumn”>

トップページのレイアウトでは「narrowcolumn」を使用していたが、ここでは「widecolumn」を使用している。これはまだこのチュートリアルでは使用していなかったが、CSSを通じて見た目を変えるための特別なフックを提供してくれる。

また、次のコードもある：

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

単体の投稿記事がループを持つというのは何か変に思えるかもしれないが、これによりテーマに一貫性を持たせている。WordPressは have_postsが一つの投稿記事しか返さないようにしている。ここでループを使用することによって、WordPressが２つ以上の投稿記事を表示させることができる。

トップページのようにここにもナビゲーションリンクがある：

<div class=“navigation”>
<div class=“alignleft”><?php previous_post(‘« %’,‘’,‘yes’) ?></div><div class=“alignright”><?php next_post(‘ % »’,‘’,‘yes’) ?></div>
</div>

ここではこれらのリンクは前後の投稿記事へ移動する。スタイルはトップページとまったく同じだが呼ばれる関数は違う。

次が作業の大部分、投稿記事だ：

<div class=“post”>
<h2 id=“post-<?php the_ID(); ?>”><a xhref=“<?php echo get_permalink() ?>” rel=“bookmark” title=“Permanent Link: <?php the_title(); ?>”><?php the_title(); ?></a></h2><div class=“entrytext”>
<?php the_content(‘<p class=”serif”>Read the rest of this entry »</p>’); ?><?php link_pages(‘<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>

<p class=“postmetadata alt”>
<small>
This entry was posted

<?php /* This is commented, because it requires a little adjusting sometimes.
You’ll need to download this plugin, and follow the instructions:
http://binarybonsai.com/archives/2004/08/17/time-since-plugin/ */

/* $entry_datetime = abs(strtotime($post->post_date) – (60*120)); echo time_since($entry_datetime); echo ‘ ago’; */ ?>
on <?php the_time(‘l, F jS, Y’) ?> at <?php the_time() ?>

and is filed under <?php the_category(‘, ‘) ?>.
You can follow any responses to this entry through the <?php comments_rss_link(‘RSS 2.0′); ?> feed.
<?php if ((‘open’ == $post-> comment_status) && (‘open’ == $post->ping_status)) {

// Both Comments and Pings are open ?>
You can <a xhref=“#respond”>leave a response</a>, or <a xhref=“<?php trackback_url(display); ?>”>trackback</a> from your own site.
<?php } elseif (!(‘open’ == $post-> comment_status) && (‘open’ == $post->ping_status)) {

// Only Pings are Open ?>
Responses are currently closed, but you can <a xhref=“<?php trackback_url(display); ?> “>trackback</a> from your own site.
<?php } elseif ((‘open’ == $post-> comment_status) && !(‘open’ == $post->ping_status)) {

// Comments are open, Pings are not ?>
You can skip to the end and leave a response. Pinging is currently not allowed.
<?php } elseif (!(‘open’ == $post-> comment_status) && !(‘open’ == $post->ping_status)) {

// Neither Comments, nor Pings are open ?>
Both comments and pings are currently closed.
<?php } edit_post_link(‘Edit this entry.’,‘’,‘’); ?>
</small>
</p>

</div>

</div>

細かいことについてはほとんど書いてきたが、ここで注目に値する違いは表示されるメタ情報の量だ – 単体の投稿記事ではより多くのメタ情報が表示される。いくつか重要な点を上げておこう：

<div class=“entrytext”>
<?php the_content(‘<p class=”serif”>Read the rest of this entry »</p>’); ?>

ここでもコンテンツはdiv要素に囲まれているが、今回は「entry」ではなく「entrytext」と呼ばれている。不思議なことに、 the_contentは「more text」パラメータと共に呼び出されている。Codexには、単体の投稿記事の場合、the_contentは「more text」パラメータを無視すると記されている。ここに含まれているのは完全を期すためと、実際にこのループが複数の投稿記事を持つ場合に備えてのことだろう。

<?php link_pages(‘<p><strong>Pages:</strong> ‘, ‘</p>’, ‘number’); ?>

これは新しい関数で、その投稿記事内のすべてのページへのリンクを表示する。複数ページは <!--nextpage-->のクイックタグで作成することができる。

<p class=“postmetadata alt”>

これがメタデータ部分の始まりになる。トップページと同じように、これは「postmetadata」のCSSクラスを使用しているが、さらに追加で「alt」クラスも含まれている。複数のCSSスタイルを持つことは何の問題も無く、ブラウザはそれらを重ね合わせて処理をする。

次にコメント入りのＰＨＰコードがある：

<?php /* This is commented, because it requires a little adjusting sometimes.
You’ll need to download this plugin, and follow the instructions:
http://binarybonsai.com/archives/2004/08/17/time-since-plugin/ *//* $entry_datetime = abs(strtotime($post->post_date) – (60*120)); echo time_since($entry_datetime); echo ‘ ago’; */
?>

これはコメントアウトされているので実行されないし、HTML内にもまったく現れない。これは「time since」プラグインを使用するためにKubrickによって提供されている単純なフックだ。

最後にメタデータがくる：

<?php if ((‘open’ == $post-> comment_status) && (‘open’ == $post->ping_status)) {// Both Comments and Pings are open ?>
You can <a xhref=“#respond”>leave a response</a>, or <a xhref=“<?php trackback_url(display); ?>”>trackback</a> from your own site.
<?php } elseif (!(‘open’ == $post-> comment_status) && (‘open’ == $post->ping_status)) {// Only Pings are Open ?>
Responses are currently closed, but you can <a xhref=“<?php trackback_url(display); ?> “>trackback</a> from your own site.
<?php } elseif ((‘open’ == $post-> comment_status) && !(‘open’ == $post->ping_status)) {

// Comments are open, Pings are not ?>
You can skip to the end and leave a response. Pinging is currently not allowed.
<?php } elseif (!(‘open’ == $post-> comment_status) && !(‘open’ == $post->ping_status)) {

// Neither Comments, nor Pings are open ?>
Both comments and pings are currently closed.
<?php } edit_post_link(‘Edit this entry.’,‘’,‘’); ?>

分かりにくいかもしれないが、これは投稿記事のさまざまな属性をチェックして、それにしたがって情報を表示している。

単体ページのスタイリング

single.phpをスタイリングするための最初のステップはindex.phpからのラッパー導入だ。これによりページが正しく表示される。

<?php get_header(); ?><div id=“wrapper”>

<div id=“content” class=“widecolumn”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class=“navigation”>
<div class=“alignleft”><?php previous_post(‘« %’,‘’,‘yes’) ?></div>

<div class=“alignright”><?php next_post(‘ % »’,‘’,‘yes’) ?></div>

</div>

<div class=“post”>
Post code
</div>
<?php comments_template(); ?>

<?php endwhile; else: ?>
<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>

<?php endif; ?>
</div>
<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

これでこのファイルはindex.phpとほとんど同じになった。また、どこにいてもナビゲートできるように、ここにはサイドバーも挿入した。もちろん、 Kubrickスタイルがお好みなら取り除いてもらっても構わない。もうひとつ、このファイルを整理するために上記のコメント入りＰＨＰコードも取り除いた。

できあがったページを見ればすべてがほとんど正常に見えるだろう：

さて、ご覧になれば分かるかと思うが、「次」と「前」の投稿記事のリンクにスタイルを追加する必要がある。トップページも同じCSSのクラスを使用しているので両方ともスタイリングしてしまおう。

.navigation
{
display: block;
margin-top: 10px;
margin-bottom: 40px;}.alignleft
{
float: left;
text-align: left;

width: 50%;
}

.alignright
{
float: right;

text-align: right;
width: 50%;
}

注意してほしいのだが、「float」要素を使用するときは常に幅の確認と調整をしたほうがいい。
これで正しいナビゲーションリンクができた：

メタデータ

まだスタイリングを施していない重要な要素がいくつかある。その一つはメタデータで、その投稿記事自身の情報だ。メタデータに割り当てられているCSSクラスはsingle.phpとindex.phpの両方とも「metadata」だ。これはすでにindex.phpでスタイリングしているので single.phpでもこれを継承してみる：

これは私たちのテーマにはそぐわない。もしこのメタデータを変更するとトップページのスタイルも変更する必要があるが、そんなことはしたくない。 single.phpのメタデータ用クラス名を変更して新しいクラスを作ることもできるが、その必要はない。その代わり、single.phpの投稿記事が「entrytext」 divに囲まれていることを利用しよう。これによって単体の投稿記事ページのメタデータのみのスタイリングができる：

.entrytext .postmetadata
{
font-size: 1.1em;
background-color: #FDE5C3;width: 70%;
margin: 2em auto3.5em auto;
border: 1px dotted #e9b17b;padding: 5px;
padding-left: 45px;
background: #FDE5C3 url(images/metadata.png) no-repeat scroll top left;

}

ここでは何をおこなっているのか？フォントが大きくなり、この要素全体にボーダーと背景色を与えた。幅を縮小し、この要素を中央に置いた。最も目立つ追加は背景画像で、テキストは左側に余白を取っている。効果のほどを見てみよう：

とても良くなった。

最後の要素

もう一つ言及しておくべき関数は：

<?php comments_template(); ?>

Codexを見ると、これは単にテーマからcomments.phpをインクルードするためのものだと分かる。comments.phpは投稿記事に寄せられたすべてのコメントを表示するもので、詳細については次のページで説明しよう。