ループで記事を表示する [WordPressテーマ作成 #2]
2009/02/04
前回までで、記事の本文とタイトルをループを使って表示するとことまでやりました。これだけだとさびしいので記事の投稿日時や属するカテゴリ、タグなどの情報を追加して、よりブログっぽくしてみます。
記事部分はデザインしやすいようにdiv要素で次のようにマークアップしました。
<div class="entry">
<div class="entry-header">
～ここに記事タイトルと投稿日時等の情報をいれます～
</div>
<div class="entry-body">
～ここは記事本文～
</div>
</div>
いつもこんな感じでマークアップしていて、しばらくはこの形でいきそうなので今回も。div要素が増え過ぎるのはあまり好きではありませんが、デザインするときのしやすさを優先です。
それではまず、entry-header部分から。ここには記事のタイトル、投稿日時、投稿者（これはなくてもいいかな？）タグ、記事の編集リンクなどをいれてみます。
<div class="entry-header">
<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<ul class="entry-meta">
<li class="entry-meta-time"><em>投稿日時</em> <?php the_time('Y-m-d g:i A');?></li>
<li class="entry-meta-author"><em>投稿者</em> <?php the_author();?></li>
<?php the_tags('<li class="entry-meta-tags">', ',', '</li>'); ?>
<?php edit_post_link('編集', '<li class="entry-meta-admin">', '</li>'); ?>
</ul>
</div>
投稿日時を表示するには年月日を表示するthe_date()か時間を表示するthe_time()を使います。表示方法は「設定→一般」ページでthe_date()なら日付フォーマット、the_time()なら時刻フォーマットで選択した形式で表示されます。
<?php the_date(); the_time(); ?>
PHPのdate関数と同じフォーマットで指定することもできます。
<?php the_date('Y-m-d'); the_time('g:i A'); ?>
表示例：2009-02-12 10:22 PM
ただthe_date()は同じ日に複数の記事を投稿したとき、最新の記事にしか表示されません。それに対してthe_time()はすべての記事に出力されるのでこちらのほうが使い勝手はいいですね。それに
<?php the_time(Y-m-d g:i A); ?>
とするとthe_time()で年月日も表示できます。
記事につけたタグを表示するときはthe_tags()を使います。ほかのテーマを参考にすると次のようなパターンで書かれていることが多いです。
<?php if (function_exists('the_tags')) : the_tags('前', '区切り文字', '後'); endif; ?>
はじめにPHP関数のfunction_exists()でthe_tags()が定義されているかを調べています。the_tags()がWP2.3以上で使えるようになった関数みたいなのでこれを調べているということでしょうね。実際なくても動くので自分のテーマならつけなくてもいいかな。とりあえず次のような形にしました。
<?php the_tags('<li class="entry-meta-tags">', ',', '</li>'); ?>
ドキュメントにはリスト表示の仕方も書いてありました。
<?php the_tags('<ul><li>','</li><li>','</li></ul>');?>
こっちのほうが構造的には好きなので最後はこの形にするかもしれません。
<li class="entry-meta-tags">
<ul>
<li>tag1</li>
<li>tag2</li>
</ul>
</li>
あとは編集用のリンクをつけるかどうか。とりあえずつけるとすると
<?php edit_post_link('編集', '<li class="entry-meta-admin">', '</li>'); ?>
こうなります。今回はここまで。
0
