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

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

Simple Journal – ヘッダー部分とフッター部分をテンプレートファイルに切り出す

前回編集した index.php のヘッダー部分とフッター部分のコードを別のテンプレートファイルに切り出し、共通化しておくことにします。

01. ヘッダー部分を header.php に切り出す

テーマのヘッダー部分をテンプレートファイル header.php に切り出します。

まずはテーマフォルダに header.php ファイルを作成し、

Add Header Template

index.php のヘッダー部分をコピーまたはカットして・・・

Cut Header HTML

header.php に貼り付け、保存します。

Paste Header HTML

その後、index.php のヘッダーがあった箇所には以下のテンプレートタグを挿入。

Add Header Template Tag

この状態でWordPressサイトを確認すると・・・

Check Header

見た目は変わらずです。

※ なお、index.phpのテンプレートタグの記述を削除した場合、サイトは以下のような表示になります(ヘッダー部分がごっそりなくなった状態)。

Without Header

 

02. フッター部分を footer.php に切り出す

フッター部分についても同様におこないます。

まずはテーマフォルダに footer.php ファイルを作成し、

Add Footer Template

index.php のフッター部分をコピーまたはカットして・・・

Cut Footer HTML

footer.php に貼り付け、保存します。

Paste Footer HTML

その後、index.php のフッターがあった箇所には以下のテンプレートタグを挿入。

Add Footer Template Tag

この状態でWordPressサイトを確認すると・・・

Check Footer

ちゃんと footer.php の内容が index.php から読み込まれているのがわかります。

 

今後 index.php 以外のテンプレートファイルを追加したとき、今回使ったテンプレートタグの記述だけで、index.php と同じヘッダーやフッターを読み込めるので大変便利です。