WP Pagenationはこれが便利。
2018年10月16日
ページ送りの設置はこれが今のところ便利。
next prevなどの文字を簡単に変更できるのと、cssでの装飾も簡単だ。
まずはfunctions.phpに以下を追加。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | /** * ページネーション出力関数 * $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で使用のもの。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | /*=========================================== 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 ; } |
ここはデザインに合わせて変更する。