今回は 個別投稿記事を表示する 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 を指定しています。
さて、これで
2. 公開日
3. カテゴリ
4. タグ
5. 本文
6. 投稿コメント
7. コメント入力欄
8. ページネーション
の表示を組み込んだ 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 を作成する予定です。
ではまた次回・・・
SmartStyle