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