ページネーションを簡単に設置!WP-PageNaviの使い方【WordPressプラグイン】
今回は、簡単にページネーションを設置することができる「WP-PageNavi」というWordPressのプラグインをご紹介します。

このようなページネーションを作りながら、「WP-PageNavi」の使い方について解説していきます。
WP-PageNaviの使い方
まずは、WP-PageNaviをインストールしましょう。
WordPressの管理画面から検索してインストールするか、公式サイトからダウンロードしてインストールしてください。
WP-PageNaviの設定
インストールできたら、管理画面左メニューの「設定」から「PageNavi」を選択します。
お好みでページネーションの設定をしてください。
「pagenavi-css.css を使用」の項目で「はい」を選択すると、デフォルトのページネーションのデザインを使用する事ができます。
今回は下記のように設定しました。

デザインは自分でカスタマイズしたかったので、「pagenavi-css.css を使用」の項目で「いいえ」を選択しています。
WP-PageNaviをサイトに反映させる
ページネーションを設置したい場所に以下のコードを挿入します。
「外観」→「テーマの編集」でテーマファイルを編集するか、FTPでテーマファイルを編集してください。
<?php wp_pagenavi(); ?>
ページネーションのデザインを整える
「pagenavi-css.css を使用」の項目で「はい」を選択してる場合はスキップしてください。
今回このようなデザインのページネーションを作成しました。
cssは以下の通りです。
※あくまで一例です。サイトに合わせて余白やカラーを調整してください。
.wp-pagenavi {
text-align: center;
margin-top: 50px;
margin-bottom: 175px;
}
.wp-pagenavi a {
border: 1px solid rgb(179, 179, 179);
}
.wp-pagenavi .pages {
display: none;
}
.wp-pagenavi a,
.wp-pagenavi span {
text-decoration: none;
padding: 11px 15px;
margin: 2px;
}
.wp-pagenavi a:hover,
.wp-pagenavi span.current {
border-color: #000;
}
.wp-pagenavi span.current {
background-color: rgb(108, 101, 90);
font-weight: bold;
color: #fff;
}
.wp-pagenavi .previouspostslink {
position: relative;
top: -12px;
float: left;
border: none;
margin-left: 80px;
}
.wp-pagenavi .previouspostslink::before {
content: "";
width: 6px;
height: 6px;
border: 0px;
border-top: solid 2px #000;
border-right: solid 2px #000;
-ms-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
position: absolute;
top: 50%;
left: -10px;
margin-top: -4px;
}
.wp-pagenavi .nextpostslink {
position: relative;
top: -12px;
float: right;
border: none;
margin-right: 80px;
}
.wp-pagenavi .nextpostslink::before {
content: "";
width: 6px;
height: 6px;
border: 0px;
border-top: solid 2px #000;
border-right: solid 2px #000;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
right: -10px;
margin-top: -4px;
}
@media screen and (max-width: 991px) {
.wp-pagenavi .previouspostslink {
display: none;
}
.wp-pagenavi .nextpostslink {
display: none;
}
}
@media screen and (max-width: 767px) {
.wp-pagenavi {
margin: 7vw 0 13vw !important;
}
.wp-pagenavi a,
.wp-pagenavi span {
padding: 2vw 2vw !important;
}
}
おわりに
WP-PageNaviの使い方をご紹介しました。
WP-PageNaviを使うことで、一瞬でページネーションを実装できるので是非お試しください。