wordpress(ワードプレス）でプラグインを使って簡単にわかりやすいページ送りを実装する！CSSでスタイルの調整まで【備忘録】

WordPress(ワードプレス)でプラグインを使って簡単にページャー(ページ送り)機能を実装する備忘録。

プラグインを使ってページャーを実装する場合、私はWP-PageNaviかWP Site Managerのどちらかを利用している。プラグインの更新頻度が高いWP-PageNaviの方がいいかもしれない。WP Site Managerはパンくずやサイトマップ表示、メタキーワード、description設定、キャッシュ機能などその名の通り総合的に管理できるプラグインです。その中にページナビ表示のモジュールも入っている為、使えそうだが、現状、半年以上更新されていない為、総合管理には少し重くなったり、他のプラグインと干渉したりするかもしれないが、All in One SEOを利用してた方が良いかもしれない。プラグインを多用するのは表示速度を遅くしたりSEO的にもよくないと思うが、All in One SEOは入れておいても良いと思う。

今回は多くで利用されているWP-PageNaviをインストールして簡単にページャー機能を実装する。

ワードプレス管理画面からWP-PageNaviを追加する

ワードプレス管理画面に入り、プラグイン → 新規追加 → 「WP-PageNavi」を検索し、「今すぐインストール」でインストール。インストールが完了したら「有効化」ボタンを押して有効にする。

ワードプレスのデフォルトテーマなどでは表示が少し味気ない…。
WP-PageNaviを利用して、独自のCSSを適用することでデフォルトテーマよりはわかりやすいページネーションを実装できる。

とりあえずこんな感じで表示します。

pagenavi-css.css を使用は【いいえ】にして独自スタイルを適用

WP-PageNaviの設定画面に入り、
【pagenavi-css.css を使用】項目は、「いいえ」のラジオボックスを選択し、スタイルはテーマのstyle.cssに記入する。そうすれば、プラグインを更新してもCSSが影響を受けることはありません。

上記、CSSの使用をいいえにするだけで、あとは基本デフォルトの設定で構わないと思いますが、ご自身の好きな設定で適宜変更してください。

アーカイブページなどのテンプレのページャーを表記したいところに下記コードを挿入するだけ。

<?php wp_pagenavi(); ?>

デフォルトテーマ(twentynineteen)だと、archive.phpなどに以下の関数が入っているので、

// Previous/next page navigation.
twentynineteen_the_posts_navigation();

この当たりに挿入すると良いと思う。

先ほどのページネーションの例だとCSSは以下のようになる。
適宜変更で！
設定はほぼデフォルトです。

.wp-pagenavi{
	width:100%;
	text-align:center;
	margin:0.5em 0;
	overflow: auto;
	padding: 0.5em;
	box-sizing: border-box;
}
.wp-pagenavi a{
	padding:0.2em 0.4em;
	color:#FFFFFF;
	text-decoration:none;
	background:rgba(255,133,170,1.00);
	margin-left:0.3em;
}
.wp-pagenavi span.current{
	padding:0.2em 0.4em;
	color:rgba(255,133,170,1.00);
	background:#FFFFFF;
	border:1px solid rgba(255,133,170,1.00);
	margin-left:0.3em;
	display: inline-block;
	box-sizing: border-box;
}
.wp-pagenavi a.nextpostslink{
	padding:0.2em 0.4em;
}
.wp-pagenavi span.extend{
	margin-left: 0.3em;
}

プラグインをそこまで多用しない場合は、WP-PageNaviを利用すれば簡単にページャーを設定できる。
他の機能をプラグインで充実させている場合には、ページャーくらいはプラグイン無しで実装した方が良いので、次回別記事で備忘録としてアップする。