BLOG

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

kanri
本記事はこんな方にオススメです
  • WordPressテーマにページネーション(ページャー)を追加したい方
  • 『WP-PageNavi』の設定方法について知りたい方
  • 自作(オリジナル)WordPressテーマを作成したいとお考えの方
  • WordPressを利用している or 利用予定 の方
  • Webデザイナーを目指している方

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

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

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

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

えりー
えりー

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

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">

最後に:WordPressについてのご相談もお気軽にどうぞ!

空創デザインオフィスでは、ホームページ制作・リニューアル、WordPress導入、自分でホームページを作りたい方へのサポートなども承っております。

下記ボタンよりお気軽にお問い合わせください!(お見積りは無料です)

自作WordPressテーマ作成については、下記記事もおすすめです。ぜひ、あわせてご覧ください!

あわせて読みたい
【5行だけ・コピペOK】自作WordPressテーマstyle.cssおすすめ記載方法
【5行だけ・コピペOK】自作WordPressテーマstyle.cssおすすめ記載方法
あわせて読みたい
【たった1行追加でOK】自作WordPressテーマheader・footer.phpを作ろう
【たった1行追加でOK】自作WordPressテーマheader・footer.phpを作ろう
あわせて読みたい
自作WordPressテーマ「screenshot.png」を作ろう(適正サイズも解説)
自作WordPressテーマ「screenshot.png」を作ろう(適正サイズも解説)
あわせて読みたい
【2STEP】固定ページテンプレートファイル作成方法(自作WordPressテーマ)
【2STEP】固定ページテンプレートファイル作成方法(自作WordPressテーマ)
ABOUT ME
えりー
えりー
Web・グラフィックデザイナー / ブロガー
2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web制作のことや、就職・転職に役立つ情報を発信しています。
記事URLをコピーしました