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; }
ここはデザインに合わせて変更する。