WordPress テーマの詳説:第四章

トップページ

デフォルトでは、フロントページは最新の投稿をいくつか表示するようになっている。表示する投稿の数は管理画面で設定できるが、その順序とレイアウトはテーマとindex.phpによって定められる。 index.phpファイルは既に調べているので、今回は「post」セクションを調べ上げていこう。

<div id=“content” class=“narrowcolumn”><?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class=“post”>
<h2 id=“post-<?php the_ID(); ?>”><a xhref=“<?php the_permalink() ?>” rel=“bookmark” title=“Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h2><small><?php the_time(‘F jS, Y’) ?> <!– by <?php the_author() ?> –></small>
<div class=“entry”>
<?php the_content(‘Read the rest of this entry »’); ?>

</div>

<p class=“postmetadata”>Posted in <?php the_category(‘, ‘) ?> <strong>|</strong> <?php edit_post_link(‘Edit’,‘’,‘<strong>|</strong>’); ?> <?php comments_popup_link(‘No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?></p>
<!–
<?php trackback_rdf(); ?>

–>
</div>

<?php endwhile; ?>

<div class=“navigation”>
<div class=“alignleft”><?php posts_nav_link(‘’,‘’,‘« Previous Entries’) ?></div>

<div class=“alignright”><?php posts_nav_link(‘’,‘Next Entries »’,‘’) ?></div>

</div>

<?php else : ?>

<h2 class=“center”>Not Found</h2>

<p class=“center”><?php _e(“Sorry, but you are looking for something that isn’t here.”); ?></p>
<?php include (TEMPLATEPATH . “/searchform.php”); ?>

<?php endif; ?>

</div>

ここにはかなりの量のPHPコードがあるが、これはいくつかの論理的ステップに分解することができる:

  • 投稿記事があると(if)
    • ループがスタート
      • 投稿記事のデータを取得するために「the_post」を呼び出す
      • 投稿記事を表示する
      • ナビゲーションリンクを表示
    • ループが終了
  • 投稿記事が無ければ(else)無いというメッセージと検索フォームを表示

index.php に関してはファイル名以外に必須の物はない。コードを変更して、多くても少なくても必要なだけの情報を表示することができるし、投稿の選択をさらに複雑にした表示をするために拡張することもできる。また、ループを複数回実行し、各回ごとに特定カテゴリーや投稿者の投稿記事を表示させることもできる。可能性は無限だ。

しばらくはKubrickがどのようにフロント・ページを処理しているのかを見ていこう。 以下のコードは残りのコードからループを抜き出したものだ:

<?php while (have_posts()) : the_post(); ?><div class=“post”><h2 id=“post-<?php the_ID(); ?>”><a xhref=“<?php the_permalink() ?>” rel=“bookmark” title=“Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h2>

<small><?php the_time(‘F jS, Y’) ?> <!– by <?php the_author() ?> –></small>
<div class=“entry”>
<?php the_content(‘Read the rest of this entry »’); ?>

</div>

<p class=“postmetadata”>Posted in <?php the_category(‘, ‘) ?> <strong>|</strong> <?php edit_post_link(‘Edit’,‘’,‘<strong>|</strong>’); ?> <?php comments_popup_link(‘No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?></p>
<!–
<?php trackback_rdf(); ?>
–>

</div>

<?php endwhile; ?>

前に記したwhile文でループが始まっているのが分かるだろう:

while (have_posts()) : the_post ()

PHPでは中括弧の代わりにコロンと endwhileが使えるのを知っておくと便利かもしれない。どちらでもよいのだが、ここではHTMLとPHPの大量のコード内の中括弧を簡単に解けるのでコロンとendwhileが使われている。このコードは次のように書くこともできる:

while (have_posts ())
{
the_post ();
}

the_postを使用して投稿情報を取得した後、このコードはpostクラスを持ったdiv内にすべてを表示する。 その結果、フロントページはラッピングする’content’ divで構成され、この中に各投稿情報を持ったたくさんの投稿記事が出現する。

現在のKubrickのレイアウトでは投稿記事は次のように表示される:

  • タイトル
  • 日付
  • コンテンツ
  • メタ情報(カテゴリーとコメント)
  • トラックバック情報

取り囲んでいるHTMLを無視すると、上記を実行するために使用されているPHPが見えてくる。このPHPには次のような関数が含まれる: the_title、the_date、the_permalink。これらはWordPressのテンプレート関数で、投稿記事に関する特定の情報を表示する。ループを通じた各繰り返しごとに、これらの関数がその投稿記事特有の情報を表示させる。

WordPressの関数を分解する

たいていの場合、ほとんどのテンプレート関数はその名前から機能を推測することができる。 完全な一覧はCodexにあるので、ここでそれを繰り返す必要はないだろう。 そのかわりに、ここではより興味深い関数をいくつか見ていく。

最初は「the_ID」だ:

<h2 id=“post-<?php the_ID(); ?>”>

これは該当する投稿記事のデータベースIDを表示し、ここではアンカー要素を作成するために使われている。 これによりHTML要素にIDが与えられ、ハイパーリンクでその投稿記事を参照することができる。

例えば、閲覧中の投稿記事のIDが574だとすると、上記のコードは次のようなソースを作成する:

<h2 id=”post-574”>

このおかげでこの投稿記事に直接リンクすることができる:

<a xhref=”#post-574”>

もう一つの触れておく価値のある関数は:

<!– by <?php the_author() ?> –>

この関数自体は名前の通りだが、ここではHTMLのコメントに囲まれている。これはPHPの関数でありここでは実行されている。そしてHTMLのソースには投稿者名が現れるが、ブラウザ上では表示されない。一般的にはたいていのブログの投稿者は一人なので、同じ情報を何度も繰り返して表示する必要はないだろう。投稿者が複数いるのなら、このコメントタグを外して投稿者名を表示すればよい。

コンテンツは次の関数で表示される:

the_content(‘Read the rest of this entry »’);

もし投稿記事に<!--more-->タグが含まれていると、コンテンツは<!--more-->タグの手前まで表示される。このタグ自体はこの関数に渡される引数(ここでは「Read the rest of this entry »」)に置き換えられ、この投稿記事の残りの部分へのリンクとして表示される。 この引数は好きなように変更することができる。

次の関数は、ユーザーに編集権限がある場合に投稿記事を編集するためのリンクを追加するものだ:

<?php edit_post_link(‘Edit’,‘’,‘<strong>|</strong>’); ?>

最初の引数ではリンクテキストとして「Edit」を設定している。二番目の引数ではこのリンクの前に表示するもの(ここでは何も表示しない)を設定していて、三番目の引数ではこのリンクの後ろに表示するものを設定している。 この例ではKubrickはこのリンクの後ろに太字の縦線を表示する。

次はコメントの数を表示する関数だ:

<?php comments_popup_link(‘No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?>

三つの引数があり、コメントがないとき、コメントが一つだけのとき、コメントが複数あるときにそれぞれ何を表示するのかが列挙されている。
コメント機能をもう少しよく見てみると、comments_popup_link関数は、comments_popup_script関数が先に呼び出されると別の動作をするようだ。

例えば、このコードは次のように書き換えることができる:

<?php comments_popup_script () ?>
<?php comments_popup_link(‘No Comments »’, ‘1 Comment »’, ‘% Comments »’); ?>

こうすると、このリンクは投稿記事の下のコメントセクションへ移動するのではなく、コメントのみを含んだ新しいウインドウを開く。単一の投稿記事を閲覧中の場合、コメントはそのページの一番下に依然として表示されているので、この機能はオプションとなる。これを含めるには、テーマ内のcomments- popup.phpを修正して、ポップアップ・コメントのウインドウスタイルを変更しなくてはならない。

最後はトラックバックの関数だ:

<!– <?php trackback_rdf(); ?> –>

これは読み手には見えなくてもいいということでHTMLのコメント内に置かれている。 これはトラックバックの情報を提供しているだけだ。完全にトラックバックを無効にしたいのならこれを削除してダウンロードのバンド幅をいくらか節約することができる。

ナビゲーション

投稿記事に続くのは2つのナビゲーションリンクだ:

<div class=“navigation”>
<div class=“alignleft”><?php posts_nav_link(‘’,‘’,‘« Previous Entries’) ?></div><div class=“alignright”><?php posts_nav_link(‘’,‘Next Entries »’,‘’) ?></div></div>

ここではposts_nav_linkを使用して「前(Previous)」と「次(Next)」の投稿記事へのリンクを生成する。これはCodexに詳しく書かれているのでこれ以上の説明は要らないだろう。

「WordPress テーマの詳説:第四章」への5件のフィードバック

  1. 突然の書き込みすいません。
    実は、以下の点に関して教えていただければと思います。
    WordPressで、各投稿の「コメント」を見ると、「古いコメント」が一番最初に来て、「新しいコメント」が一番最後に来ます。
    これを逆にするには、comments.phpにある以下のものをどう修正すればいいのでしょうか。
    教えていただければ幸いです。

コメントは停止中です。