さっき決めたブログ

[WordPressサイト構築日記05]記事の内容を表示してみよう

目次

• フレームを外出しにする
• 記事詳細を表示する
• コメントを表示する

前回の記事で投稿の一覧を表示出来るようにしましたが、今回はそこから記事のタイトルをクリックすると、記事の詳細（本文）が表示されるようにします。

WordPressで本文を表示するには、single.php というファイルを作成し、記事本文表示用のコードを書けば良い。
詳しくは、WordPressのテンプレート階層などの説明を見てほしいのですが、ザックリ言うとトップページやカテゴリ一覧、検索結果などのサイトの状態毎に使用されるファイルが分かれている訳です。

なので、テンプレートを開発していくと今後、色々なファイルが増えてくるというわけです。

フレームを外出しにする

しかし、いくらファイルが増えても、（自分が作ろうとしているテンプレートの場合）フレーム部分の構造は基本一緒になのです。
同じコードを全てのファイルに記述するのは、ちょっと効率が良くないので、フレーム構造部分については共通ファイル化して、それぞれのファイルからインポートするようにしたいものです。

ということで、まずは共通のファイルを frame.php という名前で作成します。
内容的には index.php と殆ど変わりませんが、20行目のコンテンツの読み込み内容部分が、$frmというグローバル変数に定義されたラムダ式を実行するように変更しています。

index.php も変更します。　処理の殆どが frame.php に移動してしまったので随分と簡素になりました。

これで全体のフレームを別ファイル化することが出来ました。
現時点ではサイトの見た目は変わっていませんので、スクリーンショットは割愛します。

記事詳細を表示する

ここからが本題の記事の詳細内容（本文）の表示になります。

WordPressのテンプレート階層によると、一般的な個別ページは single.php というファイル名になるようなので、そちらを作成します。

確認してみる前に、記事の本文を適当に入れておきます。

サイトのトップページ(記事一覧)を表示したら、先程本文を書いた記事のタイトルをクリックします。

本文の内容が表示されました。

コメントを表示する

次に記事本文の下に、コメントの一覧とコメント入力フォームが表示されるように single.php を編集します。

先程の記事を表示すると、コメントフォームが表示されました。
(分かりづらいですが、↓の赤枠で囲っている部分がそうです。　まだスタイルをいじっていないので非常に見にくいですがそのうちきれいにします)
こちらにコメントを入力して コメントを送信 ボタンを押すと。

コメントが表示されました。

コメントフォームはログアウトした状態だと、このように名前・メールアドレス等の入力項目が表示されます。

レイアウトがガタガタですが、今は気にしないことにします。
入力フォームをカスタマイズする方法もあるのですが、JetPack を使用すると綺麗に表示されるのでそちらを実際はそちらを使用しようとおもいます。
ただ、JetPack はローカルの環境では限定的にしか機能しないため、ここではこのままにしておきます。

今回はここまで。

ここまでのコード
test_templ003.zip