とてもとてもご無沙汰しておりました。
久しぶりの投稿は、Wordpressでサイトを制作すると必ずと言っていいほど設置する「ページネーション」（ページャー）をプラグインで設置しよう！です。
はじめに
以前の記事にも書いておりますが、ページネーションなんて、今や簡単にプラグインで設置できるのに何故わざわざ工数を増やすようなことを？と思われるかと思います。私もWordpressでサイト制作をし始めた頃はそう思っていました。
プラグインはインストールして、初期設定をすればサクッと良い機能が実装でき、とても便利です。
でも、プラグインの種類が増えると管理しきれなくなったり、更新されなかったり、なんならバグが出てるのにプラグイン制作者が全然更新してくれないなんてことになりかねず、なんでもかんでもプラグインはどうなの？となったのがきっかけで、サイト制作で標準でつける機能で自作できるものはなるべき自作しよう！となったわけです。
とりあえず
いつものとりあえず先にコードだけです。
//ページナビゲーション
$args = array(
'mid_size' => 5, //現在のページの左右にそれぞれ表示するページ番号の数
'prev_text' => '<i class="fas fa-angle-double-left"></i> 前へ',
'next_text' => '次へ <i class="fas fa-angle-double-right"></i>',
'screen_reader_text' => ' ',
);
the_posts_pagination( $args );
.nav-links {
position: relative;
text-align: center;
margin: 0;
padding: 0;
height: 40px;
display: flex;
justify-content: flex-start;
}
.nav-links a.page-numbers {
display: block;
margin: 0 2px;
padding: 0.5em;
border: 1px solid #684736;
background: #fff;
min-width: 30px;
min-height: 40px;
text-align: center;
position: relative;
}
.nav-links span.page-numbers a {
display: block;
min-width: 30px;
min-height: 40px;
text-align: center;
color: #684736;
text-decoration: none;
}
.nav-links span.current {
min-width: 30px;
min-height: 40px;
padding: 0.5em;
text-align: center;
color: #fff;
background: #684736;
}
.nav-links .prev,
.nav-links .next {
display: block;
min-width: 30px;
min-height: 40px;
text-align: center;
}
解説
PHP(Wordpress独自関数）
コードは、Wordpressの標準関数のthe_posts_pagination()を使用しています。
※日本語のCodexがなくなってしまった（表示されるけど更新されていない）ので、英語版です。
この関数を追加する位置は、loopの外にするようにしてください。
WP_Query使っている場合は、wp_reset_query();してからその下に追記してください。
でないと、2ページ目以降が正しく表示されません。
//ページナビゲーション
$args = array(
'mid_size' => 5, //現在のページの左右にそれぞれ表示するページ番号の数
'prev_text' => '<i class="fas fa-angle-double-left"></i> 前へ',
'next_text' => '次へ <i class="fas fa-angle-double-right"></i>',
'screen_reader_text' => ' ',
);
the_posts_pagination( $args );
mid_sizeは、今表示しているページの左右に最大で表示するページ番号の数です。
あまり数字を大きくすると、ページに収まらなくなるので、ほどほどに。
prev_textとnext_textには、みんな大好きFontAwesomeのアイコンを入れて、テキストは前へ 次へと入れています。日本語ではなくてもOKです。
FontAwesomeがサイトの雰囲気に合わないなぁと言う場合は、思い切ってHTMLの特殊記号を使うのもありです。
その場合は、以下の部分を置き換えてください。
'prev_text' => '<',
'next_text' => '>',
こんな感じで表示されます。
screen_reader_textは、スクリーンリーダー向けのテキストを入れるのですが、the_posts_pagination()関数は、h2タグで囲まれたタイトルがページネーションの上に表示されるので、' 'で表示しない様にしています。
'screen_reader_text' => ' ',
上記コードだと、divの中にaタグが表示されますが、CSSを適用する時など、ul liタグで囲みたい場合は、以下のコードを追加してください。
'type' => 'list',
こんな感じになりますので、タグに合わせてCSSをあててください。
CSS
デザインは、それぞれのページ番号を箱で囲むデザインにしています。
前述したul liタグで囲まれているコードではない方にCSSをあてています。
.nav-links {
position: relative;
text-align: center;
margin: 0;
padding: 0;
height: 40px;
display: flex;
justify-content: flex-start;
}
.nav-links a.page-numbers {
display: block;
margin: 0 2px;
padding: 0.5em;
border: 1px solid #684736;
background: #fff;
min-width: 30px;
min-height: 40px;
text-align: center;
position: relative;
}
.nav-links span.page-numbers a {
display: block;
min-width: 30px;
min-height: 40px;
text-align: center;
color: #684736;
text-decoration: none;
}
.nav-links span.current {
min-width: 30px;
min-height: 40px;
padding: 0.5em;
text-align: center;
color: #fff;
background: #684736;
}
.nav-links .prev,
.nav-links .next {
display: block;
min-width: 30px;
min-height: 40px;
text-align: center;
}
現在表示しているページcurrentはリンクなしで表示されるので背景色をつけてます。
widthもheightもデバイスサイズで大きさを変えたくないので、pxで指定しています。
1ページに表示するコンテンツの数は、Wordpressの「設定」→「表示設定」にある「1ページに表示する最大投稿数」が影響します。
ページネーションに表示されているページ数が多いなと感じたら、そちらを調整してください。
ただし、他のアーカイブページにも影響しますので注意が必要です。
最後に
以前の記事中でもお伝えしていた様に、Webサイトの標準機能としてページネーションは実装するので、簡単にコピペ出来るように用意しておくと、実装自体も簡単になるかと思います。
過去にあげた「パンくずリストを実装（プラグインなし）も合わせてご覧ください。
こちらの記事は、一般的なページ構造の「パンくずリスト」のコードを公開しています。
カスタム投稿には対応していませんので、カスタム投稿への対応は、個々に行ってください。