WordPress テーマ 自作のススメ

さて、いよいよ今回からは本丸、
個別投稿記事を表示する single.php を作成します。

今までは一覧表示系のページテンプレートの作成を順に進めてきましたが、
WordPress (というかブログ) である以上、
個別ページの表示は避けては通れません (笑)

メインコンテンツ領域の部分以外は一覧系のページと同様でよいかと思いますが、
今回、メインコンテンツ部分では以下のものを表示させたいと思います。

それ以外にも、利便性やデータの構造化、SEO 対策等を考慮すると、

等もあった方がよいでしょうが、これらは、
(基本機能としては) 必須とは言い切れない (かもしれません) ですし、
それぞれが結構なボリューム (解説量) になることが想定されますので、
また後々 (追々) 別の記事で解説します。
 

さて、他の一覧系ページと枠組みは同じものを利用し、
メインコンテンツ領域の内容を変更して以下のように記述して
single.php を起こします。
この段階では、今回表示させようとしているものの 1 ～ 5、
タイトル、公開日、カテゴリ、タグ、本文 (＋分割ページリンク) を
組み込んでいます。

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

<?php get_footer(); ?>

さて、お約束の解説です。
3行目から27行目の間が、今までに作成した一覧系の画面と違う部分です。

4行目の if (have_posts()) は、投稿記事があった場合の処理ブロックであること
を示しています。投稿記事がなかった場合は、24行目の else : から
26行目の endif; で囲まれた範囲が出力されます。
分かりやすいように この if 構造はハイライト表示しています。
5行目の while (have_posts()) は、記事があるだけこの中の表示もしくは
処理を繰り返し行うというブロックになります。このブロックは、22行目の
endwhile; までとなります。

これを見て 「あれっ？」 と思った方がいらっしゃるかもしれません。
「index.php を作成する – [2]」 のときには、
if (have_posts()) と while (have_posts()) をまとめて1行に書いていました。
ここでは、あえて制御構造を分けて記述しています。何故だと思いますか？
そもそも if 制御構造と、while 制御構造は全く別のものです。
一覧系の画面であれば、別に一体となった制御でも構いませんが、
個別の記事を単独で表示するページの場合、デザインのレイアウトのしやすさを
考えると、記事表示領域とコメント表示領域や関連記事表示領域等々は
HTML レイヤー的には独立させておいた方が後々都合がよいです。
部分的に (ここでは 4行目と 5行目を) 1行にまとめることもできますが、
制御の入れ子 (階層) 構造が解り辛くなってしまうので、
コードの見易さを重視して、あえて制御構造行を分けて記述しています。
また、個別の記事を単独で表示するページでは、繰り返し処理である
while 制御構造 は、1件しか繰り返されないハズですので、
もしかしたら不要かもしれません。
ただ、WordPress のデフォルトテーマである TwentyFourteen や
TwentyThirteen でも single.php の中に while 制御構造が書いてあったので、
流儀を揃えてこれを記述しています。
ただのおまじないにしか思えない気持ち悪さはありますが・・・

さて、余談はこれまでにして、解説に戻ります。
5行目の the_post() は while～ の中で処理対象となる1件の投稿データを
グローバルに展開し、the_title とか the_permalink とかの
the_･･･ 系の関数で利用できるようにしてくれます。
記事内容の表示を行う際には、the_･･･ 系の関数を利用する頻度が多い
と思いますので、忘れずに記述しておきましょう。

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

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

12行目の the_category と the_tags はそれぞれ、
投稿記事が属するカテゴリとタグの取得を行い、リンクとして出力してくれます。
カテゴリやタグは複数存在する可能性があるので、パラメータで区切り文字等を
指定することができます。

ここまでは、一覧系の画面での明細部分の表示と大差ありませんね。
ここからが特に違う部分になります。
15行目の the_content は投稿記事の内容を出力します。
投稿する記事の内容に、「<!–more–>」 というコメントを入力しておくと、
その部分で記事が分割され、複数ページに分けて表示されます。
18行目の wp_link_pages では、複数に分割されたページのリンクを表示します。
それぞれの関数リファレンスはコチラ ↓
テンプレートタグ/wp link pages – WordPress Codex 日本語版
テンプレートタグ/the content – WordPress Codex 日本語版
 

まだ組み込みたい内容としては、投稿コメント、コメント入力欄、ページネーション が
残っていますが、長くなってしまったので、これらはまた次回ということで。
To Be Continued ･･･