# SnowMonkey：投稿記事ページの「前の記事へ」「次の記事へ」をシンプルにカスタマイズ

◆変更内容
・SnowMonkeyの投稿ページの前後ページ用リンクはアイキャッチ画像付きでかなりくどいため、シンプルなものに変更
・テキストも「古い投稿」「新しい投稿」から、よくある「前の記事へ」「次の記事へ」に変更
・アイキャッチがない記事が多い場合に便利

◆変更ファイル（子テーマ使用）
snow-monkey-child-master\template-parts\content\prev-next-nav.php

---

◆デフォルト

<br>

カスタマイズ後

◆functions.php

//記事のPrev/Next文言書き換え
add_filter( 'gettext', function( $translation, $text, $domain ) {
	if ( 'snow-monkey' === $domain && 'Old post' === $text ) {
		return '前の投稿';
	}
	elseif ( 'snow-monkey' === $domain && 'New post' === $text ) {
		return '次の投稿';
	}

	return $translation;
}, 10, 3 );

◆prev-next-nav.php

<?php
/**
 * @package snow-monkey
 * @author inc2734
 * @license GPL-2.0+
 * @version 11.7.0
 *
 * renamed: template-parts/prev-next-nav.php
 */

use Framework\Helper;
$args = wp_parse_args(
	// phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
	$args,
	// phpcs:enable
	[
		'_in_same_term'   => false,
		'_excluded_terms' => [],
		'_taxonomy'       => 'category',
		'_next_label'     => __( 'Old post', 'snow-monkey' ),
		'_prev_label'     => __( 'New post', 'snow-monkey' ),
	]
);
?>
<?php
<div class="c-prev-next-nav">
	<?php foreach ( [ 'next', 'prev' ] as $key ) : ?>
		<div class="c-prev-next-nav__item c-prev-next-nav__item--<?php echo esc_attr( $key ); ?>">
			<?php
			if ( 'next' === $key ) {
				$_post = get_previous_post( $args['_in_same_term'], $args['_excluded_terms'], $args['_taxonomy'] );
			} elseif ( 'prev' === $key ) {
				$_post = get_next_post( $args['_in_same_term'], $args['_excluded_terms'], $args['_taxonomy'] );
			}
			?>

			<?php if ( ! empty( $_post->ID ) ) : ?>

				<div class="c-prev-next-nav__item-label">
					<?php if ( 'next' === $key ) : ?>					
            
						<?php previous_post_link('%link','<i class="fas fa-angle-left" aria-hidden="true"></i> 前の記事へ'); ?>
					<?php else : ?>
						<?php next_post_link('%link','次の記事へ <i class="fas fa-angle-right" aria-hidden="true"></i>'); ?>
					<?php endif; ?>
				</div>

				
			<?php endif; ?>

		</div>
	<?php endforeach; ?>
</div>
<?php

<br>

◆CSS

//「前の記事へ」「次の記事へ」シンプルVer
.c-prev-next-nav__item--next{
  position: relative;
}

.c-prev-next-nav__item--next .c-prev-next-nav__item-label{
  position: absolute;
  right: 0;
}


//「前の記事へ」「次の記事へ」スマホ時シンプルVer
@media (max-width: 639px){
  .c-prev-next-nav__item--next .c-prev-next-nav__item-label{
    position: static;
  }
  
  .c-prev-next-nav {
      display: flex !important;
      justify-content: space-around;
      flex-direction: row;
      flex-wrap: nowrap;
  }

  .c-prev-next-nav__item:not(:first-child) {
    margin-top: 0 !important;
  }
}