WordPress / 備忘録

WordPressでページネーションという機能は非常に便利。投稿やカスタム投稿の一覧を表示するときに、表示する件数を制限し、ページ分けしてサイトを見やすくする。

もし100件ある記事を1ページに表示しようもんならどれだ縦長になるんだというような見づらいことになり、閲覧者も面倒なことになるし、もしレスポンシブ対応でスマホなら表示まで時間かかりすぎるでしょう。

ページ分けすると、何ページあるのかまで併せてリンクを生成してくれるWordpressに用意されている関数ではあるが、今回機能によってはこれを「前へ」と「次へ」だけにしたい案件が発生。

その時はこのページネーションの関数を自身でカスタムすれば可能ということが分かった。基本のページネーションの個人設定は以下のような感じ。

 

if (!function_exists( 'pagination_menu' )):
  function pagination_menu() {
    global $wp_query, $wp_rewrite;

    $big = 999999999;

    $args = array(
      'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
      'type' => 'array',
    );
    $paging_ary = paginate_links($args);

    if(!empty($paging_ary)) {
      $args = array(
        'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
        'format' => '/page/%#%',
        'total' => $wp_query->max_num_pages,
        'current' => max(1, get_query_var('paged')),
        'show_all' => False,
        'end_size' => 1,
        'mid_size' => 2,
        'prev_next' => True,
        'prev_text' => __('« 前へ'),
        'next_text' => __('次へ »'),
        'type' => 'list',
        'add_args' => False,
        'add_fragment' => '',
        'before_page_number' => '',
        'after_page_number' => ''
      );

      echo paginate_links($args);
    }
  }
endif;

表示したいテンプレートファイルのwhileでループしている中でpagination_menu()を実行すると、表示制限以上の記事がある場合に、ページネーションが表示する仕組みとなっている。

このページネーションをカスタムするときに使用している変数や関数を利用して、独自に「前へ」と「次へ」を表示する関数を作成したものが以下となる。

 

if (!function_exists( 'experience_nav' )):
  function experience_nav() {
    global $wp_query, $wp_rewrite;

    $big = 999999999;

    $args = array(
      'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
      'type' => 'array',
    );
    $paging_ary = paginate_links($args);

    if(!empty($paging_ary)) {
      $args = array(
        'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
        'format' => '/page/%#%',
        'total' => $wp_query->max_num_pages,
        'current' => max(1, get_query_var('paged')),
        'show_all' => False,
        'end_size' => 1,
        'mid_size' => 2,
        'prev_next' => True,
        'prev_text' => __('前へ'),
        'next_text' => __('次へ'),
        'type' => 'array',
        'add_args' => False,
        'add_fragment' => '',
        'before_page_number' => '',
        'after_page_number' => ''
      );
// ここからが今回のプログラム
      $total = $wp_query->max_num_pages;
      if($total > 1) {
    　　$current = (int) $args['current'];
    　　$add_args = $args['add_args'];

    　　$experience_link = '<div class="uk-clearfix uk-position-relative uk-margin-large-bottom pagination_block">';

        if ( $current && 1 < $current ) :
          $link = str_replace( '%_%', 2 == $current ? '' : $args['format'], $args['base'] );
          $link = str_replace( '%#%', $current - 1, $link );
          if ( $add_args ) {
            $link = add_query_arg( $add_args, $link );
          }
          $link .= $args['add_fragment'];

          $prev_link = sprintf(
            '<div class="uk-position-center-left"><a href="%s" class="uk-button uk-button-default btn_link btn_default icon_arrow_before" uk-slider-item="previous">%s</a></div>',
            esc_url( apply_filters( 'paginate_links', $link ) ),
            $args['prev_text']
          );

          $experience_link .= $prev_link;
        endif;

        if ( $current && $current < $wp_query->max_num_pages ) :
          $link = str_replace( '%_%', $args['format'], $args['base'] );
          $link = str_replace( '%#%', $current + 1, $link );
          if ( $add_args ) {
            $link = add_query_arg( $add_args, $link );
          }
          $link .= $args['add_fragment'];

          $next_link = sprintf(
            '<div class="uk-position-center-right"><a class="uk-button uk-button-default btn_link btn_default icon_arrow_after" href="%s" uk-slider-item="next">%s</a></div>',
            esc_url( apply_filters( 'paginate_links', $link ) ),
            $args['next_text']
          );

          $experience_link .= $next_link;
        endif;

        $experience_link .= '</div>';
        echo $experience_link;
      }
    }
  }
endif;

 

設定情報の$argsの配列をそのまま利用しているだけなので、必要な変数だけを用意すれば別にこの配列は必要ないとは思うが、何かの時にデフォルトに戻せるようにひとまずそのまま利用する形で。ちなみに表示するボタンはUIkitというCSSフレームワークを利用したときのボタン装飾用クラスをあてている。自分の好みで変更すれば問題なしかな？