【やってみた】WordPressのテーマ自作(09.ページネーション)

今回の記事は、STEP4の「WordPress関数に書き直す」の「09.ページネーション」の解説となります。ページネーションの設定、表示、そしてスタイルの調整を行います。ページネーションには「ボタンリンク」の方法と、「ページ番号付きリンク」の2つの方法がありますが、ここでは「ページ番号付きリンク」をご紹介します。

テーマ自作の流れ

STEP1:
静的サイトの作成

ワイヤーフレームでサイトをデザインして、HTMLとCSSで静的サイトを作成します。index.htmlとstyle.cssでサイトを作成します。
STEP2:
開発環境構築

自分のパソコン内部だけで開発と動作テストが行えるWordPress専用の環境構築ソフト、HTML、CSS、PHPの編集の為のソースコードエディタ、そしてHTMLとCSSで構築された静的サイトを準備します。
STEP3:
テーマの有効化

自作テーマを有効化する為に、index.htmlをindex.phpに書き換え、style.cssを作成してWordPressにアップロードして認識してもらいます。
STEP4:
WordPress関数に書き直す

テーマとして認識できましたら、index.phpの内容をヘッダー、フッター、サイドバー等コンテンツごとに分割したり、アイキャッチ画像やナビゲーションメニュー等を設定する為に、WordPress関数に書き直していきます。
STEP5:
サーバーにアップロード

サーバーにアップしてWebに公開します。
公開後、プラグインなどで必要な機能を追加したり、必要なカスタマイズを行います。

ページネーションの実装

ページネーションの実装

解説動画は、こちら

ページネーションを実装する方法は、WordPress関数を使う方法と、関数を自作して実装する方法があります。ここでは備忘録を兼ねて2つご紹介します。

ページネーションの確認

ページネーションには「ボタンリンク」の方法と、「ページ番号付きリンク」の2つの方法がありますが、ここでは「ページ番号付きリンク」を設定します。

WordPress関数(the_posts_pagination)で実装

ページネーションの表示

WordPressのページネーションは、＜?php the_posts_pagination(); ?＞という関数で簡単に数字付きページネーションを実装することができます。リスト形式で出力されますので、後はstyle.cssで調整します。

WordPressのトップページやカスタム投稿ページ、カテゴリーページなどに実装する場合、それぞれのテーマファイルに上記のコードを記述すると実装できます。

サイトの確認

スタイルの調整

ソースを確認すると、「pagination」というクラスの中で「ul」タグと「li」タグで表示しています。

そこで、次のように調整します。(display:flexで横並びにします。)

/*ページネーション*/
.pagination ul {
 list-style: none;
 display: flex;
 margin: 0 auto;
 padding: 0;
}
.pagination ul a {
 padding: 9px 14px;
 border: 1px solid #1e73be;
}
.current {
 color: white;
 padding: 9px 14px;
 border: 1px solid #1e73be;
 background-color: #1e73be;
}

ページネーションの確認

WordPressの管理画面から1ページに表示する最大投稿数を変更して、ページネーションを確認します。

スタイルの追記

ページネーションが左端に寄っていますので、センタリングします。

style.cssに、次のコードを追記します。

注意:
WordPress関数(the_posts_pagination)で実装する際に＜ul＞タグに記載されているjustfy-content-centerを除いて実装した場合に、センタリングが外れてしまいますので、style.cssで調整します。
＜ul＞タグのjustfy-content-centerを残していれば、センタリングされています。

再読み込みすると、「ページ番号付きリンク」のページネーションが正しく表示されました。ページネーションの完成です。