前の記事 「index.php を作成する – [1]」 で、
なんとなく画面が表示されるところまで作成しました。
今回は、メインコンテンツ部分に記事一覧を表示する部分を記述します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?></title>
<meta name="viewport" content="width=1024, maximum-scale=1, user-scalable=yes">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="container">
<div id="header">header</div>
<div id="wrapper">
<div id="side-left">side L</div>
<div id="main">
<!-- 一覧表示部分ここから -->
<h2 class="archive-title"><?php bloginfo('name'); ?></h2>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="entry hentry">
<h3 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<div class="entry-box">
<span class="entry-date">
公開：<time class="published" datetime="<?php the_time('c'); ?>"><?php the_time(get_option('date_format')); ?></time>
</span>
<br /><?php the_category(', '); ?><?php the_tags('', ', '); ?>
</div>
<p class="entry-excerpt"><?php echo mb_substr(get_the_excerpt(), 0, 40); ?>...</p>
<p class="entry-more"><a href="<?php the_permalink() ?>">続きを見る</a></p>
</div>
<?php endwhile; else : ?>
<p>記事がありません</p>
<?php endif; ?>
<!-- 一覧表示部分ここまで -->
</div>
</div>
<div id="side-right">side R</div>
<div id="footer">footer</div>
</div>
<?php wp_footer(); ?>
</body>
</html>
ハイライト表示している部分が記事一覧を表示するために変更 (追記？) した箇所です。
17行目は一覧画面の見出し部分です。index.php は全ての間口となるページ
ですので、bloginfo(‘name’) でブログタイトルを見出しとしています。
ここからがキモとなる部分です。18行目で連続して書いていますが、
一つずつ解説します。
if (have_posts()) は、投稿記事があった場合の処理ブロックであること
を示しています。投稿記事がなかった場合は、31行目の else : から
33行目の endif; で囲まれた範囲が出力されます。
そして、while (have_posts()) は、記事があるだけこの中の表示もしくは
処理を繰り返し行うというブロックになります。このブロックは、31行目の
endwhile; までとなります。
ただし、全ての記事を繰り返し表示するのではなく、全ての記事の中から
管理画面 [設定 - 表示設定] で指定した、「1ページに表示する最大投稿数」
分を処理するという動作になりますので注意してください。
the_post(); は while～ の中で処理対象となる1件の投稿データを
グローバルに展開し、the_title とか the_permalink とかの
the_･･･ 系の関数で利用できるようにしてくれます。
要するに、投稿記事が存在すれば、設定件数分だけ 20行目から30行目までを
繰り返し表示し、存在しなければ、32行目を表示するといった動作になります。
さて、では繰り返しブロックの中を詳細に見ていきましょう。
21行目の the_permalink() と the_title_attribute() 、the_title() です。
the_permalink は現在の投稿データのリンクを、
the_title_attribute と the_title は投稿情報のタイトルを出力します。
the_title_attribute と the_title は ほぼ同じものと考えてよいです。
使い方 (呼び出し方) が違うだけで、パラメータにて指定できる挙動も、
関数が動いた結果も同様です。
24行目の the_time は記事の投稿日時を出力します。
パラメータでフォーマットを指定します。フォーマットの指定の仕方は
PHP の date関数に準拠します。
ここで指定しているフォーマットの ‘c’ は「ISO 8601 日付」となります。
get_option(‘date_format’) は、管理画面 [設定 - 一般] で指定した
日付フォーマットを取得します。
26行目の the_category と the_tags はそれぞれ、
投稿記事が属するカテゴリとタグの取得を行い、リンクとして出力してくれます。
カテゴリやタグは複数存在する可能性があるので、パラメータで区切り文字等を
指定することができます。
28行目の get_the_excerpt は投稿情報の抜粋を取得します。
これを PHP 関数の mb_substr で40文字に切り出して echo で出力しています。
くどいようですが、index.php は間口となるページです。
本来は、リクエストされたページの種類によって、
一覧であればアーカイブページ (archive.php) や
投稿記事の単独表示であれば個別固定ページ (page.php) が
仕事をしてくれます。
ですので、2ページ目以降を表示するためのリンクや、ページング処理等々は
ここでは組み込んでいません。このあたりはアーカイブページ (archive.php)
ないし ブログ投稿インデックスページ (home.php) で解説します。
ここまでで、記事の一覧を HTML へ出力する部分の組み込みはできました。
各 HTML 要素に class 属性を与えてありますので、style.css に
それに相当するスタイルを追記します。
/*-----------------------------
メインコンテンツ
------------------------------*/
/* 基本指定 */
#main {
background-color: #ffffff;
color: #333333;
font-size: 12px;
line-height: 18px;
}
#main a {
color: #6699cc;
text-decoration: none;
}
#main a:hover {
color: #cc0033;
}
/* 一覧表示 */
#main .archive-title { /* アーカイブタイトル */
font-size: 18px;
font-weight: bold;
line-height: 28px;
margin: 0px 0px 20px 0px;
padding: 0px 0px 0px 7px;
border-left: solid 7px #993333;
}
#main .entry { /* 明細ブロック */
display: block;
margin: 0px 0px 10px 0px;
padding: 0px;
}
#main .entry .entry-title { /* タイトル */
font-size: 16px;
font-weight: bold;
line-height: 28px;
margin: 0px;
padding: 0px;
}
#main .entry .entry-title a {
color: #333333;
}
#main .entry .entry-title a:hover {
color: #cc0033;
}
#main .entry .entry-box { /* 公開日、カテゴリ等 */
font-size: 11px;
line-height: 13px;
margin: 0px 3px 0px 10px;
padding: 3px;
}
#main .entry .entry-excerpt { /* 抜粋 */
font-size: 12px;
line-height: 18px;
margin: 0px 3px 0px 10px;
padding: 3px;
}
#main .entry .entry-more { /* もっと見る */
font-size: 10px;
line-height: 11px;
text-align: right;
margin: 0px 3px 0px 10px;
padding: 3px;
}
自作テーマ用のディレクトリへ、編集した index.php と style.css を
配置して確認してみてください。
投稿記事の一覧が表示されたでしょうか？
それでは、次回はこの index.php を元に、header.php、footer.php を
分離してみます。
ある程度共通化しておかないと、後々面倒くさいですので・・・ orz
SmartStyle