Главная » Wordpress » Как вывести ссылки «Следующая» и «Предыдущая» запись в WordPress

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

2016-09-28 / Вр:14:19 / просмотров: 8372

Всем привет!
Удивительно, но многие ищут информацию о том, как найти и удалить в шаблоне ссылки «Следующая» и «Предыдущая» запись. Наверное, это по причине того, что эти ссылки не подходят к общему виду или в них уже нет надобности.
Я же сегодня, наоборот, расскажу, как вывести ссылки «Следующая» и «Предыдущая» запись в WordPress и научу придавать этим ссылкам красивый вид.
На одном из своих блогов я установил эти ссылки и хочу рассказать, как я это сделал.
Ссылки «Следующая» и «Предыдущая» в записях нужны для разбивки страниц и удобства перемещения по ним. На WordPress есть стандартный способ вывода таких ссылок (Следующая запись, Предыдущая запись).
Откройте файл «single.php» вашей темы и вставьте в нужное место вот такой код:

<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>

Схема вставки кода:

//чтобы вывести над текстом записи, ставим код сюда
<?php the_content(); ?>
// чтобы вывести под текстом записи, ставим код сюда

После этого все заработает, но вид будет не очень. Открываем файл «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;}

Как бы все готово, но можно еще приукрасить. Добавьте в файл «style.css» еще код:

.nav-previous a {
background-color: #008000;
padding: 3px;
border-radius: 5px;
display: block;
color: #fff;
font-size: 12px;
line-height: 17px;
margin-top: 0px !important;
}

.nav-next a {
background-color: #4c9bfe;
padding: 3px;
border-radius: 5px;
display: block;
color: #fff;
font-size: 12px;
line-height: 17px;
margin-top: 0px !important;
}

.nav-previous a:hover, .nav-next a:hover {
background-color: #cacaca;
}

Вот такой результат получился у меня:

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

Можно такой ход сделать и с картинками миниатюр:

<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>

Строка № 5 - (100,100) это размер миниатюры.

Теперь CSS стилей немного, и все готово:

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

Вот такой результат должен поучиться у вас:

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