Всем привет!
Удивительно, но многие ищут информацию о том, как найти и удалить в шаблоне ссылки «Следующая» и «Предыдущая» запись. Наверное, это по причине того, что эти ссылки не подходят к общему виду или в них уже нет надобности.
Я же сегодня, наоборот, расскажу, как вывести ссылки «Следующая» и «Предыдущая» запись в 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; }
Вот такой результат получился у меня:
Можно такой ход сделать и с картинками миниатюр:
<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%;}
Вот такой результат должен поучиться у вас:
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330348 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274701 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222536 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187748 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
Один ответ на комментарий - Как вывести ссылки «Следующая» и «Предыдущая» запись в WordPress
Добавить комментарий
Метки: wordpress, без плагинов
Здравствуйте! Не получилось вывести картинки. Первая часть без картинок успешно установилась и работает (см. сайт), а с картинками путаница произошла. Код для картинок ”
и т.д.” тупо добавлять в файл single.php к ранее установленному, а рекомендованный ниже код “#post-nav{display:inline-block;}
#post-nav .nav-box{background:#eee;padding:10px;}и т.д.” в файл «style.css»? Или второй вариант чисто самостоятельный? Тогда не будет записей Предыдущая запись и Стедующая запись. Пробовал различные варианты. Несколько раз ломал сайт, а потом восстанавливал. Запутался короче…Помогите, плиз.