WordPress テーマ 自作のススメ

今回は 個別投稿記事を表示する single.php 作成の続きです。
前回作成したものをベースに、投稿コメント、コメント入力欄、ページネーション を
組み込んでいきます。
前回の内容は 「single.php を作成する – [1]」 をどうぞ。
 

今回修正したソースはコチラ ↓

<?php get_header(); ?>

				<!-- 記事表示部分ここから -->
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
				<div class="post hentry">
					<h2 class="entry-title"><?php the_title(); ?></h2>
					<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>
						<?php the_category(', '); ?><?php the_tags('', ', '); ?>
					</div>
					<div class="entry-content">
<?php the_content(); ?>
					</div>
					<div class="entry-link">
<?php wp_link_pages(); ?>
					</div>
				</div>
				<!-- /.post -->
<?php endwhile; ?>

				<!-- コメント -->
<?php comments_template(); ?>
				<!-- ページナビ -->
				<div class="page-navi">
					<dl>
<?php $prev_post = get_previous_post(); if (!empty($prev_post)) : ?>
						<dt>Prev：</dt><dd><a href="<?php echo get_permalink($prev_post->ID); ?>"><?php echo $prev_post->post_title; ?></a></dd>
<?php endif; ?>
<?php $next_post = get_next_post(); if (!empty($next_post)) : ?>
						<dt>Next：</dt><dd><a href="<?php echo get_permalink($next_post->ID); ?>"><?php echo $next_post->post_title; ?></a></dd>
<?php endif; ?>
					</dl>
				</div>

<?php else : ?>
				<p>記事がありません</p>
<?php endif; ?>
				<!-- 記事表示部分ここまで -->

<?php get_footer(); ?>

今回追加した内容はハイライト表示しています。
コメントもページネーションも、記事が存在する場合のみ表示できるものですので、
4行目の if (have_posts()) 、38行目の else 内の投稿記事があった場合の
処理ブロックに記述しています。

まず、コメント部分です。
25行目の comments_template は、コメントテンプレートを読み込む
インクルードタグ関数です。
表示中の記事のコメントを取得し、コメント(表示 /投稿) 用の
テンプレートファイルを表示してくれます。
(投稿ページ、固定ページ以外ではこの関数は動作しません)
第一パラメータにファイルパスを指定した場合はそのファイルを、
何も指定しなかった場合は WordPress テーマ内のコメントテンプレート
comments.php を表示しようとしますが、comments.php が存在しない
場合は、WordPress 標準のコメントテンプレートが適用されます。
つまり、わざわざ別途テンプレートを作成しなくても、
(WordPress 標準テンプレートでよければ) comments_template を呼び出すだけで、
コメント表示やコメント投稿部分が表示できるのですね。
逆に、自分で comments.php を作成すれば、コメント表示やコメント投稿部分を
自由にカスタマイズできますが、これの説明はまた別途・・・

次はページネーション部分です。
一覧系画面でのページネーションはあくまでページ単位の遷移でしたが、
ここでのページネーションはページ単位というより記事単位の遷移に
なります。投稿時間順に、「前の記事」 「次の記事」 へのリンクを表示します。
29行目では、get_previous_post 関数で現在表示中の記事の
前の記事を取得し、存在する (emptyでない) 場合に get_permalink で
リンクを表示しています。get_permalink のパラメータには、前の記事である
$prev_post の ID を指定しています。
同様に32行目では、get_next_post 関数で現在表示中の記事の
次の記事を取得し、存在する (emptyでない) 場合に get_permalink で
リンクを表示しています。get_permalink のパラメータには、次の記事である
$next_post の ID を指定しています。
 

さて、これで

の表示を組み込んだ single.php が完成しました。

各 HTML 要素に class 属性を与えてありますので、style.css に
それに相当するスタイルを追記します。

/* 単独記事 */
#main .post {						/* 記事ブロック */
	display: block;
	margin: 0px 0px 10px 0px;
	padding: 0px;
}
#main .post .entry-title {			/* タイトル */
	font-size: 18px;
	font-weight: bold;
	line-height: 30px;
	margin: 0px;
	padding: 0px;
}
#main .post .entry-box {			/* 公開日、カテゴリ等 */
	font-size: 11px;
	line-height: 13px;
	margin: 0px 3px 0px 10px;
	padding: 3px;
}
#main .post .entry-content {		/* 本文 */
	line-height: 1.5;		/* 単位なしの場合は要素内に特別大きい文字があると、その文字のline-heightで調整してくれる */
}
#main .post .entry-content a {
	color: #0000ff;
}
#main .post .entry-content a:hover {
	color: #cc0033;
}
#main .post .entry-link {			/* リンク */
}
#main .post .entry-link a {
	color: #333333;
}
#main .post .entry-link a:hover {
	color: #cc0033;
}
/* コメント */
#main #comments {
	margin: 30px 0px 10px 0px;
	padding: 0px;
}
#main #comments .comments-title {		/* 表示タイトル */
	font-size: 16px;
	font-weight: bold;
	line-height: 28px;
	margin: 0px;
	padding: 0px 0px 0px 7px;
	border-left: solid 7px #993333;
}
#main #comments .comment-reply-title {	/* 投稿タイトル */
	font-size: 16px;
	font-weight: bold;
	line-height: 28px;
	margin: 0px;
	padding: 0px 0px 0px 7px;
	border-left: solid 7px #993333;
}
/* ページナビ */
#main .page-navi {
	margin: 30px 0px 0px 0px;
}
#main .page-navi dl dt {
	float: left;
}
#main .page-navi a {
	color: #666666;
}
#main .page-navi a:hover {
	color: #cc0033;
}

追記する場所はメインコンテンツの基本指定より後であれば、どこでも
問題ありませんが、メインコンテンツの一覧表示のスタイル設定の直後にでも
追記しておくのが分かりやすくていいでしょう。
 

これで今回の作業は終了です。
次回は個別固定ページの page.php を作成する予定です。
ではまた次回・・・