WordPressプラグイン『WP-PageNavi』設定方法&CSS【コピペOK】
![](https://kusou-design.com/wp-content/uploads/2023/05/pagenavi_mv.jpg)
- WordPressテーマにページネーション(ページャー)を追加したい方
- 『WP-PageNavi』の設定方法について知りたい方
- 自作(オリジナル)WordPressテーマを作成したいとお考えの方
- WordPressを利用している or 利用予定 の方
- Webデザイナーを目指している方
今回は、WordPressに簡単にページネーション(ページャー)が設置できるプラグイン『WP-PageNavi』について解説します。
具体的には、『WP-PageNavi』の
- インストール方法
- 設定方法
- 出力方法
- CSSでカスタマイズする方法
などについて解説していきます。
![えりー](https://kusou-design.com/wp-content/uploads/2023/02/ellie.jpg)
コピペできるCSSのコードもご用意しました!
WordPressプラグイン『WP-PageNavi』のインストール方法
まずは、『WP-PageNavi』をインストールしましょう。
1.[プラグイン]-[新規追加]をクリック
![](https://kusou-design.com/wp-content/uploads/2023/05/04-3.jpg)
2.「WP pagenavi」と検索し、[今すぐインストール]をクリックし、[有効化]
![](https://kusou-design.com/wp-content/uploads/2023/05/05-2.jpg)
![](https://kusou-design.com/wp-content/uploads/2023/05/06-1.jpg)
WordPressプラグイン『WP-PageNavi』の設定方法
『WP-PageNavi』はインストールするだけでも使えますが、より細かく表示をカスタマイズしたい場合は、[設定]-[PageNavi]から設定します。
![](https://kusou-design.com/wp-content/uploads/2023/05/07.jpg)
どのようにカスタマイズするかはお好みになるので、ここからは参考ですが、私の場合は下記のように設定することが多いです。(あくまで一例です)
1.「総ページ数用テキスト」を空欄にする
![](https://kusou-design.com/wp-content/uploads/2023/05/08.png)
![えりー](https://kusou-design.com/wp-content/uploads/2023/02/ellie.jpg)
総ページ数はあまり必要性がないかなと思い、取ってしまうことが多いです
2.「pagenavi-css.css を使用」を[いいえ]にする
![](https://kusou-design.com/wp-content/uploads/2023/05/09.jpg)
CSSで自由にカスタマイズしたい場合は、「いいえ」にします。
![えりー](https://kusou-design.com/wp-content/uploads/2023/02/ellie.jpg)
CSSでカスタマイズしたほうが、サイトにあわせて細かく調整できるのでオススメです!
3.[変更を保存]をクリック
![](https://kusou-design.com/wp-content/uploads/2023/05/10.png)
WordPressプラグイン『WP-PageNavi』の出力方法
ページネーション(ページャー)を表示したい位置に、下記コードを追加するだけで出力できます。
1<?php wp_pagenavi(); ?>
![えりー](https://kusou-design.com/wp-content/uploads/2023/02/ellie.jpg)
簡単ですね!
(応用)WordPressプラグイン『WP-PageNavi』をCSSでカスタマイズする方法
『WP-PageNavi』のデザインをCSSでカスタマイズしてみましょう。
今回は下記のようなデザインにしたいと思います。
![](https://kusou-design.com/wp-content/uploads/2023/05/01-6.jpg)
出力側にidをつける
1<div id="pagenavi">
2 <?php wp_pagenavi(); ?>
3</div>
CSSでデザインするために、予め出力側に<div>を追加して「id=”pagenavi”」を付けておきます。
![えりー](https://kusou-design.com/wp-content/uploads/2023/02/ellie.jpg)
id名はわかりやすければ何でも構いません
CSS(SCSS)でデザインをカスタマイズ
CSSで記載する方法とSCSSで記載する方法の両方を記載しています。
どちらかをコピーしてお使いください。
![えりー](https://kusou-design.com/wp-content/uploads/2023/02/ellie.jpg)
色や空白の大きさなどは、サイトにあわせてカスタマイズしてお使いください
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でコーディングすると、下図のようなデザインになります。
![](https://kusou-design.com/wp-content/uploads/2023/05/01-6.jpg)
最後に:WordPressについてのご相談もお気軽にどうぞ!
空創デザインオフィスでは、ホームページ制作・リニューアル、WordPress導入、自分でホームページを作りたい方へのサポートなども承っております。
下記ボタンよりお気軽にお問い合わせください!(お見積りは無料です)
自作WordPressテーマ作成については、下記記事もおすすめです。ぜひ、あわせてご覧ください!
![【5行だけ・コピペOK】自作WordPressテーマstyle.cssおすすめ記載方法](https://kusou-design.com/wp-content/uploads/2023/04/stylecss_mv-320x180.jpg)
![【たった1行追加でOK】自作WordPressテーマheader・footer.phpを作ろう](https://kusou-design.com/wp-content/uploads/2023/05/hdft_mv-320x180.jpg)
![自作WordPressテーマ「screenshot.png」を作ろう(適正サイズも解説)](https://kusou-design.com/wp-content/uploads/2023/05/sc_mv-320x180.jpg)
![【2STEP】固定ページテンプレートファイル作成方法(自作WordPressテーマ)](https://kusou-design.com/wp-content/uploads/2023/05/temp_mv-320x180.jpg)