こんにちは。fsです。
WordPressテーマ開発シリーズの続きです。
今回はページネーションをつくっていきます。
仕上がりはこんなイメージです。
投稿が増えたときに、前の投稿一覧/次の投稿一覧を表示できるようにしていきます。
前回同様にコードを共有しながら進めていきますので、初心者の方も安心して読み進めていただければと思います。
それではご覧ください。
ページネーションとは
WordPressでは、トップページに投稿を何件まで表示させるかを設定することができます。
デフォルトだと10件までになっていて、記事が10件を超えた場合は次の一覧ページを表示させる必要があります。
この一覧ページを移動させるボタンをページネーションといいます。
今回はこのページネーションを実装していくわけですが、事前準備として表示する投稿数を3としておきます。
※テスト投稿を何件もつくるは大変なので😌
ページネーションをつくる
それでは実際にページネーションをつくっていきます。
Start Bootstrapのデザインを利用して前の投稿/古い投稿のレイアウトを書いていきます。
プレビューで完成形のイメージを確認します。
レイアウトができたら、ページネーションのリンクを作っていきます。
手順は以下のとおりです。
- ページネーションのリンクタグ（aタグ）をカット
- 新しい/古い投稿のセット（一覧）を取得・リンク化するテンプレートタグを書き、変数（データの箱）に格納する
- 2をページネーションで指定したいクラス（ボタンのデザイン）に加工して表示する
少し複雑なのでそれぞれ解説していきます。
ページネーションのリンクタグをカット
まず、デフォルトデザインのリンクタグをカットします。
これでページネーションを表示させたいdivタグが空になったので、リンクさせるプログラムを書いていきます。
投稿のセットを取得し変数に代入
まずは古いページ一覧を取得する処理から書いていきます。
ここでは投稿の次のセットを取得しリンク化する命令である、get_next_posts_linkというテンプレートタグを使います。
次の処理もあるので、ここでは一旦変数（データの箱）に格納しておきます。
指定したいクラスに加工して表示する
get_next_posts_linkで古いページ一覧へのリンクができましたが、指定したいクラス（ここではボタンのデザイン）がまだついてきていません。
そこでphpの関数、str_replaceを使ってクラスをつけていきます。
str_replaceはパラメーターを3つとることができ、
1つ目に置き換える前の文字列（ここではリンクタグ）
2つ目に置き換える文字列とクラス
3つ目に置き換えた後の文字列（ここではOlder Posts）
を記述します。
最後にechoで出力すれば古い投稿のページネーションができます。
これだけでも機能しますが、たまに古い記事のボタンがなくなることがあるので、if構文でバグ防止をかけておきます。
古い投稿一覧があれば、置き換え処理をするというプログラムです。
同じ要領で新しい投稿一覧を表示させるページネーションも実装していきます。
動作確認をしたら、無事に実装できていることがわかります。
以前つくったarchive.phpのファイルにもページネーションをコピーしておきましょう。
※参考記事はこちら
↓↓↓↓↓↓↓
これでページネーションの実装は完了です。
まとめ 格納→加工→出力で自由にデザイン
いかがだったでしょうか。
今回はページネーションをつくりながら、
テンプレートタグで取得したデータを一旦変数に格納し、加工して出力する
というをプログラムを実践していきました。
つくったボタンリンクが
「自分の好きなデザインにならない😢」
なんてときにこのような処理はとても有効です。
あまり見慣れないプログラムではありますが、こちらも覚えておくと便利です😌
以上、少しでも参考になれば幸いです。
最後までお読みいただきありがとうございました。
XサーバーでWordpressを始めてみよう！
コメント