Как вывести ссылки Следующая / Предыдущая запись в WordPress

Віталий

10 років ago

Доброго времени суток 🙂
В сегодняшней статье речь пойдет о том - как вывести ссылки Следующая Предыдущая запись в WordPress без плагина - с миниатюрами и без. В стандартных темах от WordPress такие ссылки есть после записи. Многие даже пытаются их удалить, потому что они не подходят для поставленной задачи. Я же хочу показать способ, который как раз добавит такую навигацию между записями. У такой функции есть свои плюсы.
Во-первых это создает перелинковку между внутренними страницами сайта.
Во-вторых создаст удобство для пользователя, одновременно заставит его обратить на какую-то запись внимание. На своем сайте я тоже использую данную функцию - первый вариант без миниатюр.

Давайте приступим к выполнению задачи.

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%;}

Тут тоже нет ничего сложного, если нужно, можете добавить своих стилей и стилизовать свой блок навигации так, как Вам это нужно.

В готовом результате будет выглядеть примерно так:

Теперь Вам решать какой из способов Вам подходит больше. Лично я, как и писал выше использую первый способ по старинке, без миниатюр, но многие склоняются ко второму варианту.
Очень надеюсь, что данная статья Вам поможет.
На этом все, спасибо за внимание. 🙂

Exit mobile version