シングルページの前後の投稿へのリンクを変更し、タイトルを表示

2024.08.23

BLOGでは、シングルページの最後に、他の記事を読んでもらうため、前後の記事へのリンクを設定しています。今回は、シングルページの前後の投稿へのリンクを変更し、タイトルを表示する方法を紹介します。

コード

PHPの表示したい場所に、下記コードを入力します。

<div class="more-news">
	<?php
		$next_post = get_next_post();
		$prev_post = get_previous_post();
		if ( $next_post ):
	?>
        <div class="prev">
           <a class="another-link" href="<?php echo get_permalink( $next_post->ID ); ?>"><?php next_post_link('%link', ' %title'); ?></a>
        </div>
		<?php
			endif;
			if ( $prev_post ):
		?>
		<div class="next">
            <a class="another-link" href="<?php echo get_permalink( $prev_post->ID ); ?>"><?php previous_post_link('%link', ' %title '); ?> </a>
         </div>			
	<?php endif; ?>		
</div>

CSSでスタイルを整えます。

#pg-blogDetail .more-news {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 1em;
	align-items: center;
	text-align: left;
}

#pg-blogDetail .more-news .prev  {
	position: relative;
	flex: 1;
	padding-left: 2em;
}

#pg-blogDetail .more-news .prev .another-link::before {
	content:  '≪';	
	position: absolute;
	left: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	top: 50%;
}

#pg-blogDetail .more-news .next {
	padding-right: 2em;
	flex: 1;
	position: relative;
}

#pg-blogDetail .more-news .next {
	display: grid;
	justify-content: flex-end;
}

#pg-blogDetail .more-news .next .another-link::after {
	content:  '≫';
	position: absolute;
	right: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	top: 50%;
}