0
wordpress：ページネーション（ページ送り）をselectで作成する
wordpressにページネーション（ページ送り）を表示させるにはプラグインをつかったり、元からwordrepssにある機能を使えばできます。
WP-PageNavi（wordrepssプラグイン
paginate links（wordrepss関数）
こんな感じ。
ですが、あえてselect boxを使ったものを自作してみようと思います。
理由としては、数が増えると全てを表示できないのとスマホ表示の際にちょっと見づらいかなと思ったからです。
ではやっていきましょう！
実装
こんな感じにします。
関数作成
まずは出力用の関数を作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | function select_pagination( $maxpages, $paged ) { if( $maxpages == 1 ) return; echo '<div id="pagination">'; if( $paged != 1 ) { echo '<div class="prev"><a href="'.esc_url( get_pagenum_link( $paged - 1 ) ).'">PREV</a></div>'; } echo '<select name="pageselect">'; for( $i = 1; $i <= $maxpages; ++$i ) { $selected = ( $i == $paged ) ? ' selected' : null; echo '<option value="'.esc_url( get_pagenum_link( $i ) ).'"'.$selected.'>'.$i.'</option>'; } echo '</select>'; if( $paged != $maxpages ) { echo '<div class="next"><a href="'.esc_url( get_pagenum_link( $paged - 1 ) ).'">NEXT</a></div>'; } echo '</div>'; } |
引数として総ページ数と現在のページ数を設定します。
総ページ数が1ページの場合は何もしません。
ページ送りを表示させる必要ないですしね。
1ページ目以外の場合「前のページに戻るリンク」、最後のページ以外「次のページに進むリンク」をそれぞれ出力します。
selectの部分は総ページ数分optiopnを表示させるという単純なものです。
ページリンクの作成は、wordpress関数の「get_pagenum_link()」を使用します。
引数の部分に作成したいページのページ番号を入れます。
出力
実際に出力させたい箇所に（index.phpやcategory.phpなど）に上記の関数を追記します。
その際、総ページ数と現在のページ数を取得しておきます。
1 2 3 4 5 6 7 | //総ページ数・現在のページ数取得global $wp_query;$maxpages = $wp_query->max_num_pages;$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;//関数実行select_pagination( $maxpages, $paged ); |
jQuery
最後にjQueryでselectの値を変更したタイミングでvalueに指定しているURLにリンクさせます。
1 2 3 4 | $( 'select[name=pageselect]' ).change( function() { var target = $(this).val(); window.location.href = target;}); |
スマホサイズにした時も特に何もせずそのままでも大丈夫です。
このブログにも実装してますんで、気になったら実際に挙動を確認してみてください。
▼ブログランキング参加中！クリック！▼
