こんにちは！Weblattです。
今回は、WordPressでプラグインを使わずにページネーションを実装する方法を紹介します。
ページネーション用のプラグインといえば、『WP-PageNavi』が有名です。でも、必要な機能のみでサーバーへの負荷を軽くするなら、プラグインなしで実装することは意外と簡単です。エラーや不具合にも対応しやすい点もメリットですね。
まずテーマファイルのfunctions.phpに以下を記述します。
// ページネーション
// ↓出力関数
// $paged : 現在のページ
// $pages : 全ページ数
// $range : 左右に何ページ表示するか
// $show_only : 1ページしかない時に表示するかどうか
function pagination( $pages, $paged, $range = 5, $show_only = false ) {
$pages = ( int ) $pages; //float型で渡ってくるので明示的に int型 へ
$paged = $paged ?: 1; //get_query_var('paged')をそのまま投げても大丈夫なように
//表示テキスト
$text_before = "<";
$text_next = ">";
if ( $show_only && $pages === 1 ) {
// １ページのみで表示設定が true の時
echo '<div class="pager_style"><li class="on">1</li></div>';
return;
}
if ( $pages === 1 ) return; // １ページのみで表示設定もない場合
if ( 1 !== $pages ) {
//２ページ以上の時
echo '<div class="pager_style"><ul>';
if ( $paged > 1 ) {
// 「前へ」 の表示
echo '<li class="prev"><a href="', get_pagenum_link( $paged - 1 ) ,'">', $text_before ,'</a></li>';
}
for ( $i = 1; $i <= $pages; $i++ ) {
if ( $i <= $paged + $range && $i >= $paged - $range ) {
// $paged +- $range 以内であればページ番号を出力
if ( $paged === $i ) {
echo '<li class="on"><a href="#">', $i ,'</a></li>';
} else {
echo '<li><a href="', get_pagenum_link( $i ) ,'">', $i ,'</a></li>';
}
}
}
if ( $paged < $pages ) {
// 「次へ」 の表示
echo '<li class="next"><a href="', get_pagenum_link( $paged + 1 ) ,'">', $text_next ,'</a></li>';
}
echo '</ul></div>';
}
}
function add_my_scripts() {
wp_enqueue_script(
'css_browser_selector',
get_stylesheet_directory_uri().( '/js/css_browser_selector.js' ),
array(),
false,
false
);
}
add_action('wp_enqueue_scripts', 'add_my_scripts');pagenationという関数を作ってあげます。
引数の$rangeに任意の設定をしてあげてください。たとえば、$range = 5 なら左右に５ページ表示します。
１ページに何記事表示するかの設定は、WordPress管理画面「設定」→「表示設定」→「１ページに表示する最大投稿数」で指定することができます（初期設定は10件）。
$show_only は１ページしかない時にページネーションを表示するかどうかです。trueなら表示、falseなら非表示です。
次に、archive.phpなどページネーションを表示したい箇所に以下を記述します。
<?php
if ( function_exists( 'pagination' ) ) :
pagination( $wp_query->max_num_pages, get_query_var( 'paged' ) );
endif;
?>あとはCSSでスタイルを整えてあげれば、下記ページネーションが簡単に実装できますよ。
/* ページネーション */
.pager_style{
text-align:center;
padding:30px 0 0 0;
}
.pager_style li{
width:40px;
border:1px solid #BBBBBB;
background:#fff;
display:inline-block;
margin:0 0 10px 0;
}
.pager_style li:hover{
background:#82c264;
}
.pager_style li.on{
background:#82c264;
}
.pager_style li a{
font-size:16px;
text-decoration:none;
display:block;
padding:8px 0;
}
.pager_style li.on a{
color:#fff;
}
.pager_style li a:hover{
color:#fff;
}
.pager_style li.prev{
margin:0 10px 0 0;
}
.pager_style li.next{
margin:0 0 0 10px;
}
@media screen and (max-width: 768px) {
.pager_style li{
width: 30px;
}
.pager_style li a{
font-size:12px;
padding:6px 0;
}
.pager_style li.prev,
.pager_style li.next{
margin:0;
}
}
ぜひ、試してみてください。それでは！