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

 

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

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

 

Simple Journal – 投稿が1件もない場合の表示をつくりこみ

今回は、サイトに登録されている投稿(ステータスが「公開」のもの)が0件だった場合のトップページの表示をつくりこみたいと思います。

 

まずはさくっと、index.php を以下のように編集。

表示すべき投稿が1件もない場合、画面に「投稿がありません。」と表示するようにしています(52行目参照)。

ちなみに投稿があるかどうかを判定する際には以下の関数を利用します。

have_posts

投稿があるかどうかをチェッックし、ある場合は true を、ない場合は false を返します。

WordPressサイトの管理画面にログインし、現在登録&公開している投稿をすべてゴミ箱に移動した場合のサイトのトップページは以下。

No Post

ちょっと味気ないですが、メッセージが表示されるようになりました。

 

このままだとさすがにちょっと寂しすぎるので、最終的には以下のようにしてみました。

No Post 02

 

次回は、固定ページや投稿ページのテンプレートファイルを作りたいと思います。

Simple Journal – トップページにページネーションを表示

前回までで、トップページに投稿の一覧を表示することができました。

今回は投稿の件数が多い場合に表示するページを選択できる「ページネーション」を実装してみたいと思います(以下の画面キャプチャの赤枠部分)。

Pagenation

 

00 ページネーション表示の下準備

まず、ページネーション表示の動作確認の下準備をします。

WordPressの管理画面にログインし、管理画面の左メニュー「設定 > 表示設定」をクリックして設定画面を表示します。

「1ページに表示する最大投稿数」を3件に変更して、「変更を保存」ボタンをクリックします。

Update Setting

これにより、トップページには1ページにつき最大3件の投稿が表示されることになります。

次に、投稿を10件ほど新規作成しておきます(内容は適当です)。

Entry Posts

 

01 テンプレートタグを利用してページネーションを表示

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

 

次のように編集します。

 

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

the_posts_pagination

投稿の一覧ページに、投稿の前ページと次のページへリンクするページ番号のセットを出力します。

(パラメータの例)

  • “prev_txt” -> 前ページへのリンクのテキスト文字列を指定します。
  • “next_text” -> 次ページへのリンクのテキスト文字列を指定します。
  • “before_page_number” -> ページ番号の前に出力する文字列を指定します。

 

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

Add Pagenation

無事にページネーションが表示されました(「前のページへ」や「次ページへ」の文言を少しかえています)。

 

ちなみに以下が、the_posts_paginationタグにより出力されたHTMLとなります。