PHP

コードによる記述

php

<div class="nav-links">
	<div class="single-nav-links">
		<div class="nav-next right">
			<?php next_post_link( '%link', '次のページ <i class="fa fa-angle-right" aria-hidden="true"></i>', true ); ?>
		</div>
		<div class="nav-previous left">
			<?php previous_post_link( '%link', '<i class="fa fa-angle-left" aria-hidden="true"></i> 前のページ', true ); ?>
		</div>
	</div><!-- single-nav-links -->
</div><!-- nav-links -->

css

#sidebar .nav-links a { /* 投稿下のナビゲーションリンクの設定 */
	color: #333333;
}

#sidebar .nav-links a:hover { /* 投稿下のナビゲーションリンクのホバーの設定 */
	color: #24ccc6;
	border: 1px solid #24ccc6;
}

.right {
	float: right;
}

.left {
	float: left;
}

プラグインによる設置

1.WP-PageNaviをインストール

※設置する際に設定は必要ない。

2.ナビを設置したい箇所に下記のコードを記入する。

<? php wp_pagenavi(); ?>

3.スタイルなどの細かい設定をする。

管理画面の「設定」→「PageNavi」で表示設定をする。