WordPress Katsuya

WP-PageNaviを使わないでページネーションを設置する方法

wordpress

WP-PageNaviはページネーションを簡単に設置することが出来るプラグインですが、「全○○件中 ○件目を表示」の位置を変えたり、総ページ数だけ表示させたりと細かく指定したりデザインを変えたりするには少々やりづらいです。

ページネーション周りの機能をそれぞれまとめて紹介します。

ページネーションが出来るテンプレートファイル

WordPress初心者の方で分かってない人もいるかもしれないので一応書きます。
ページネーションはすべてのテンプレートに実装できるわけじゃありません。
「記事一覧系テンプレート」だけで、single.php、page.phpでは表示されません。
抜けがあるかもしれませんが、とりあえず下記のテンプレートファイルでページネーションは使えます。

  • index.php
  • home.php
  • category.php
  • archive.php
  • taxonomy.php
  • loop.php
  • data.php
  • tag.php
  • author.php
  • search.php

基本のページネーション

ページネーションを設置するだけなら簡単です。以下を設置したいテンプレートに書いてください。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<h1><?php the_title(); ?></h1>
<?php endwhile; ?>
<div class="pager"><!-- ここからページネーション -->
	<?php 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' => $wp_query->max_num_pages,
		'mid_size' => 4,
		'current' => ($paged ? $paged : 1),
		'prev_text' => '≪',
		'next_text' => '≫',
	)); ?>
</div><!-- ここまでページネーション -->
<?php endif; ?>

参考までに簡単にCSSも書いておきます。

.pager{ text-align: center; margin: 0 0 20px; }
.page-numbers,.pager .current{ background: #eee; border: 1px solid #ccc; border-radius: 3px; padding: 3px 8px; margin: 10px 2px 0 2px; }
.pager .current{ background: #444; color: #fff; }
.pager a:link, .pager a:visited, .pager a:hover, .pager a:active{ color: #333; }

全○○件中 ○件目を表示させる

functions.php

function my_result_count() {
  global $wp_query;
  $paged = get_query_var('paged') - 1;
  $ppp = get_query_var('posts_per_page');
  $count = $total = $wp_query->post_count;
  $from = 0;
  if ( 0 < $ppp ) {
    $total = $wp_query->found_posts;
  if ( 0 < $paged )
    $from = $paged * $ppp;
  }
  printf('<p>全%1$s件中 %2$s%3$s件目を表示</p>', $total,( 1 < $count ? ($from + 1 . '〜') : '' ),($from + $count));
}

設置したい箇所に以下を記述します。ただしループ外に書いてください。

<?php my_result_count(); ?>

総ページ数と現在のページ数を表示する

functions.php

//現在のページ数の取得
function show_page_number() {
    global $wp_query;

    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $max_page = $wp_query->max_num_pages;
    echo $paged;
}

//総ページ数の取得
function max_show_page_number() {
    global $wp_query;

    $max_page = $wp_query->max_num_pages;
    echo $max_page;
}

好きなところに以下を記述します。こちらもループ外に書いてください。

// 現在のページ
<?php show_page_number(''); ?>
// 総ページ数
<?php max_show_page_number(''); ?>

各所の細かい説明が必要でしたらコメント頂ければと思います。

RECOMMENDこちらの記事も人気です。