2023.05.15

WordPressプラグイン『WP-PageNavi』設定方法＆CSS【コピペOK】

kanri

本記事はこんな方にオススメです

WordPressテーマにページネーション（ページャー）を追加したい方
『WP-PageNavi』の設定方法について知りたい方
自作（オリジナル）WordPressテーマを作成したいとお考えの方
WordPressを利用している or 利用予定の方
Webデザイナーを目指している方

今回は、WordPressに簡単にページネーション（ページャー）が設置できるプラグイン『WP-PageNavi』について解説します。

具体的には、『WP-PageNavi』の

インストール方法
設定方法
出力方法
CSSでカスタマイズする方法

などについて解説していきます。

えりー

コピペできるCSSのコードもご用意しました！

Contents

WordPressプラグイン『WP-PageNavi』のインストール方法
- 1.[プラグイン]-[新規追加]をクリック
- 2.「WP pagenavi」と検索し、[今すぐインストール]をクリックし、[有効化]
WordPressプラグイン『WP-PageNavi』の設定方法
WordPressプラグイン『WP-PageNavi』の出力方法
（応用）WordPressプラグイン『WP-PageNavi』をCSSでカスタマイズする方法
- 出力側にidをつける
- CSS（SCSS）でデザインをカスタマイズ
最後に：WordPressについてのご相談もお気軽にどうぞ！

WordPressプラグイン『WP-PageNavi』のインストール方法

まずは、『WP-PageNavi』をインストールしましょう。

1.[プラグイン]-[新規追加]をクリック

2.「WP pagenavi」と検索し、[今すぐインストール]をクリックし、[有効化]

WordPressプラグイン『WP-PageNavi』の設定方法

『WP-PageNavi』はインストールするだけでも使えますが、より細かく表示をカスタマイズしたい場合は、[設定]-[PageNavi]から設定します。

どのようにカスタマイズするかはお好みになるので、ここからは参考ですが、私の場合は下記のように設定することが多いです。（あくまで一例です）

1.「総ページ数用テキスト」を空欄にする

えりー

総ページ数はあまり必要性がないかなと思い、取ってしまうことが多いです

2.「pagenavi-css.css を使用」を[いいえ]にする

CSSで自由にカスタマイズしたい場合は、「いいえ」にします。

えりー

CSSでカスタマイズしたほうが、サイトにあわせて細かく調整できるのでオススメです！

このページにてCSSのカスタマイズ例も載せています（後述）

3.[変更を保存]をクリック

WordPressプラグイン『WP-PageNavi』の出力方法

ページネーション（ページャー）を表示したい位置に、下記コードを追加するだけで出力できます。

1<?php wp_pagenavi(); ?>

えりー

簡単ですね！

プラグインをインストールする前に上記コードを入れてしまうとエラーになってしまうので、プラグインを先にインストールしましょう。

（応用）WordPressプラグイン『WP-PageNavi』をCSSでカスタマイズする方法

『WP-PageNavi』のデザインをCSSでカスタマイズしてみましょう。

今回は下記のようなデザインにしたいと思います。

出力側にidをつける

1<div id="pagenavi">
2  <?php wp_pagenavi(); ?>
3</div>

CSSでデザインするために、予め出力側に＜div＞を追加して「id=”pagenavi”」を付けておきます。

えりー

id名はわかりやすければ何でも構いません

CSS（SCSS）でデザインをカスタマイズ

CSSで記載する方法とSCSSで記載する方法の両方を記載しています。

どちらかをコピーしてお使いください。

えりー

色や空白の大きさなどは、サイトにあわせてカスタマイズしてお使いください

CSSで記載する場合

1#pagenavi {
2    margin-bottom: 100px;
3    text-align: center;
4    font-size: 18px;
5}
6
7/* 選択中のページ */
8#pagenavi .current {
9    background: #c15078;
10    border: 1px solid #c15078;
11    color: white;
12    padding: 7px 12px;
13    margin: 5px;
14}
15
16/* 選択していないページ */
17#pagenavi a {
18    background: white;
19    border: 1px solid #c3953f;
20    color: #c3953f;
21    padding: 7px 12px;
22    margin: 5px;
23}
24
25/* 選択していないページをマウスオンした時 */
26#pagenavi a:hover {
27    background: #c3953f;
28    color: white;
29    transition: .3s;
30}

SCSSで記載する場合

1#pagenavi {
2    margin-bottom: 100px;
3    text-align: center;
4    font-size: 18px;
5   // 選択中のページ
6    .current {
7        background: #c15078;
8        border: 1px solid #c15078;
9        color: white;
10        padding: 7px 12px;
11        margin: 5px;
12    }
13   // 選択していないページ
14    a {
15        background: white;
16        border: 1px solid #c3953f;
17        color: #c3953f;
18        padding: 7px 12px;
19        margin: 5px;
20       // 選択していないページをマウスオンした時
21        &:hover {
22            background: #c3953f;
23            color: white;
24            transition: .3s;
25        }
26    }
27}

上記CSSでコーディングすると、下図のようなデザインになります。

上記例では、フォントは下記のように設定しています。フォントもあわせたい場合は、下記をコピーしてお使いください。

1body {
2font-family: 'Playfair Display', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;
3}

フォント『Playfair』はGoogleフォントなので、HTMLの＜head＞内でGoogleフォントを読み込みます。

1<link rel="preconnect" href="https://fonts.googleapis.com">
2<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
3<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">