UKey's Labo

アーカイブページにページャを設置する(プラグイン未使用)

仕様

ページャを設定するにあたり、1ページに表示する件数を決める必要がある。

最大表示件数の設定

設定方法は以下3通り 1. ダッシュボードの[設定] > [表示設定]「1ページに表示する最大投稿数」から設定する

setting_max_per_page.png (26.5 kB)

  1. ループ開始時に設定する
    $args = array(
        'post_type' => get_post_type(),
        'numberposts' => 2,
        'posts_per_page' => 2, // 最大表示件数
        'paged' => $paged
    );
    $posts = get_posts( $args );
    if ( $posts ) :
        foreach ( $posts as $post ) :
            setup_postdata( $post );
・・・
  1. functions.phpで設定する。これは手の込んだパターンで、カテゴリ、タクソノミごとに最大表示件数を変える場合などに向いている使い方。そうでなければ、ここまでする必要はない。使用する場合は、アクションフック‘pre_get_posts’を使用する。
function my_pre_get_posts( $query ) {
    if ( is_admin() || ! $query -> is_main_query() ) return;

    if ( $query -> is_archive() ) {              //アーカイブ
        $query -> set( 'posts_per_page', '5' );  //5件
        return;
    }
    if ( $query -> is_search() ) {               //検索
        $query -> set( 'posts_per_page', '30' );//30件
        return;
    }
    if ( $query -> is_category() ) {             //カテゴリー
        $query -> set( 'posts_per_page', 15 );   //15件
        return;
    }
}
add_action( 'pre_get_posts', 'my_pre_get_posts' );

ページ数の取得方法

ページャを作成するにあたり、上記で設定した最大表示件数を使用して、実際に何ページになるかを取得する必要がある。 ダッシュボードで設定した方法と、ループ or functions.php で設定した場合とで、取得方法(格納されているオブジェクト)が異なる。

ダッシュボードで設定した最大表示件数からページ数を取得する

// $wp_queryから取得する
$max_per_pages = $wp_query->max_per_pages;

ループ or functions.phpで設定した最大表示件数からページ数を取得する

    $args = array(
        'post_type' => get_post_type(),
        'numberposts' => 2,
        'posts_per_page' => 2,
        'paged' => $paged
    );

    // 自分で設定した値でqueryをnewする
    $arc_query = new WP_Query($args);

    // 取得
    $max_per_pages = $arc_query->max_num_pages;

現在ページの取得方法

ページャを設定するにあたり、現在表示されているページが何ページ目なのかを取得する必要がある。

    // ページャ用に現在ページを取得
    $paged = get_query_var('paged') ? get_query_var('paged') : 1;

get_query_var()pagedを渡して取得する。1ページ目の場合は‘0’が返ってくるため、1ページ目の場合のみ、固定で‘1’が返ってくるようにする。

アーカイブページ

上記を踏まえて、アーカイブページは以下のようになる。 例)最大表示件数をループ作成時に設定した場合。

<div class="pager">
<?php
    // ページャ用に現在ページを取得
    $paged = get_query_var('paged') ? get_query_var('paged') : 1;
    $args = array(
        'post_type' => get_post_type(),
        'numberposts' => 2,
        'posts_per_page' => 2, // 最大表示件数を設定
        'paged' => $paged // 現在のページ数をセット
    );

    $arc_query = new WP_Query($args);

    $posts = get_posts( $args );

    if ( $posts ) :
        foreach ( $posts as $post ) :
            setup_postdata( $post );
?>
    <!-- タイトル、リンクなどの表示処理 -->
<?php
        // ループ終了
        endforeach;
    endif;

    // ページャ用設定
    global $wp_rewrite;
    $paginate_base = get_pagenum_link(1);
    if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
        $paginate_format = '';
        $paginate_base = add_query_arg('paged','%#%');
    }
    else{
        $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') . user_trailingslashit('page/%#%/','paged');
        $paginate_base .= '%_%';
    }
    // ページャを出力する
    echo paginate_links(array(
        'base' => $paginate_base,
        'format' => $paginate_format,
        'total' => $arc_query->max_num_pages, // トータルのページ数をセット
        'mid_size' => 1,
        'current' => ($paged ? $paged : 1), // 現在のページ数をセット
        'prev_text' => '«',
        'next_text' => '»',
        )
    );
?>
</div>

補足:paginate_links()詳細

base (文字列) (オプション) ページ番号付きのリンクを生成するために使われるベースの URL を指定します。例えば ‘http://example.com/all_posts.php%%’ を指定すると、それに含まれる ‘%%’ は ‘format’ 引数(下記参照)により置き換えられます。 初期値: ‘%_%’
format (文字列) (オプション) ページネーションの構造を指定するのに使います。初期値は ‘?page=%#%’ で、カスタムパーマリンク(「?」などの記号を含まない URL)を使いたい場合は、’/page/%#%’ のように書けば ‘%#%’ の部分がページ番号に置き換わります。 初期値: ‘?page=%#%’
total (整数) (オプション) 全体のページ数 初期値: 1
current (整数) (オプション) 現在のページ番号 初期値: 0
show_all (真偽値) (オプション) true の場合、現在のページ付近のページ番号の短いリストではなくすべてのページ番号が表示されます。デフォルトでは ‘show_all’ は false になっていますので、’end_size’ と ‘mid_size’ 引数でコントロールされます。 初期値: false
end_size (整数) (オプション) ページ番号のリストの両端(最初と最後)にいくつの数字を表示するか。 初期値: 1
mid_size (整数) (オプション) 現在のページの両側にいくつの数字を表示するか。ただし現在のページは含みません。 初期値: 2
prev_next (真偽値) (オプション) リストの中に「前へ」「次へ」のリンクを含むかどうか。 初期値: true
prev_text (文字列) (オプション) 前のページへのリンクとして表示する文言。’prev_next’ 引数が true のときだけ働きます。 初期値: __(‘« Previous’)
next_text (文字列) (オプション) 次ページへのリンクとして表示する文言。’prev_next’ 引数が true のときだけ働きます。 初期値: __(‘Next »’)
type (文字列) (オプション) 戻り値の形式をコントロールします。可能な値は:’array’ – 表示を完全にコントロールできるようにページ送りのリンクを配列に入れて返します。’list’ – HTMLの ul タグを使ったリストを返します。初期値: ‘plain’ ‘plain’ – 改行文字によって区切られたリンクの文字列を返します。
add_args (配列) (オプション) 追加のクエリ引数の配列。 初期値: false
add_fragment (文字列) (オプション) それぞれのリンクに付け加える文字列。 初期値: なし
before_page_number (文字列) (オプション) ページ番号の直前に付け加える文字列。 初期値: なし
after_page_number (文字列) (オプション) ページ番号の直後に付け加える文字列。 初期値: なし

参考までにCSSも

.pager{
    margin-bottom: 20px;
    text-align:center}

a.page-numbers,
.pager .current{
    background-color: #edede3;
    border: solid 1px #aaaaaa;
    border-radius:5px;
    padding:5px 8px;
    margin:0 2px;
}

.pager .current{
    background-color: #000000;
    border: solid 1px #000000;
    color: #ffffff;
}

.pager a:hover{
    color: #ffffff;
    border: solid 1px #000000;
    background-color: #000000;
}