Предыдущие / следующие записи

Добавляем навигацию по сайту в виде предыдущих / следующих записей. Данные записи находятся в текущей категории и поэтому также могут быть интересны посетителю. Так почему бы не показать их?

Простое решение

Вставлять в шаблон вывода записи (sinle.php)

Самый простой вывод в виде заголовков с ссылками,  предыдущая / следующая записи из этой же категории

<?php echo get_adjacent_post_link( '%link', '< %title', 1 ); ?>
<?php echo get_adjacent_post_link( '%link', '%title >', 1, '', false ); ?>

Навигация с миниатюрами

Вариант второй с миниатюрами, принцип действия как у предыдущего: из этой же категории

<?php $previousPost = get_adjacent_post(true);
$nextPost = get_adjacent_post(true, "", false); ?>
 
<?php if($previousPost) : ?>
 
<a href="<?php echo get_permalink($previousPost->ID)?>">

<?php echo $previousPost->post_title; ?><?php echo get_the_post_thumbnail($previousPost->ID, array(150,150, true) ); ?>
 
</a>
 
<?php endif; ?>
 
 
 
<?php if($nextPost) : ?>
 
<a href="<?php echo get_permalink($nextPost->ID)?>">
 
<?php echo $nextPost->post_title; ?><?php echo get_the_post_thumbnail($nextPost->ID, array(150,150, true) ); ?>
 
</a>
 
<?php endif; ?>

По дате поста

Третий вариант (с миниатюрами) предыдущая / следующая записи по дате поста.

<?php $nextPost = get_next_post();
if($nextPost) { ?>
<div class="nav-box next" style="float:left; width:150px; padding-bottom:5px; padding-top:5px; text-align:center;">
<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(150,150) );?>
<?php next_post_link('%link',"$nextthumbnail %title"); ?>
</div>
<?php } ?> 

 
<?php $prevPost = get_previous_post();
if($prevPost) {?>
<div class="nav-box previous" style="float:right; width:150px; padding-bottom:5px; padding-top:5px; text-align:center;">
<?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(150,150) ); ?>
<?php previous_post_link('%link',"$prevthumbnail %title"); ?>
</div>
<?php } ?> 

CSS (как вариант)

.nav-box.next {
position: absolute;
left: 0;
top: 200px;
}

.nav-box.previous {
position: absolute;
right: 0;
top: 200px;
}

Записи по кругу + верстка и стили

Чтобы предыдущая и следующая записи выводились по кругу, т.е. когда долистали до последней выводится также и первая, используем такой вывод.

<div class="postsnav">
	
<?php $categories = get_the_category(); $cat_id = $categories[0]->term_id; ?>

<?php if( get_adjacent_post(true, '', true) ) { 
$previousPost = get_adjacent_post(true); ?>
	<div class="nav nav-left"><a href="<?php echo get_permalink($previousPost->ID); ?>">
		<div class="image"><?php if( get_the_post_thumbnail($previousPost->ID ) ) { echo get_the_post_thumbnail($previousPost->ID, array(50,50, true) ); }
			else { echo '<img src="'.get_template_directory_uri().'/images/img-default-min.jpg" width="50" height="50" />'; } ?></div> 
		<div class="text"><?php echo $previousPost->post_title; ?>11</div>
	</a></div>
<?php } else { 
	$first = new WP_Query('posts_per_page=1&order=DESC&cat='.$cat_id); $first->the_post(); ?>
	<div class="nav nav-left"><a href="<?php echo get_permalink(); ?>">
		<div class="image"><?php if( get_the_post_thumbnail() ) { echo get_the_post_thumbnail(get_the_ID(), array(50,50, true) ); }
			else { echo '<img src="'.get_template_directory_uri().'/images/img-default-min.jpg" width="50" height="50" />'; } ?></div> 
		<div class="text"><?php echo get_the_title(); ?></div>
	</a></div>
	<?php wp_reset_query();
}; 

if( get_adjacent_post(true, '', false) ) { 
$nextPost = get_adjacent_post(true, "", false);	?>
	<div class="nav nav-right"><a href="<?php echo get_permalink($nextPost->ID)?>">
		<div class="image"><?php if( get_the_post_thumbnail($nextPost->ID ) ) { echo get_the_post_thumbnail($nextPost->ID, array(50,50, true) ); }
			else { echo '<img src="'.get_template_directory_uri().'/images/img-default-min.jpg" width="50" height="50" />'; } ?></div>
		<div class="text"><?php echo $nextPost->post_title; ?></div>
	</a></div>
<?php } else { 
	$last = new WP_Query('posts_per_page=1&order=ASC&cat='.$cat_id); $last->the_post(); ?>
	<div class="nav nav-right"><a href="<?php echo get_permalink(); ?>">
		<div class="image"><?php if( get_the_post_thumbnail() ) { echo get_the_post_thumbnail( get_the_ID(), array(50,50, true) ); }
			else { echo '<img src="'.get_template_directory_uri().'/images/img-default-min.jpg" width="50" height="50" />'; } ?></div>
		<div class="text"><?php echo get_the_title(); ?></div>
	</a></div>
	<?php wp_reset_query();
}; ?>

</div>

Запрос категории и true в функции get_adjacent_post нужны для того чтобы круг был в рамках одной категории, если этого не требуется, можно и без них.

Стили:

.postsnav {display: flex; flex-wrap: wrap; margin: 45px -15px 0; justify-content: center;}	
	
.postsnav .nav {width: 50%; padding: 0 15px;}
	
.postsnav .nav a {
	background: #fff;
	border: 2px solid #eee;
	border-radius: 10px;
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-decoration: none;
	height: 100%;
}
.postsnav .nav a:hover {border-color: #50aaff;}
	
.postsnav .nav a .image {width: 15%; text-align: center; order: 10;}
.postsnav .nav a .image img {border-radius: 25px; display: block;}
	
.postsnav .nav a .text {width: 85%; text-align: center; order: 10;}
.postsnav .nav.nav-left a .text {padding-left: 15px;}	
.postsnav .nav.nav-right a .text {order: 9; padding-right: 15px;}	

@media screen and (max-device-width: 800px) { 
	.postsnav .nav {width: 100%; margin-bottom: 15px;} 
	.postsnav .nav:last-child {margin-bottom: 0;} 
	.postsnav .nav a .text {order: 10; text-align: left;}
	.postsnav .nav.nav-right a .text {order: 10; padding-left: 15px; padding-right: 0;}
}

Поделиться в соц. сетях: