WordPressの記事詳細ページを作る

丁寧モード

時短モード

答えだけわかればいい人は「時短モード」がおすすめ。記事中の「補足」を非表示にします。

補足

[前回のおさらい]
・テーマをゼロから作る
・とりあえずindex.phpだけ作って何かしら表示させる。

前回は自作テーマでindex.phpを作りましたが、WordPressのテーマのテンプレートファイルはファイル名で役割が変わります。

ファイル名を「single.php」にすると、記事詳細ページの表示用に使われます。

HTMLを学んだ人は「index.php＝トップページ」と思いたくなりますが、WordPressでは「本来使われるテンプレートファイルがないときの代役」というイメージで覚えたほうがいいです。

補足

WordPressでトップページ専用のテンプレートファイルはfront-page.phpやhome.phpがそれにあたります。
それらのファイルがない場合にindex.phpが代わりにつかわれます。

single.phpがないと、index.phpが代わりに使われるので記事詳細ページもトップページと同じ表示になってしまいます。

ここではindex.phpと別にsingle.phpを追加することで、記事詳細ページとその他のページで表示が切り替わる（＝適用されるテンプレートファイルが切り替わる）動作を体感してみましょう。

補足

記事詳細の表示を確認するために、事前に記事を何か作っておいてください。タイトルも本文も適当でいいです。

以下、single.phpを理解するための回り道な手順を含みます。最初から結論に行きたい方は「記事の内容を表示させる」までジャンプ

ファイルをエディタで開き、「こんにちは」を「これは記事詳細です」に変えてアップロードします。

補足

表示し直しはブラウザの矢印がぐるっと回ってるボタンを押す、または、Ctrlを押しながら「R」を押せばできます。

トップページでは「こんにちは」
記事詳細ページでは「これは記事詳細です。」
と表示される、

つまり、トップページと記事詳細ページの区別がつけられるようになった、ということです。

記事の内容を反映させる

このままではどの記事を表示しても「これは記事詳細です。」と表示されてしまいます。

投稿画面で書いた内容を反映させるには「これは記事詳細です。」の部分を<?php the_content(); ?>に変えます。（変えたらFTPでアップロード）

<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
</head>
<body>
<?php the_content(); ?>
</body>

記事タイトルは<?php the_title(); ?>に変えることで投稿画面で書いた記事タイトルが表示されるようになります。

<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
</head>
<body>
<?php the_title(); ?>
<?php the_content(); ?>
</body>

補足

the_title();は「この記事のタイトルを表示しなさい」、the_content();は「この記事の本文を表示しなさい」という命令です。

この命令を書くことで初めて、ブログ投稿画面で書いたタイトルと本文が表示されるようになります。

この命令はPHPの命令ですが、その前後はHTMLで書いているので、この命令を書くときだけPHPに切り替えるために<?phpと?>で囲みます。
<?phpが「今からPHPを書きます」という命令、?>は「ここでPHPが終わります」という命令です。

また、命令の最後にあるカッコ()は命令を改造するためのスペースです。

補足

これは「オプション」と言われるもので、元の命令をそのまま実行すればいいときは空欄でいいですが、それだけでは足りないときにこの中に書き足すことで機能を拡張することができます。

たとえば、the_title();の場合、3つ指定できるようになっていて、1つ目の値はタイトルの前につけるHTMLタグ、2つ目の値はタイトルの後につけるHTMLタグ、3つ目の値はタイトルを表示するかどうかのオプションになります。

中身を書かないときでもカッコだけは書かないといけません。
また1つ目、2つ目、3つ目の区切りは「,（半角カンマ）」で認識させます。

今回の場合1つ目のオプションの元の設定は「何も書かない」、2つ目の元の設定も「何も書かない」、3つ目の設定は「表示する」なので、「前後にHTMLを何も書かないタイトルが表示」されます。

雑談

3つ目の設定は正直、存在意義がよくわかりません。表示させないならこの命令自体を書かなければいいだけだし、表示はさせたくないけど取得だけしたいならget_the_title()という命令があるし。
実際使ってるところを見たことがないので、深く考えずにスルーでいいと思います。

the_title('<h1>','</h1>',TRUE);

このように書いた場合、

雑談

ただ、実際このオプションでHTMLの指定はしませんね。

<h1>で囲みたいなら命令の外で囲みます。

のように。
このほうがわかりやすいです。あとでh1にクラスを追加したくなったときも普通のHTMLの感覚で編集できます。
数人のチームでWordPressを作るときなど、プログラマーがPHPを担当し、コーダーがHTMLを担当するときに、テンプレートファイル内にPHPがごちゃごちゃ書いてあるとPHPが分からないコーダーにはどこを編集すればいいのかわかりません。

と書かれていれば、「ああ、ここがh1見出しなんだな、見出しの中のテキストはなんかプログラムで出てくるんだな」と理解できます。

補足

<h１>は「ここから見出しが始まります」というHTMLの命令、</h１>は「ここで見出しが終わります」というHTMLの命令です。

見出しは本文よりも大きく、太く書かれるのが一般的なので、このタグで囲むと大きく、太くなります。
（CSSで自分の好きなように変えることもできます。）

1つ目と2つ目の文字の前後に「'」がついているのは「これはただの文字です」という意思表示です。（厳密にはただの文字ではなくHTMLの文字ですが、今はPHPの中での処理で、PHPから見ればHTMLはただの文字なのでそう表現します。）

これをつけないとPHPの命令だと認識されます。
the_contentは命令なので何もつけませんでした。
<h１>はPHPの命令ではないので前後に「'」をつけます。

つけないと<h１>というPHPの命令を出していることになりますが、そんな名前の命令はPHPにもWordPressにもないので、エラーになります。

逆にthe_content();を「'」で囲むとタイトルが表示されずにthe_contentという文字がそのまま表示されます。

補足

3番目のTRUEはプログラムでの「YES」を表します。
1番目と2番目は文字でしたが、3番目は「YES」か「NO」かの二択でしか命令できないことになっています。（the_titleの場合は、です）
プログラムではYESのことをTRUE、NOのことをFALSEと書きます。
小文字で書いても命令としては成立しますが、わざわざ大文字で書いているのは「YESというただの文字」ではなく「YESというPHPの命令」ということをこのコードを見た人（書いた本人も含めて）パッと見でわかるようにするためです。
the_titleでのTRUEは「表示させる」、FALSEは「表示させない」という命令になります。

single.phpを作り、その中にthe_title()とthe_content()を書くことで、作成したブログ記事が表示できるようになりました。

このsingle.phpがすべての記事に使われます。

見た目を整える

機能的にはここまでで完成していますが、今のままでは白紙に文字が表示されているだけで、ブログらしくないです。

この感じにするためには「CSS」に指示を書きます。

背景に色をつける

背景に色をつけるには、backgroundという指示で実現できます。

また、指示の対象も指定しないといけません。

たとえば、見出しの背景を青色にしたいとして、タイトルが<h1>要素だったとするとstyle.cssに

h1{
	background: blue;
}

と書くことで実現できます。

補足

ページ内のタイトルや見出しはHTMLにする上で

<h1> <h2> <h3> <h4> <h5>などを割り当てるのが一般的です。
h1は大見出し、h2は中見出し、h3は小見出し、という感じです。
また、h1のみ、1ページ内で1回しか使ってはいけないという決まりがあります。
なので、ページタイトルに使われることが多いです。

補足

style.cssは最初にテーマを作ったときに用意した、CSSを書くためのファイルです。
詳細は下記の記事に。

WordPressに自作テーマを適用させる

…なんですが、今の見出しはh1にもなっていないし、何のHTML要素にもなっていません。ただの文字です。

ただの文字にCSSを指示するには<body>や<html>とかに対して指示すれば一応効きますが、<body>や<html>はページ全体を囲むHTML要素なので、タイトルだけでなくページ全体に効いてしまいます。

なので、まずタイトルだけ指定するためのHTMLを指定します。

single.phpでタイトル部分を<h1>と</h1>で囲みます。

	<h1>
		<?php the_title(); ?>
	</h1>

これでこのページのタイトル＝h1要素ということになります。

その上でh1に対して背景色、文字色などの指示をします。

h1{
	background: #f00;
}

背景色は「background」で指定します。

補足

厳密には「background」ではなく「background-color」ですが、backgroundで指定することで、この先同じような背景に関する設定（色を画像にしたり、画像の大きさを設定したり、背景画像をタイル状に並べたり）をまとめて指定できるメリットがあります。

ただ、まとめて指定するときは順番が決まっているので、覚えるまではかえって分かりにくかったり、一つでも間違えると全部効かなくなるので、最初は１つずつ指定したほうがいいかもしれません。

HTMLでの色の指定は16進数なので、とりあえず適当な色を指定して、ブラウザ上で色を選びなおすとわかりやすいです。

色の選び方については下記記事で解説しています。

WordPressサイトのトップページを作る

文字の色を変える

背景色を暗い色にすると文字が読みにくいので、必要なら文字の色も変えます。

h2{
	background: #004D81;
	color: #fff;
}

背景色の指示の下に加えます。「color:（色コード）」を追記します。文字色の指定は「color」です。

雑談

背景色が「background-color」なので文字色は「font-color」だろうと思いがちですが、ただの「color」です。

背景と文字の間に余白をあける

余白はpadding:サイズで指定します。

CSSでは「1em」が1文字分の大きさを表します。1文字の半分は0.5emです。

なので、padding:0.5em;と指定することで実現できます。

h1{
	background: #004D81;
	color: #fff;
	padding: 0.5em;
}

補足

paddingは上、下、左、右、それぞれ個別に指定することもできます。
例えばpadding-top:0.5em;とすれば上だけに余白がつきます。
同じように、下はpadding-bottom、左はpadding-left、右はpadding-rightです。

ただの「padding」なら今回指定したように全方向に同じ余白が指定されますが、指定する数字の個数に応じて個別に指定することもできます。
padding:1em;　全方向に1em
padding:1em 2em; 上下に1em; 左右に2em
padding:1em 2em 3em;　上に1em; 左右に2em、下に3em
padding:1em 2em 3em 4em;　上に1em、右に2em、下に3em、左に4em

見出しと本文の間に余白をあける

見出しの周りに余白を空けるには「margin」を使います。

補足

paddingは見出しの内側の余白、marginは外側の余白です。

タイトルの下に1文字分ぐらいの余白が欲しいのでmargin-bottom:1em;を指定します。

h1{
	background: #004D81;
	color: #fff;
	padding: 0.5em;
	margin-bottom: 1em;
}

といっても、<h1>には元々marginが設定されているので、見た目には変わらないかもしれません。

補足

じゃあ、指定する意味がないのかというとそんなことはありません。
最初から指定されているCSSはブラウザによって違うことがあります。
言い換えれば、見る人によって見え方が変わる可能性があるということです。
誰が見ても同じように見せるには自分で明確にCSSを指定する必要があります。

タイトルと本文で文字サイズを変える

次に文字サイズです。タイトルは本文よりも少し大きめの文字サイズにしたいです。

文字サイズはfont-sizeで指定します。

h1{
	background: #004D81;
	color: #fff;
	padding: 0.5em;
	margin-bottom: 1em;
	font-size: 1.5em;
}

補足

1.5emで1.5倍の文字サイズになりますが、ブラウザによっては指定する前より小さくなっているかもしれません。
h1は見出しに使うHTMLタグなので、元々大きめの文字サイズのCSSが指定されています。（最初からmarginがついていたのと同じです。）
文字サイズはブラウザによって違いますが、元のサイズが2emだったりすると、1.5emを指定することで小さくなってしまいます。
ただ、どっちにしてもブラウザによってサイズが違って見えると意図しない見た目の崩れにつながることもあるので、誰が見ても同じように見えるように自分で指定しておきましょう。

他のページから来れるようにする

一般的なブログやサイトはトップページや記事一覧ページから記事詳細ページに来ます。

いま作っているこのブログは記事詳細ページの他にトップページがありますが、相互に行き来することができません。それをできるようにします。

トップページ→記事詳細ページ

トップページから記事詳細ページに行くときは、大体新着記事一覧から行く事が多いです。

これをトップページに作りましょう。

まず、HTMLは下記のようになります。

	<div class="news">
		<a href="記事1の詳細ページへのリンク">
			2000.12.01<br>
			記事1のタイトル
		</a>
		<a href="記事2の詳細ページへのリンク">
			2000.11.01<br>
			記事2のタイトル
		</a>
		<a href="記事3の詳細ページへのリンク">
			2000.10.01<br>
			記事3のタイトル
		</a>
		<a href="記事4の詳細ページへのリンク">
			2000.09.01<br>
			記事4のタイトル
		</a>
	</div>

補足

リンク（hrefの中身）は後で変えるので、カラでもいいです。

それらを含め、最終的にはPHPで書きますが、慣れるまではいったんHTMLで作り、その後で必要な部分をPHPに置き換えていく進め方がいいです。
途中で問題が起こったときに原因を突き止めやすくなります。

全体を包むdivは新着記事コーナーの前後に余白を作ったり、新着記事コーナーだけ色を変えるなど、見た目の調整に必要になります。

HTMLでは基本的に1まとまりごとにdivで包むことを意識するといいです。

ではCSSで見た目の調整をしていきます。

.news a{
	border-bottom:1px solid #000;
	display: block;
	padding: 1em 0;
	color: #000;
	text-decoration: none;
}

全体を包むdivにnewsというクラス（名前）を与えました。その中にある<a>要素に対して↑のCSSを指示します。

補足

display:blockは指定した要素をブロック要素にする指示です。
＜h2＞も＜div＞も＜a＞もHTMLのすべての要素は「インライン要素」か「ブロック要素」のどちらかの性質を持ちます。
例えば、＜div＞はブロック要素です。それを３つ並べると

<div>1つのかたまり</div>
<div>1つのかたまり</div>
<div>1つのかたまり</div>

補足

となります。このとき実際のブラウザ上での見た目は

となります。
（余白や色はCSSでの指定が必要ですが、理解しやすさを優先した表現です）
一方、＜a＞や＜span＞などはインライン要素です。
仮に、さっきの＜div＞を＜a＞に変えてみます。

<span>1つのかたまり</span>
<span>1つのかたまり</span>
<span>1つのかたまり</span>

補足

これをブラウザで見ると

となります。
ブロック要素は前後の行とは別の独立した”１行”になります。
幅がブラウザいっぱいまで広がるので前後の要素が入るすきまがありません。
インライン要素は中身に応じて幅が伸縮します。前後の行にすきまがあれば、そのすきまに入るような動きをします。
今回、新着記事のHTMLで<a>を並べました。
<a>はインライン要素なので、そのままでは横に全部つながってしまいます。
ブロック要素的にタテに並んでほしいので、display:block;を指定することで<a>要素でありながらブロック要素としての性質を持たせたというわけです。
もともと<a>は本文中の一部をリンクにするためのものなので、インライン要素としての性質が基本になっています。

タイトルとリンクを変える

ここまでで見た目はそれっぽくなりましたが、リンクやタイトルが実際の記事ページと連動していません。

現時点での実際の記事の内容を反映させると、

	<div class="news">
		<a href="https://umiya.wp.xdomain.jp/2023/02/26/新しい記事のタイトルです/">
			2000.12.01<br>
			新しい記事のタイトルです
		</a>
	</div>

となります。

補足

URLが日本語だと↓の図のように文字化けするかもしれません。

まだ記事を1つしか作ってないので4つ表示させたくてもできません。

記事が増えたら追加していきます…が、新しい記事を作ったり、この記事のタイトルを変えたりするたびににいちいちここを書き直すのは面倒ですよね。

自動的に連動させるためにここでもthe_title()を使います。

	<div class="news">
		<a href="https://umiya.wp.xdomain.jp/2023/02/26/新しい記事のタイトルです/">
			2000.12.01<br>
			<?php the_title(); ?>
		</a>
	</div>

補足

ブラウザから記事URLをコピペしたらものすごく長いURLになったかもしれません。

が、これは正しい動作です。
URLは本来、英数字でしか表現できません。
「角川書店.jp」のような日本語のURLは英数字を組み合わせを変換することで実現しています。ブラウザのURL表示欄は変換後の表示になりますが、それ以外のエディタやメモ帳などでは変換前の英数字組み合わせの文字が表示されます。
日本語を英数字で表現しようとするとこんなにややこしい文字になるということです。日本語って難しい言語なんですね…。

日付やリンクも同じように自動的に連動させることができます。

日付はthe_date、リンクはthe_permalinkです。

	<div class="news">
		<a href="<?php the_premalink(); ?>">
			<?php the_date(); ?>	
			<br>
			<?php the_title();?>
		</a>
	</div>

となりますが、このままでは正しく表示できません。

これは「the_date」や「the_title」の「the」が何を指しているかわからないせいです。

記事詳細ページでは、記事が特定されているのでOKですが、トップページでは全記事が対象になるのでどの記事かを指定しないと正しく表示できないのです。

よく見ると、自分で作った記事よりも前に、WordPressを作った時点で最初からあるサンプル記事、「Hello World！」も表示されていません。

新しい順に４つ表示させたいのに最初の１つしか出ていないのです。

今、実現したいことは

複数ある記事の最新4つのタイトル、リンク、投稿日を表示したい
記事が変わるたびにいちいち書き直したくない

この２点です。

同じ要素が続くときは「ループ」で書く

これらを解決するには「ループ処理」というプログラムが必要です。

雑談

ここからがプログラミングの便利さを実感できるところでもあり、難しくて挫折しそうになるところでもあります。

先に答えを書きます。

	<div class="news">

		<?php
		$args = [
			'posts_per_page' => 4
		];
		
		$posts = get_posts($args);
		foreach($posts as $post):
		setup_postdata($post);
		?>

		<a href="<?php the_permalink(); ?>">
			<?php the_date(); ?>	
		<br>
			<?php the_title();?>
		</a>
		<?php 
		endforeach;
		?>
	</div>

一気に難しくなりました。

プログラミングは英語なので、その時点で抵抗感を持つ人も多いと思います。

この処理を日本語に置き換えてみます。

		$args = [
			'posts_per_page' => 4
		];

まずこの部分。

posts_per_pageは1ページに表示する記事数を決めるプログラムの命令です。

ここでは、1ページに4件表示させる命令をしています。

５件以上記事があるときは「ページ送り」で表示させます。

		$args = [
			'posts_per_page' => 2
		];

たとえばこのように「2」にしたときは、

1ページに2件ずつ表示されます。

次にこの部分↓

$posts = get_posts($args);

get_postsという命令で作られるデータを$postsという変数に入れてます。

get_postsは記事タイトルや記事の投稿日などの記事データを作る命令です。

この命令で作られたデータを見ると↓のようになっています。

これを図で表現すると、

こんな感じです。記事のID、記事を書いた人のID、記事の投稿日など、その記事に関わるすべてのデータが「その記事のデータ」として１つにパックされてるイメージです。

上記の記事データだと、記事IDは「7」、記事タイトルは「新しい記事のタイトルです」がこの記事のデータということです。

補足

記事IDはint(7)と書かれていますが、実際のデータは「7」です。
int()というのはそのデータが数字であることを示しています。
プログラムでのデータは全てそのデータが数値なのか文字列なのかが決まっています。
これを「型」といいます。
数値としての「７」と、文字列としての「７」はプログラム上では違う処理になります。
たとえば、7+7という処理をした場合、数値型なら14ですが、文字列型だと77になります。
そのように処理結果が変わってくるため、値だけではデータとしては不十分です。
int(7)というのは「記事IDは7という値で、データ型は数値型」というデータであることを示しています。

そして、get_posts()で得られるデータはそのWordPressに登録されている記事データ全てを取得します。

100記事あれば100記事分のデータが取得されます。

さっきのデータだと[0]というのが1記事のまとまりを表します。そしてそれをさらにパックしたのがその上のarray(2)で、このデータの場合パックがが2つ、つまり2記事分のデータがあることになります。

この記事ごとにまとめられたデータを1つずつ取得して、タイトルとか投稿日とかを自動的に表示させるのがループ処理です。

foreach($posts as $post):

で始まり、

endforeach;

で終わります。

この間に書かれたものがデータの個数分、繰り返されます。

今回の場合、間に書かれた処理は、

<a href="<?php the_permalink(); ?>">
	<?php the_date(); ?>	
<br>
	<?php the_title();?>
</a>

記事URL、記事投稿日、記事タイトルを表示させる処理です。

これが存在する記事の個数分、表示されます。

今回は２記事あるので、

<a href="<?php the_permalink(); ?>">
	<?php the_date(); ?>	
<br>
	<?php the_title();?>
</a>

<a href="<?php the_permalink(); ?>">
	<?php the_date(); ?>	
<br>
	<?php the_title();?>
</a>

となります。

the_permalink()、the_date()、the_title()の部分が、各記事のデータに自動的に置き換えられていくため、

<a href="https://umiya.wp.xdomain.jp/2023/02/26/新しい記事のタイトルです/">
	2023年2月26日	
<br>
	新しい記事のタイトルです
</a>

<a href="https://umiya.wp.xdomain.jp/2023/02/16/hello-world/">
	2023年2月16日	
<br>
	Hello world!
</a>

となります。

foreach開始直後に

setup_postdata($post);

と書かれているのはループ処理を期待通りに動かすための決まり文句だと思ってください。数学の公式みたいなもので深く理解しなくてもいいです。

CSSで見た目を調整する

見た目が全然近付いてないので、不安になりますが、ここまでできればあとはCSSだけです。

目指す見た目と今の見た目を比べて何が必要かをはっきりさせます。

今回の場合、

文字の色を黒にする
文字の下線をなくす
記事タイトルの文字サイズを大きくする
1記事1ブロックにする
1ブロックごとに周りに余白をつける
1ブロックごとに区切り線をつける

このあたりが必要ですね。

これをCSSで書いていきます。

文字の色を黒にする

文字の色はcolorで指定します。

この部分はnewsというクラス名を指定していましたね。

newsという要素の中にあるa要素の色を黒にするので、

.news a{
	color: #000;
}

となります。

文字の下線をなくす

下線はtext-decorationで指定します。

なくすときはnoneです。

補足

下線をつけるときはunderlineと指定します。

文字の色と同様に、newsという要素の中にあるa要素に対して指定するので、上記のCSSに追加し

.news a{
	color: #000;
	text-decoration: none;
}

となります。

記事タイトルの文字サイズを大きくする

記事タイトルだけに適用したいですが、今のHTMLでは記事タイトルだけを指定する名前がありません。

なので、作ります。

<?php the_title();?>

を、

<div class="article_title">
	<?php the_title();?>
</div>

というように、article_titleというクラスで囲みます。

補足

div要素を使ったのはタイトルをブロック要素にしたいからです。
言い換えれば、タイトルの前後は改行してほしいからとも言えます。

これで、

.article_title{
	
}

と書くことで、記事タイトル部分だけに反映させることができます。

文字サイズはfont-sizeで指定します。1.5倍ぐらいにすればメリハリがつきそうです。

なので、

.article_title{
	font-size: 1.5em;;
}

と書きます。

1記事1ブロックにする

記事タイトルをdiv要素で囲んだように、記事ごとのまとまりも1つのまとまりとみなすためにdivで囲みます。

この状態ですね。

いや、何のタグでも囲んでないのでこの状態にさえなってないです。全部まとめて1つのまとまりです。

1記事ごとに1つのまとまりにする、そしてそれぞれを、「インライン要素」ではなく「ブロック要素」にすることで見た目的にも概念的にもわかりやすい構造になります。

（参照：インライン要素とブロック要素の違い）

ブロック要素にするにはCSSで

display:block;

と指定してもいいですが、今回の場合<div>で囲むだけでいいです。

<div>自体がブロック要素なので、囲むだけでブロック要素になります。

<a href="<?php the_permalink(); ?>">
	<?php the_date(); ?>	
	<br>
	<div class="article_title">
		<?php the_title();?>
	</div>
</a>

これが1つのまとまりなので、これをdivで囲みます。

<div>
	<a href="<?php the_permalink(); ?>">
		<?php the_date(); ?>	
		<br>
		<div class="article_title">
			<?php the_title();?>
		</div>
	</a>
</div>

1ブロックごとに周りに余白をつける

このまとまりに対してCSSを設定したいのでarticle_list_itemなど名前をつけます。

<div class="article_list_item">
	<a href="<?php the_permalink(); ?>">
		<?php the_date(); ?>	
		<br>
		<div class="article_title">
			<?php the_title();?>
		</div>
	</a>
</div>

各まとまりごとに余白をつけます。

ああああ

記事詳細ページ→トップページ

画像右下のアイコンクリックで原寸大。
画像クリックで戻る。