MENU
  1. ホーム
  2. WordPress
  3. プラグインなしでページネーションを実装する方法【WordPressカスタマイズ】

プラグインなしでページネーションを実装する方法【WordPressカスタマイズ】

こんにちは！Weblattです。

今回は、WordPressでプラグインを使わずにページネーションを実装する方法を紹介します。

ページネーション用のプラグインといえば、『WP-PageNavi』が有名です。でも、必要な機能のみでサーバーへの負荷を軽くするなら、プラグインなしで実装することは意外と簡単です。エラーや不具合にも対応しやすい点もメリットですね。

まずテーマファイルのfunctions.phpに以下を記述します。

// ページネーション
// ↓出力関数
// $paged : 現在のページ
// $pages : 全ページ数
// $range : 左右に何ページ表示するか
// $show_only : 1ページしかない時に表示するかどうか
function pagination( $pages, $paged, $range = 5, $show_only = false ) {

  $pages = ( int ) $pages;    //float型で渡ってくるので明示的に int型 へ
  $paged = $paged ?: 1;       //get_query_var('paged')をそのまま投げても大丈夫なように

  //表示テキスト
  $text_before  = "<";
  $text_next    = ">";

  if ( $show_only && $pages === 1 ) {
      // １ページのみで表示設定が true の時
      echo '<div class="pager_style"><li class="on">1</li></div>';
      return;
  }

  if ( $pages === 1 ) return;    // １ページのみで表示設定もない場合

  if ( 1 !== $pages ) {
    //２ページ以上の時
    echo '<div class="pager_style"><ul>';

    if ( $paged > 1 ) {
        // 「前へ」 の表示
        echo '<li class="prev"><a href="', get_pagenum_link( $paged - 1 ) ,'">', $text_before ,'</a></li>';
    }
    for ( $i = 1; $i <= $pages; $i++ ) {

        if ( $i <= $paged + $range && $i >= $paged - $range ) {
            // $paged +- $range 以内であればページ番号を出力
            if ( $paged === $i ) {
                echo '<li class="on"><a href="#">', $i ,'</a></li>';
            } else {
                echo '<li><a href="', get_pagenum_link( $i ) ,'">', $i ,'</a></li>';
            }
        }

    }
    if ( $paged < $pages ) {
        // 「次へ」 の表示
        echo '<li class="next"><a href="', get_pagenum_link( $paged + 1 ) ,'">', $text_next ,'</a></li>';
    }
    echo '</ul></div>';
  }
}

function add_my_scripts() {
  wp_enqueue_script(
    'css_browser_selector', 
    get_stylesheet_directory_uri().( '/js/css_browser_selector.js' ), 
    array(), 
    false, 
    false
  );
}
add_action('wp_enqueue_scripts', 'add_my_scripts');

pagenationという関数を作ってあげます。

引数の$rangeに任意の設定をしてあげてください。たとえば、$range = 5 なら左右に５ページ表示します。

１ページに何記事表示するかの設定は、WordPress管理画面「設定」→「表示設定」→「１ページに表示する最大投稿数」で指定することができます（初期設定は10件）。

$show_only は１ページしかない時にページネーションを表示するかどうかです。trueなら表示、falseなら非表示です。

次に、archive.phpなどページネーションを表示したい箇所に以下を記述します。

<?php
if ( function_exists( 'pagination' ) ) :
pagination( $wp_query->max_num_pages, get_query_var( 'paged' ) );
endif;
 ?>

あとはCSSでスタイルを整えてあげれば、下記ページネーションが簡単に実装できますよ。

/*  ページネーション  */
.pager_style{
	text-align:center;
	padding:30px 0 0 0;
}
.pager_style li{
	width:40px;
	border:1px solid #BBBBBB;
	background:#fff;
	display:inline-block;
	margin:0 0 10px 0;
}
.pager_style li:hover{
	background:#82c264;
}
.pager_style li.on{
	background:#82c264;
}
.pager_style li a{
	font-size:16px;
	text-decoration:none;
	display:block;
	padding:8px 0;
}
.pager_style li.on a{
	color:#fff;
}
.pager_style li a:hover{
	color:#fff;
}
.pager_style li.prev{
	margin:0 10px 0 0;
}
.pager_style li.next{
	margin:0 0 0 10px;
}
@media screen and (max-width: 768px) {
	.pager_style li{
		width: 30px;
	}
	.pager_style li a{
		font-size:12px;
		padding:6px 0;
	}
	.pager_style li.prev,
	.pager_style li.next{
		margin:0;
	}
}

ぜひ、試してみてください。それでは！

WordPress
目次