SimpleJournal – アーカイブページの作り込み

本日はカテゴリーごとの投稿一覧やタグごとの投稿一覧を表示するためのページテンプレート archive.php を作りこんでいきたいと思います。

01. index.php をコピーして archive.php を作成

まずはじめに、index.php をコピーして、archive.php という名前のファイルを作成します。

archive

 

02. archive.php を編集

上記の手順で作成した archive.php に、アーカイブページのタイトルを表示するコードを追記します(9〜15行目)。

 

利用したのは以下のテンプレートタグ。

the_archive_title

クエリの内容に基づいてアーカイブのタイトルを表示します。
ターム(カテゴリー、タグ、カスタムタクソノミー)、日付、投稿タイプ、投稿フォーマット、作成者などのアーカイブページが対象です。

 

Webブラウザでカテゴリーごとの投稿一覧を表示すると、以下のようになります。

ArchivePage01

「カテゴリー:」という文字を勝手につけてくれるのが微妙ではあります・・・・

 

03. the_archive_title テンプレートタグをカスタマイズ

テンプレートタグ「the_archive_title」が出力するタイトルがいまいちなので、今回のテーマ向けにカスタマイズしてみます。

 

functions.php に以下のコードを追記。
※デザイン上不要な日本語化も無効にしています。

 

Webブラウザで先ほどのページを見ると、以下のようになります。

CategoryArchive

 

例えばタグのアーカイブだと、

TagArchive

月別のアーカイブだと、

MonthlyArchive

・・・といった感じに、動的にタイトルが変化してくれます。

SimpleJournal – 個別ページのテンプレート page.php の作り込み

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

 

01. single.php をコピーして page.php を作成

まずはじめに、single.php をコピーして、page.php という名前のファイルを作成します。

Copy single.php to page.php

02. page.php を編集

上記の手順で作成した page.php のコードのうち、

  • 投稿の日付を表示している部分
  • カテゴリーを表示している部分
  • タグを表示している部分
  • コメントを表示している部分

を削除します。

また、「投稿」となっている文言部分を「ページ」に置き換えます。

こうやって作成した  page.php の内容が以下。

 

Webブラウザでサンプルの固定ページを表示すると以下のようになります。

Template for Page

 

個別ページのページテンプレートは、投稿ページのページテンプレートのコピー&改編で作り込めるのでとっても簡単です。

 

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とします(後日微調整するつもりです)。