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 – トップページをさらに作り込む

前回までで、「投稿」や「固定ページ」の詳細画面のページテンプレートの作り込みが一通り完了しました。

今回は再びトップページのページテンプレート(index.php)に戻り、以下の変更を加えていこうと思います。

  • 投稿のタイトルクリックで詳細ページに遷移
  • 投稿の本文全体ではなく、抜粋を表示
  • 「続きを読む」リンクを追加(クリックで詳細ページに遷移)

 

ちなみに、以下が編集前のトップページ。

Current Toppage

 

01. 投稿のタイトルに詳細ページへのリンクを追加

現在以下のようになっている index.php の18行目を、

次のように置き換えます。

 

利用したのは、以下のテンプレートタグおよび関数です。

the_permalink

投稿の詳細ページのURLを表示します。

get_the_title

投稿のタイトルを取得します(表示はしません)。

esc_attr

< > & ” ‘ (小なり、大なり、アンパサンド、ダブルクォート、シングルクォート) 文字参照をエンコードした結果を取得します。

Webブラウザでトップページを表示すると、以下のようになります。

Add permalink

投稿のタイトルがリンク表示となり、クリックすることで投稿の詳細画面に遷移します。

02. 投稿の本文の抜粋を表示

次に、投稿の本文がすべて表示されているところを、抜粋のみ表示するようにします。

index.php の 21行目の「the_content」テンプレートタグを以下のように変更します。

the_excerpt

現在の投稿の抜粋を表示します。
抜粋を入力していない場合は、投稿の本文の最初の55文字(WP Multibyte Patch プラグインを有効にしている場合は 110文字)までを表示します。

上記の変更により、トップページは以下のように表示されます。

the_excerpt 01

投稿の抜粋の末尾に […]が表示されてしまうので、 functions.php に以下のコードを追記して末尾の表示をカスタマイズします(ついでに抜粋する文字数もカスタマイズしています)。

 

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

the_excerpt 02

 

03. 抜粋の最後に「続きを読む」リンクを追加

index.php の 22行目に以下のコードを挿入します。

また、 style.css に以下のスタイルの指定を追記。

 

これにより、本文の抜粋の後に「続きを読む」というリンクが表示され、クリックすることで投稿の詳細画面に遷移できるようになります。

Webブラウザで表示すると以下のようになります。

add more link

 

以上で、トップページの作り込みもひととおり完了です。

次回以降は、カテゴリーごとの投稿一覧ページやタグごとの投稿一覧ページを作り込んでいく予定です。

 

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