В этом уроке мы поговорим о том как делать навигацию между записями, если вы находитесь в записи (шаблон single.php).

Для начала откроем шаблон single.php и добавим в код шаблона, в нужное место код для навигации.

Код для вставки навигации в шаблон:

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

/* 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/… .

Изображения для навигации:

До стилизации навигации:

После стилизации навигации:

Вот и все дела, как мы видим, наша любимая система управления сайтом уже давно позаботилась о том, чтобы разработчикам не приходилось писать навигацию с названием предыдущей и следующей статьи с нуля.

Удачи в изучении и разработке удобных и красивых сайтов, а от меня как всегда исходники темы на текущий момент.

В следующем уроке разберем, как делать шаблоны для страниц и сформируем меню сайта.