Category: Works , WordPress
Works

wordpress:ページネーション(ページ送り)をselectで作成する

wordpress:ページネーション(ページ送り)をselectで作成する
  • twitter
  • facebook
  • はてな
  • line

wordpressにページネーション(ページ送り)を表示させるにはプラグインをつかったり、元からwordrepssにある機能を使えばできます。

WP-PageNavi(wordrepssプラグイン
paginate links(wordrepss関数)

こんな感じ。

通常のページネーション

ですが、あえてselect boxを使ったものを自作してみようと思います。

理由としては、数が増えると全てを表示できないのとスマホ表示の際にちょっと見づらいかなと思ったからです。

ではやっていきましょう!

実装

こんな感じにします。

ページネーションのセレクトボックス化

関数作成

まずは出力用の関数を作成します。

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など)に上記の関数を追記します。

その際、総ページ数と現在のページ数を取得しておきます。

//総ページ数・現在のページ数取得
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にリンクさせます。

$( 'select[name=pageselect]' ).change( function() {
	var target = $(this).val();
	window.location.href = target;
});

スマホサイズにした時も特に何もせずそのままでも大丈夫です。

ページネーションのスマホ表示

このブログにも実装してますんで、気になったら実際に挙動を確認してみてください。


おもしろかった・役に立った
  • twitter
  • facebook
  • はてな
  • line
▼ブログランキング参加中!クリック!▼
  • ブログランキング・にほんブログ村へ

Leave a comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください