webってウェブ?それともウェッブ?

webの技術について、紹介解説するためにはじめてみました。

WordPress(ワードプレス)自分のテーマをつくる【第2-1回】記事詳細ページのしくみ

記事詳細ページのしくみを作ってみます。

先ずはなにか適当な記事を投稿します。

パーマリンクが生成されますのでアクセスしてみましょう。

f:id:witheit:20160604172928p:plain

はい、なにも表示されませんね(笑)

WordPressにおいて記事の詳細ページは、

single.php

で処理されるよう構築されています。

このファイルがテーマディレクトリに存在しないため、なにも表示されないということです。


single.phpで詳細ページの処理を構築する


(1) single.phpをつくる


難しそうなこと言ってますが、単純に詳細ページを表示出来るようにするだけです。

先ずこのsingle.phpがなくては始まらないので、つくります。で、エディタで開きます。
なにか適当なテキストを記述してもう一度先程のパーマリンクにアクセスしてみましょう。

どうでしょうか??表示されましたよね??

こんな感じです


(2) 記事の情報を取得して表示する


またまた難しそうですが、やってみると意外と簡単です。

WordPressにおいて記事情報は

$post

このグローバル変数に入ってます。
試しに先程作ったsingle.phpに次のコードを書いて、
もう一度アクセスしてみてください。

<?php

print_r($post);

?>

恐らく文字がごちゃっと(笑)でてくると思います。
こんな感じ↓

f:id:witheit:20160604174334p:plain

少し見やすくするために、ソースの閲覧で見てみましょう。
使ってるブラウザの「ソースを表示」みたいなものを実行してみてください。
すると階層状態のものが確認できます。
こんな感じ↓

f:id:witheit:20160604174530p:plain

見やすくなりましたね!!
既にこのページには、これだけの情報が降りてきているということです。

(3) 取得されている情報を表示する

上記の方法だとあまりにも見づらいので、ちゃんとhtmlタグ内に落とし込んでいきます。

では、取得する内容を決めましょう。

  • タイトル
  • 投稿日時
  • 本文
  • カテゴリ

こんなところでしょうか。

次に先程の取得情報をもう一度見返してみましょう。
この取得したい情報が$postのどこに格納されているかが分かりますね。
試しにタイトルを取得して表示してみましょう。

タイトルは$postの中のpost_titleに格納されているので

<?php

echo $post->post_title;

?>

このようになります。
htmlのタグと一緒に使うとなると、

<h1><?php echo $post->post_title; ?></h1>

こんな感じです。
他の取得したい情報も同様に取得して、任意のhtmlタグ内に展開します。

記事が属しているカテゴリの情報だけは、
$post内には無いので別の方法で取得しますが、それはまた別の記事で説明することにします。

ではまた。