WP Pagenationはこれが便利。
2018年10月16日
ページ送りの設置はこれが今のところ便利。
next prevなどの文字を簡単に変更できるのと、cssでの装飾も簡単だ。
まずはfunctions.phpに以下を追加。
/**
* ページネーション出力関数
* $pages : 全ページ数
* $range : 左右に何ページ表示するか
* $show_only : 1ページしかない時に表示するかどうか
*/
function pagination( $pages = 1, $range = 2, $show_only = false ) {
$pages = (int) $pages; //float型で渡ってくるので明示的に int型 へ
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
//表示テキスト
$text_first = "« 最初へ";
$text_before = "‹ 前へ";
$text_next = "次へ ›";
$text_last = "最後へ »";
if ( $show_only && $pages === 1 ) {
// 1ページのみで表示設定が true の時
echo '<div class="pagination"><span class="current">1</span></div>';
return;
}
if ( $pages === 1 ) return; // 1ページのみで表示設定もない場合
if ( 1 !== $pages ) {
//2ページ以上の時
echo '<div class="pagination"><span>Page ', $paged ,' of ', $pages ,'</span>';
if ( $paged > $range + 1 ) {
// 「最初へ」 の表示
echo '<a href="', get_pagenum_link(1) ,'">', $text_first ,'</a>';
}
if ( $paged > 1 ) {
// 「前へ」 の表示
echo '<a href="', get_pagenum_link( $paged - 1 ) ,'">', $text_before ,'</a>';
}
for ( $i = 1; $i <= $pages; $i++ ) {
if ( $i <= $paged + $range && $i >= $paged - $range ) {
// $paged +- $range 以内であればページ番号を出力
if ( $paged === $i ) {
echo '<span class="current">', $i ,'</span>';
} else {
echo '<a href="', get_pagenum_link( $i ) ,'" class="inactive">', $i ,'</a>';
}
}
}
if ( $paged < $pages ) {
// 「次へ」 の表示
echo '<a href="', get_pagenum_link( $paged + 1 ) ,'">', $text_next ,'</a>';
}
if ( $paged + $range < $pages ) {
// 「最後へ」 の表示
echo '<a href="', get_pagenum_link( $pages ) ,'">', $text_last ,'</a>';
}
echo '</div>', "\n";
}
}
表示テキスト部分で文字を変更する。「戻る」と「次」の表示が逆の方が良い場合もあり、クライアント次第で変更する。
の後の部分は総ページ数が必要ない場合は削除。
css部分は以下を。kureai.infoのarticleで使用のもの。
/*===========================================
Pagenation
===========================================*/
.pagination {
display: flex;
align-items: center;
justify-content: center;
margin: 40px 0;
position: relative;
font-size: 90%;
}
.pagination span, .pagination a {
display: block;
width: auto;
margin: 4px;
padding: 8px;
color: #FFF;
border-radius: 3px;
border: 1px solid #AEAEAE;
background-color: #AEAEAE;
text-decoration: none;
text-align: center;
line-height: 16px;
}
/* ページ番号 */
.pagination .pager{
width: 32px;
}
/* ホバー時 & 現在のページ */
.pagination a:hover,
.pagination .current {
color: #666;
border-radius: 3px;
border-color: #AEAEAE;
background-color: #FFF;
}
/* 前へ */
.pagination a.before {
margin-right: 16px;
}
/* 次へ */
.pagination a.next {
margin-left: 16px;
}
/* 最初へ */
.pagination a.first {}
/* 最後へ */
.pagination a.last {}
/* Page x / y */
.pagination span.page_num {
display: none;
}
ここはデザインに合わせて変更する。