SimpleJournal – 投稿ページにコメント欄を表示する

今回は投稿ページに以下のようなコメント欄を表示してみます。

Preview Entry 02

 

01 comments.php を作成

テーマフォルダの下に、comments.php という名前のテンプレートファイルを新規作成します。

comments

comments.php には、single.php にあるコメント一覧とコメントフォーム部分のHTMLをコピーして貼り付けます。

 

02 single.php に comments.php の内容を読み込む

次に、single.php のコメント一覧とコメントフォーム部分のHTMLを以下のようなテンプレートタグに置き換えます(62行目を参照)。

 

今回使ったのは以下のインクルードタグ。

comments_template

コメントテンプレートを読み込みます。

(パラメータの例)

  • $file -> ロードするファイル。指定しない場合は、 comments.php がロードされる。

03 comments.php の作り込み

以上により投稿ページに comments.php の内容が読み込まれるようになりましたので、次は comments.php の作り込みをしていきます。

※ テンプレートタグの説明を省略します。

 

以上の編集が完了したら、Webブラウザで投稿ページの確認をしてみます。

impl comments

一部日本語表示となっていたり、微妙にスタイルがHTMLと異なったりしていますが、ひとまずはこれでOKとします(後日微調整するつもりです)。

SimpleJournal – 投稿のページテンプレート single.php の作り込み

今回は投稿の詳細を表示するためのページテンプレート single.php を作りこんでいきたいと思います。

いじるのは、以前に作成した以下のファイル。

single.php

 

まずはヘッダー部分とフッター部分、投稿のタイトルと本文をテンプレートタグで置き換えます(こちらこちらでやった手順と一緒ですが、ページネーション用のテンプレートタグは利用しません)。

 

vagrantを起動してWordPressの管理画面にログインし、以下のような投稿を新規追加します。

Post Entry

 

この投稿のパーマリンクをクリックすると、single.php が適用された以下のような画面が表示されます。

Preview Entry

 

ただし現状は、投稿ページの下の方に表示するコメントの一覧やコメントフォームは静的HTMLのままですので、次回以降、テンプレートタグを組み込むことで作りこんでいこうと思います。

Preview Entry 02

Simple Journal – トップページに投稿の一覧を表示する

本日は index.php を編集して、サイトのトップページに投稿の一覧を表示してみます。

どこに何を表示するかは、大体以下のような感じ。

Top Template

 

それでは早速編集していきます。

以下のようになっている index.php に、

 

以下のようなコードを追加し、

 

Webブラウザでサイトのトップページを確認すると、現在登録されている投稿の情報が以下のように表示されます。

Top Template 02

 

ここからさらに、以下のようにHTML部分にコードを組み込んでいくと。

 

意図する見た目に少し近づきました。

Top Template 03

 

投稿に複数のカテゴリーやタグが設定されているときにどう表示されるのかを確認するために、少し投稿を編集してみます。

例えば既存の投稿を以下のように編集すると・・・・

Edit Post

トップページは以下のように表示されます。

Top Template 04

 

こんな風にWebブラウザでの表示結果を確認しながら、見た目のバランスが整うようにテンプレートタグの引数やHTMLのコードを調整していった結果が以下。

Top Template 05

 

今回はタグ名の前に「#」を表示するため、functions.php に以下のようなコードを追加しています。

 

次回以降は、

  • 投稿が多数あった場合のページネーションの表示
  • 投稿が0件だった場合の表示

などを実装していきたいと思います。