wordpressの前後の記事へのリンクの表示がおかしいです。

wordpressレッスンブック5.X対応版という書籍を勉強中でして、記事ページの中に前後の記事ページへのリンクをを表示させるというものがあるのですが、記事名のリンクだけではなく、記事の本文まで全て表示されてしまい困っています。
該当の練習ページ:https://waterfurora.com/category/shop/

前後の記事リンクを実現するために、書籍では、<?php the_post_navigation(); ?>という関数を使っているのですが、この通りしても私のページだとうまくいってません。

該当のindex.phpのソースコードが下記になります。

<body <?php body_class(); ?>>
	<?php wp_body_open(); ?>
	
	<?php if(have_posts()): while(have_posts()): the_post(); ?>
	
	<article <?php post_class('mycontainer'); ?>>
		
		
		<div class="myposthead">
			<?php the_category(); ?>
			<h1><?php the_title(); ?></h1>
		
			<time datetime="<?php echo esc_attr(get_the_date(DATE_W3C)); ?>">
				<?php echo esc_html(get_the_date());?>
			</time>
		</div>
		
		
		

	<?php the_content(); ?>
	
	<?php the_post_navigation(); ?>	
	
	</article>

	<?php endwhile; endif; ?>
	
	<?php wp_footer(); ?>
</body>