Как добавить ссылки Следующий и Предыдущий?

Автор:
Nurlan Kemelbekov

Как добавить ссылки Следующий и Предыдущий на странице WordPress блога? Это всегда хорошо иметь хорошие навигационные ссылки на блоге. Одна такая практика….  добавить ссылки Далее и Назад  в конце поста. После прочтения статьи, читатели будут пытаться исследовать блог больше и в этот момент соответствующие навигации будут очень полезны.

Помимо похожих записей еще один простой, но мощный подход, который должен включать ссылки на «Назад» и «Вперед».  Если вы хотите добавить ссылки «Следующий» и «Предыдущий», следуйте согласно этой простой рекомендации, чтобы добавить их в свой блог.
Код, используемый для отображения ссылки Следующий и Предыдущий  можно найти на WordPress Кодекс, но здесь немного измененный и есть дополнение в CSS стили.
Если вы используете темы WordPress, как двадцать десять или двадцать одиннадцать, то выполните следующие действия.

  • Войти в панель WordPress и перейти к «Тема редактор».
  • Найти single.php файл и открыть его в редакторе Notepad++.
  • Добавьте код нижеследующий в конце ее и нажмите «Обновить».
<div id="prev-next">
<div>&larr; Previous Post
<?php previous_post_link('%link', '%title'); ?>
</div>
<div>Next Post &rarr;
<?php next_post_link('%link', '%title'); ?>
</div>
</div>

Вот и все, теперь  ссылки  следующий и предыдущий  будут отображаться.

Добавить CSS к следующий & предыдущий ссылки.

Вам нужно добавить некоторые стили к этим ссылкам, чтобы они были выровнены и, чтобы все это дело выглядело более привлекательным. Чтобы это сделать, добавьте следующий код в файл style.css.

/** CSS для Следующий & Предыдущий ссылки на одной странице */
#prev-next {  float: left; margin:10px;}
#prev-next .prev-link {float: left;width: 50%;text-align: left;}
#prev-next .prev-link a {float: left;text-align: left;}
#prev-next .next-link {float: right;width: 50%;text-align: right;}
#prev-next .next-link a {float: right;text-align: right;}
#prev-next a{text-decoration: underline; }
#prev-next a:hover { text-decoration: none; }

По умолчанию next_posts_link () и previous_posts_link () генерируются без пользовательского класса. Если он вам нужен для вашего CSS стиля, вот довольно простой способ добавить необходимый класс.

Вставьте следующий код в файл functions.php:

add_filter('next_posts_link_attributes', 'posts_link_attributes');
add_filter('previous_posts_link_attributes', 'posts_link_attributes');

function posts_link_attributes() {
return 'class="myclass"';
}

В самом начале своей деятельности по ведению блога я долго не мог понять, как добавить ссылки следующий и предыдущий и надеюсь, что вам понравится этот удивительный способ




Вам также может понравиться:


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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

* Copy This Password *

* Type Or Paste Password Here *

два × четыре =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!