ページネーション　WP-PageNavi完全版　コピペOK

2023年06月29日

今回はワードプレスでページネーションを作るときにとても便利なプラグインWP-PageNaviを弊社が使用しているCSSと一緒にして完全版としてコピペで使えるような感じで書いていきたいと思います。

ページネーションは指定の件数を表示させて、指定の件数を超えたら次のぺージで表示する仕組みになっています。

見ている人が見やすくするために非常に便利な機能です。

ワードプレスでページネーションを出力するタグなども用意されていますが、ちょっと複雑だし設定が難しかったりします。

そこで簡単にページネーションを設置できるプラグインがWP-PageNaviとなります。
こちらは簡単に設置出来て高機能なのでとても便利です。しかし若干手をくわえないと不便なところもありますので、そちらをマリオ君おすすめ設定で紹介していきたいと思います。

ページネーションを付けたい
簡単に設置したい
記事は若干いい加減でもいい
少しでも為になれば

WP-PageNaviインストール

まずはインストール
ワードプレス管理画面のプラグイン新規追加から検索窓口にWP-PageNaviを入力

今すぐインストールをクリックして有効化

これでインストールは完了です。管理画面の設定の中にPageNaviの項目が追加されます。

設定の中のPageNaviをクリックしてひらくと下記の画面になりますので、マリオ君おすすめは

表示するページ数は3
省略表示するページ数は0

がおすすめです。

こちらの意味は、あまり表示するページ数を多くするとスマホ時にレイアウトがくずれてしまいます。
また省略表示もページがたくさんある場合は大変便利ですが、こちらもスマホ時レイアウト重視で表示しないよう0にしています。

表示するページ数は3
省略表示するページ数は0

管理画面でWP-PageNaviの設定はこれで完了です。

※ページネーションをする場合の表示件数（例：5件表示したら6件目から次のぺージ）は
ワードプレス設定の中の

表示設定

の中にある1ページに表示する最大投稿数をお好きな件数に数字を変えて調整してください。

出力方法

はい、つぎは表示させてみたいと思います。

表示させる方法も簡単です。

表示させる場所によって方法が変わってきます。

一般的にページネーションを設置するのは投稿ページかカスタム投稿ページが多いかとおもいます。

ワードプレスでもともときまっているテンプレートファイル
例
single.php
category.php
archive.php
やカスタム投稿タイプ
single-〇〇.php

などで使うと思います。

こちらのファイルでWP-PageNaviを表示させる場合はこちら

<?php wp_pagenavi(); ?>

これを入れるだけです。

ループの中に書かなくても大丈夫です。

で、少し注意するところが、上記のようなテンプレートファイル以外の固定ページで使う場合は

上記で表示されません。表示されますが不具合が起きるみたいです。よくわかりませんが・・・。

固定ページで表示させる場合はこちら

<?php
if(function_exists('wp_pagenavi')):
    wp_pagenavi(array('query'=>$the_query));
endif;
?>

こちらを使用すると固定ページでもWP-PageNaviを表示させることができます。

なんとなく、やっているとここで結構沼にはまることがありますのでおきをつけて。

出力するファイルによって記述方法が少し変わります。

一応固定ページでのループで表示件数を指定して表示するサブループは

<?php
$paged = get_query_var('paged')? get_query_var('paged') : 1;
$args = array(
    'post_type' => 'works',
    'posts_per_page' => 5,
    'paged' => $paged,
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
?>

ここにループさせていものをいれる

<?PHP endwhile;endif;?>

<?php
if(function_exists('wp_pagenavi')):
    wp_pagenavi(array('query'=>$the_query));
endif;
?>	

<?php wp_reset_postdata(); ?>

5行目の’posts_per_page’ => 5,の数字を変えれば表示件数を変更できます。
※4行目はカスタム投稿のスラッグが入っています。投稿の場合はpost

で上記で表示させると下記のHTMLが表示されます。

<div class='wp-pagenavi' role='navigation'>
<span class='pages'>3 / 6</span>
	<a class="first" aria-label="First Page" href="https://mariokun.com/works/">« 先頭</a>
	<a class="previouspostslink" rel="prev" aria-label="前のページ" href="https://mariokun.com/works/page/2/">«</a>
	<span class='extend'>...</span>
	<a class="page smaller" title="ページ 2" href="https://mariokun.com/works/page/2/">2</a>
	<span aria-current='page' class='current'>3</span>
	<a class="page larger" title="ページ 4" href="https://mariokun.com/works/page/4/">4</a>
	<span class='extend'>...</span>
	<a class="nextpostslink" rel="next" aria-label="次のページ" href="https://mariokun.com/works/page/4/">»</a>
	<a class="last" aria-label="Last Page" href="https://mariokun.com/works/page/6/">最後 »</a>
</div>

表示はこんな感じ

これをCSSで変更していきます。

CSSでカスタマイズ

下記をカスタマイズします。

…の部分がいらない
スマホの時は3/6の全体を表示させている部分を非表示に
サイトの色に合わせて色を変更

CSSがこちら、よろしればコピペで利用してください。たしか昔どこかのサイトからもらったのですが覚えてないのでリンクできていません。もともと作ってくれた方ありがとうございます。

fontサイズは調整お願いします。マリオ君は0.1remを1pxにしています。

//一番外枠
div.wp-pagenavi{
	
	clear: both;
	text-align:center;
	margin:10px 0;

	}
	
/* 各リンクのCSS */

div.wp-pagenavi a{	

	border: 1px solid #2296DF;
	color: #2296DF;
	padding:8px 8px;
	margin: 0 4px;
	text-decoration: none;
	background:#FFF;
	border-radius: 3px;
	-border-radius: 3px;
	-webkit-border-radius: 3px;
		font-size: 1.5rem;
@media screen and (max-width:767px) {

		font-size: 1.3rem;

    }
@media screen and (max-width:374px) {

		padding:5px;
		margin: 0 3px;
		font-size: 1.0rem;

    }
	}

/* 各リンクのCSS(マウスオーバー時) */

div.wp-pagenavi a:hover{
	
	background:#2296DF;
	border: 1px solid #2296DF;	
	color: #fff;
		}

	/* 総ページ数のCSS */

div.wp-pagenavi span.pages{
	
	border: 1px solid #2296DF;
	color: #2296DF;
	padding:8px 8px;
	margin: 0 4px;
	background:#FFF;
	border-radius: 3px;
	-border-radius: 3px;
	-webkit-border-radius: 3px;
		font-size: 1.5rem;
   @media screen and (max-width: 767px) {
        display: none;
    }
	}

/* 現在のページのCSS */
div.wp-pagenavi span.current{
	
	border:1px solid #2296DF;
	color: #FFF;
	padding:8px 8px;
	margin: 0 4px;
	background:#2296DF;
	border-radius: 3px;
	-border-radius: 3px;
	-webkit-border-radius: 3px;
		font-size: 1.5rem;
@media screen and (max-width:767px) {

		font-size: 1.3rem;

    }
@media screen and (max-width:374px) {

		padding:5px;
		margin: 0 3px;
		font-size: 1.0rem;

    }
}

//...のところ
div.wp-pagenavi span.extend{
		display: none;
	}

こんな感じです

それで結果は
PC版