カテゴリー内だけで前の記事／次の記事

WordPressでは投稿ページで『前の記事へ／次の記事へ』というリンクが有りますが、カテゴリーに関係無く表示されます。
『前の記事へ／次の記事へ』を同じカテゴリー内に限定する方法です。
Simplicity2では子テーマの pager-post-navi.php を少しいじるだけです。
親テーマからコピーしてきたものが下記です。

<!-- post navigation -->
<div class="navigation">
  <?php
  $prev_post = get_previous_post();
  if( $prev_post ): ?>
    <div class="prev"><?php previous_post_link('%link', '<span class="fa fa-arrow-left fa-2x pull-left"></span>'.$prev_post->post_title); ?></div>
  <?php
  endif;

  $next_post = get_next_post();
  if( $next_post ): ?>
    <div class="next"><?php next_post_link('%link', '<span class="fa fa-arrow-right fa-2x pull-left"></span>'.$next_post->post_title); ?></div>
  <?php
  endif;
  ?>
</div>
<!-- /post navigation -->

これに下記のようにピンクマーカー部分を追加するだけです。

<!-- post navigation -->
<div class="navigation">
  <?php
  $prev_post = get_previous_post();
  if( $prev_post ): ?>
    <div class="prev"><?php previous_post_link('%link', '<span class="fa fa-arrow-left fa-2x pull-left"></span>'.$prev_post->post_title, TRUE); ?></div>
  <?php
  endif;

  $next_post = get_next_post();
  if( $next_post ): ?>
    <div class="next"><?php next_post_link('%link', '<span class="fa fa-arrow-right fa-2x pull-left"></span>'.$next_post->post_title, TRUE); ?></div>
  <?php
  endif;
  ?>
</div>
<!-- /post navigation -->

・・・だけです。なんて偉そうに言いましたが、確かに同じカテゴリーで前後へのリンクは付くのですが、時々リンク文字列だけが違うカテゴリーの記事名になってしまいます。

なので上の記述の黄色マーカー部分を下のように変更して使うことにしました。

<!-- post navigation -->
<div class="navigation">
  <?php
  $prev_post = get_previous_post();
  if( $prev_post ): ?>
    <div class="prev"><?php previous_post_link('%link', '<span class="fa fa-arrow-left fa-2x pull-left"></span>'.PREVIOUS, true); ?></div>
  <?php
  endif;

  $next_post = get_next_post();
  if( $next_post ): ?>
    <div class="next"><?php next_post_link('%link', '<span class="fa fa-arrow-right fa-2x pull-left"></span>'.NEXT, true); ?></div>
  <?php
  endif;
  ?>
</div>
<!-- /post navigation -->

単純に PREVIOUS（前へ）、NEXT（次へ）だけにしました。

完成したのが下図です。

でも、やっぱり２行になってしまうのはなんとなく嫌で、、、。
修正したのが下です。

わたしがGush2時代から採用している方法のアレンジです。

「style.css」に下記を追加します。

/*--------------------------------------
シンプルな前へ次へ 
--------------------------------------*/
div.nav-below{margin: 40px 0 0;overflow:auto;
		padding:5px 10px 5px 20px;
		background: #fff;
		border: 1px solid #cccccc;
}
div.navigation{overflow:auto;}
	div.navigation a{margin-bottom:10px}

	.nav-previous a, .nav-next a,
	div.navigation .alignleft a, div.navigation .alignright a{
		font-size:120%;
		text-decoration:none;
		}
			
	.nav-previous a, div.navigation .alignleft a{
		float:left;
		padding:2px 10px 2px 20px;
		}
	.nav-next a, div.navigation .alignright a{
		float:right;
		text-align:right;
		padding:2px 20px 2px 10px;
		}

「pager-post-navi.php」を以下に書き換えます。

<!-- post navigation -->
<!--前へ次へ-->
<div class="nav-below">
<span class="nav-previous"><?php previous_post_link('%link', '<span class="fa fa-arrow-left fa-2xpull-left"></span> PREV', TRUE); ?></span>
<span class="nav-next"><?php next_post_link('%link', 'NEXT <span class="fa fa-arrow-right fa -2xpull-right"></span>', TRUE); ?></span>
</div><!-- /.nav-below -->
<!--//前へ次へ-->
<!-- /post navigation -->

どちらの方法でもお好きなものをどうぞ。