WordPress テーマにページネーションを追加する方法

デフォルトの次の投稿と前の投稿の代わりにクールな数字を使用して WordPress テーマにページネーションのサポートを追加したい場合は、有名な PageNavi プラグインを使用して行うことができますが、私はテーマに手動でページネーションを追加することを好みます。プラグインを探しに行かなければなりません。また、外部スクリプトや CSS をすべて使用しなくても、サイトを高速に保つことができます。

幸いなことに、WordPress には「paginate_links」と呼ばれる優れた機能があり、WordPress 2.1 で追加され、サイト上のあらゆるクエリに対してページ分割されたスタイルのナビゲーションを作成できるようになります。これは、私の Total WordPressTheme のページネーションと同じように、テーマに簡単なページナビゲーションを追加するための簡単なチュートリアルです。

ページネーション PHP

function.php ファイル（またはテーマ内の保存したいファイル）の末尾に次のコードを追加するだけです。

// Numbered Pagination
if ( !function_exists( 'wpex_pagination' ) ) {
	
	function wpex_pagination() {
		
		$prev_arrow = is_rtl() ? '→' : '←';
		$next_arrow = is_rtl() ? '←' : '→';
		
		global $wp_query;
		$total = $wp_query->max_num_pages;
		$big = 999999999; // need an unlikely integer
		if( $total > 1 )  {
			 if( !$current_page = get_query_var('paged') )
				 $current_page = 1;
			 if( get_option('permalink_structure') ) {
				 $format = 'page/%#%/';
			 } else {
				 $format = '&paged=%#%';
			 }
			echo paginate_links(array(
				'base'			=> str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
				'format'		=> $format,
				'current'		=> max( 1, get_query_var('paged') ),
				'total' 		=> $total,
				'mid_size'		=> 3,
				'type' 			=> 'list',
				'prev_text'		=> $prev_arrow,
				'next_text'		=> $next_arrow,
			 ) );
		}
	}
	
}

すべてのパラメータを表示

ページネーションCSS

次の CSS をコピーし、style.css ファイルに貼り付けます。

ul.page-numbers {
    list-style: none;
    margin: 0;
}

.page-numbers:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

ul.page-numbers li {
    display: block;
    float: left;
    margin: 0 4px 4px 0;
    text-align: center;
}

.page-numbers a,
.page-numbers span {
    line-height: 1.6em;
    display: block;
    padding: 0 6px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
    border: 1px solid #ddd;
    color: #888;
}

.page-numbers a span { padding: 0 }

.page-numbers a:hover,
.page-numbers.current,
.page-numbers.current:hover {
    color: #000;
    background: #f7f7f7;
    text-decoration: none;
}

.page-numbers:hover { text-decoration: none }

テーマにページネーション機能を追加する

ページネーション関数をコールバックするのは非常に簡単です。必要なのは、任意の種類のページネーションを表示したいテーマファイルに次のコードを追加することだけです。最も一般的なのは、index.php、home.php、category.php、tags.php、archive.php、search.php です。ただし、ページネーションをサポートするカスタムページテンプレートがある場合は、ここに追加することをお勧めします。

デフォルトのページネーションを次のものに置き換えます (通常は endif の後のどこかにあります)。

<?php wpex_pagination(); ?>

カスタムクエリ?

WP_Query を使用してカスタムクエリを作成している場合、$wp_query 変数でクエリを定義しない限り、この関数は機能しません (これは悪いことなので、行わないでください)。これを修正するには、通常、次のような新しいクエリを作成します。

$wpex_query = new WP_Query( $args );

このようにして、ページネーションの作成時に変数を探すようにメインのページネーション関数を変更できます。例 (最初のスニペットを編集):

global $wp_query, $wpex_query;
if ( $wpex_query ) {
    $total = $wpex_query->max_num_pages;
} else {
    $total = $wp_query->max_num_pages;
}

更新: この例では、グローバル変数をチェックします…ただし、単にクエリ変数を wpex_pagination 関数に直接渡すこともできますが、これはおそらくより良い選択です 😉