Выводим навигацию для одной записи в WordPress — урок 21
В этом уроке мы поговорим о том как делать навигацию между записями, если вы находитесь в записи (шаблон single.php).
Для начала откроем шаблон single.php и добавим в код шаблона, в нужное место код для навигации.
Код для вставки навигации в шаблон:
1 2 3 4 5 6 7 |
<div id="single-nav" class="clearfix"> <div class="prev"><?php next_post_link('%link', '<span>%title</span>', false); ?></div> <div class="next"><?php previous_post_link('%link', '<span>%title</span>', false); ?></div> <div class="prev-responsive"><?php next_post_link('%link', '<span>Previous</span>', false); ?></div> <div class="next-responsive"><?php previous_post_link('%link', '<span>Next</span>', false); ?></div> </div> <!-- /single-nav --> |
После добавления кода навигации нам необходимо сделать ее красивой и добавить стили в файл /wp-content/themes/my_theme_tmp/css/style.css.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
/* Next/Previous Navigation */ #single-nav{ font-size: 12px; height: 60px; line-height: 60px; background: #969696; } body #single-nav a{ display: block; height: 60px; line-height: 60px; padding: 0 25px; color: #fff; font-size: 14px; text-decoration: none; } #single-nav a:hover{ background: #737373; } #single-nav .next, #single-nav .prev, #single-nav .prev-responsive, #single-nav .next-responsive{ width: 50%; float: left; } #single-nav .next, #single-nav .next-responsive{ margin: 0; float: right; text-align: right; } #single-nav .prev a span, #single-nav .prev-responsive a span{ display: block; padding-left: 17px; background-image: url("../images/arrow-left.png"); background-position: left; background-repeat: no-repeat; } #single-nav .next a span, #single-nav .next-responsive a span{ display: block; padding-right: 17px; background-image: url("../images/arrow-right.png"); background-position: right; background-repeat: no-repeat; } .prev-responsive, .next-responsive{ display: none; } /* Next/Previous Navigation */ |
Для красивого вывода стрелок нам необходимо загрузить два изображения в папку /wp-content/themes/my_theme_tmp/images/… .
Изображения для навигации:
До стилизации навигации:
После стилизации навигации:
Вот и все дела, как мы видим, наша любимая система управления сайтом уже давно позаботилась о том, чтобы разработчикам не приходилось писать навигацию с названием предыдущей и следующей статьи с нуля.
Удачи в изучении и разработке удобных и красивых сайтов, а от меня как всегда исходники темы на текущий момент.
В следующем уроке разберем, как делать шаблоны для страниц и сформируем меню сайта.
/*
- Базовый курс по веб-дизайну;
- Верстка сайтов;
- Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
- Разработка сайтов на PHP.