記事一覧

index.php を作成する – [2]

 posted by suzu
テンプレート作成のススメ

前の記事 「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_attributethe_title は投稿情報のタイトルを出力します。
the_title_attribute と the_title は ほぼ同じものと考えてよいです。
使い方 (呼び出し方) が違うだけで、パラメータにて指定できる挙動も、
関数が動いた結果も同様です。

24行目の the_time は記事の投稿日時を出力します。
パラメータでフォーマットを指定します。フォーマットの指定の仕方は
PHP の date関数に準拠します。
ここで指定しているフォーマットの ‘c’ は「ISO 8601 日付」となります。
get_option(‘date_format’) は、管理画面 [設定 - 一般] で指定した
日付フォーマットを取得します。

26行目の the_categorythe_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

関連記事

eyecatch_template

HTMLをデザインする [カラム]

先の記事 「カラムレイアウトを考える」 でも少し触れましたが、 WordPres...

記事を読む

eyecatch_template

一覧ページネーション を表示する

実は、今回から次のテンプレート作成 (の解説) に取り掛かろうと 思っていたので...

記事を読む

eyecatch_template

single.php を作成する – [2]

今回は 個別投稿記事を表示する single.php 作成の続きです。 前回作成...

記事を読む

カレンダー

2024年10月
« 7月    
 12345
6789101112
13141516171819
20212223242526
2728293031  
PAGE TOP ↑