WordPress テーマの詳説：第四章

Registry First Aid will find these invalid entries and remove them from your registry. With Registry First Aid, your Windows registry will be always clean and correct, helping your programs load faster and speeding up your computer. Fast, easy to use, PC speed testing and benchmarking. PassMark PerformanceTest allows you to objectively benchmark a x blades keygen PC using a variety of different speed tests and compare the results to other computers. Twenty-eight standard benchmark tests are available in six test suites plus there are seven advanced testing windows for custom benchmarking. In addition to the standard tests, there are 7 summary results plus the overall PassMark Rating result. The benchmark results are xilisoft keygen presented as easy to read bar charts so that you dont need to spend hours studying the number to know the result. Timing for the tests is done using high resolution timers, which are accurate to approximately 1 millionth of a second on most PCs. Create professional-quality advertising, sophisticated print designs and electronic documents with PagePlus sims 2 keygen X5, the best-in-class desktop publisher.

単体の投稿記事

前述したように、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は投稿記事に寄せられたすべてのコメントを表示するもので、詳細については次のページで説明しよう。