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 – 個別ページのテンプレート 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

 

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