1-й способ. Следующая / Предыдущая запись без миниатюр
Первое что нужно сделать - это найти и открыть Файл single.php. Далее внутри цикла вывода записи
Примерный вид цикла вывода записи
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> //сюда код, чтобы вывести над текстом записи <?php the_content(); ?> //сюда код, чтобы вывести под текстом записи <?php endwhile; else: ?> <?php endif; ?>
вставить код приведенный ниже.
<nav id="nav-single">
<span class="nav-previous"><?php previous_post_link( 'Предыдущая запись <br> %link'); ?></span>
<span class="nav-next"><?php next_post_link ('Следующая запись <br> %link'); ?></span>
</nav>
По сути это уже рабочий вариант и ссылки появятся на странице, вот только они будут сбиты под одну сторону и их вид оставляет желать лучшего. Чтобы привести все в порядок надо задать хотя бы минимальные стили. Для этого открываем файл стилей Вашей темы style.css и вставляем в него следующие строки:
#nav-single{width:100%;font-weight:bold;color:#333;font-size:15px;line-height:20px;display:inline-block;}
#nav-single a{font-weight:normal;font-size:13px;margin-top:15px;}
#nav-single .nav-next{width:45%;float:right;text-align:right;}
#nav-single .nav-previous{width:45%;float:left;}
Теперь у Вас получился 100% готовый вариант. Конечно же можете менять стили и настроить все под себя и внешний вид темы.
2-й способ. Следующая / Предыдущая запись с миниатюрами
Второй способ немного отличается, но тоже не сложный. По сути просто другой код, но вставлять его нужно в те же места, что и первый, так что расписывать я не стану по новой, что куда, просто дам Вам разметку и стили.
Для начала код с разметкой.
<div id="post-nav" class="navigation">
<?php $prevPost = get_previous_post(true);
if($prevPost) {?>
<div class="nav-box previous">
<?php $prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );?>
<?php previous_post_link('%link',"$prevthumbnail <p>%title</p>", TRUE); ?>
</div>
<?php } $nextPost = get_next_post(true);
if($nextPost) { ?>
<div class="nav-box next">
<?php $nextthumbnail = get_the_post_thumbnail($nextPost->ID, array(100,100) ); ?>
<?php next_post_link('%link',"$nextthumbnail <p>%title</p>", TRUE); ?>
</div>
<?php } ?>
</div>
По коду видно, что у нас один родительский блок post-nav и два дочерних nav-box, с предыдущей и следующей ссылкой, внутри которых вызываются функции WordPress.
Первая функция в nav-box это вызов миниатюры
$prevthumbnail = get_the_post_thumbnail($prevPost->ID, array(100,100) );
где 100,100 это размер - ширина и высота, так что можете настроить, если надо.
Вторая функция в nav-box это текстовая ссылка
next_post_link('%link',"$nextthumbnail <p>%title</p>", TRUE);
Далее вставляем стили
#post-nav{display:inline-block;}
#post-nav .nav-box{background:#eee;padding:10px;}
#post-nav img{float:left;margin:0 10px 0 0;}
#post-nav p{margin:0 10px;font-size:12px;}
#post-nav .previous{float:left;width:45%;}
#post-nav .next{float:right;width:45%;}
Тут тоже нет ничего сложного, если нужно, можете добавить своих стилей и стилизовать свой блок навигации так, как Вам это нужно.
В готовом результате будет выглядеть примерно так:
Теперь Вам решать какой из способов Вам подходит больше. Лично я, как и писал выше использую первый способ по старинке, без миниатюр, но многие склоняются ко второму варианту.
Очень надеюсь, что данная статья Вам поможет.
На этом все, спасибо за внимание. 🙂
