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となります。

 

 

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件だった場合の表示

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