Создаем навигацию в записях – ссылки следующая/предыдущая

Без плагина WordSmall

Статья посвящена добавлению ссылок “предыдущие” и “следующие” для перемещения с одной статьи на другую. Замечательно ведь, когда имеются красивые и удобные навигационные кнопки. После прочтения отдельной статьи, читатели вашего собственного блога скорее всего захотят ознакомиться с чем-то ещё, именно в этот момент им будут очень необходимы данные функции. А также можно вывести похожие записи для большей информации читателям.

Помимо навигации “предыдущие” и “следующие” есть еще одна возможность, это добавление самих названий материалов рядом с кнопками “предыдущие” и “следующие”. Данное дополнение также пользуется спросом под названием Post Navigation Links, поэтому рекомендуется ознакомиться с установкой этой функции к себе на сайт.

Установка.

Откройте файл single.php и в любом удобном месте для вас поместите следующею функцию:

<div id="singnex">
<div class="lion">&larr; Предыдущий пост
<?php previous_post_link('%link', '%title'); ?>
</div>
<div class="linx">Следующий пост &rarr;
<?php next_post_link('%link', '%title'); ?>
</div>
</div>

Самым итоговым и достаточно важным шагом является добавлений стилей CSS для наших навигационных ссылок. Откройте файл style.css и добавьте стили.

/** Стили навигации singl */
#singnex {float: left; margin:10px;}
#singnex .lion {float: left;width: 50%;text-align: left;}
#singnex .lion a {float: left;text-align: left;}
#singnex .linx {float: right;width: 50%;text-align: right;}
#singnex .linx a {float: right;text-align: right;}
#singnex a{text-decoration: underline; }
#singnex a:hover { text-decoration: none; }

Результат.

Создаем навигацию в записях – ссылки следующая/предыдущая

Это стандартный код из кодекса WordPress, больше информации можно найти на официальном сайте.

codex.wordpress.org/Next_and_Previous_Links

— Не забывайте делиться с друзьями в социальных сетях: —

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 2
  • Ева

    Здравствуйте. Все работает, только смущает один момент. Если название заголовка не достаточно длинное, то получается в одну строку, то есть примерно так: Следующая запись>ваап ор ворв. Как сделать, чтобы название поста всегда было под надписью «Следующая запись»?

    • WordSmall

      Ева, здравствуйте! Самое простое решение, поставьте просто тег переноса строки. Пример:

      Предыдущий пост < br>

Добавить комментарий
bold quote code