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

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

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

Вставлять в шаблон вывода записи (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;
}

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