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

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

Код для вставлення навігації у шаблон:

<ділення id="однонава" клас="клірфікс"> 
											<клас div="Попередня"><?php next_post_link('%link', '<проліт>%title</проліт>', false); ?></див.>
											<клас div="наступний"><?php previous_post_link('%link', '<проліт>%title</проліт>', false); ?></див.>
											<клас div="Попередній адаптивний"><?php next_post_link('%link', '<проліт>Попередній</проліт>', false); ?></див.>
											<клас div="Наступний адаптивний"><?php previous_post_link('%link', '<проліт>Наступний</проліт>', false); ?></див.>
										</див.>
										<!-- /однонавна -->

Після додавання коду навігації нам необхідно зробити її красивою та додати стилі до файлу /wp-content/themes/my_theme_tmp/css/style.css.

/* Наступна/попередня навігація */
#однонава{
	розмір шрифту: 12px;
	height: 60px;
	висота лінії: 60px;
	тло: #969696; 
}
тіло #single-нава а{
	Відображення: блокувати; 
	height: 60px;
	висота лінії: 60px;
	Заповнення: 0 25px;
	колір: #ФФФ;
	розмір шрифту: 14px;
	текстове оформлення: Ніхто;
}
#однонавна а:Наведіть{
	тло: #737373;
}
#однонавний .наступний,
#однонавний .prev,
#однонавна .prev-responsive,
#однонавна .наступна-чуйна{
	width: 50%;
	плавати: Ліворуч;
}
#однонавний .наступний,
#однонавна .наступна-чуйна{
	margin: 0;
	плавати: Праворуч;
	вирівнювання тексту: Праворуч;
}

#однонавний .prev a span,
#одно-nav .prev-responsive a span{
	Відображення: блокувати;
	відступ-зліва: 17px;
	фон-зображення: url("../зображення/стрілка вліво.png");
	фонове положення: Ліворуч;
	фон-повторення: без повторення;
}
#однонавний .наступний проліт,
#однонавний .наступний-чуйний проліт{
	Відображення: блокувати;
	відступлення праворуч: 17px;
	фон-зображення: url("../зображення/стрілка вправо.png");
	фонове положення: Праворуч;
	фон-повторення: без повторення;
}

.Попередній адаптивний,
.Наступний адаптивний{ Відображення: Ніхто; }
/* Наступна/попередня навігація */

Для гарного виведення стрілок нам необхідно завантажити два зображення до папки /wp-content/themes/my_theme_tmp/images/… .

Зображення для навігації:

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

Після стилізації навігації:

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

Удачі у вивченні та розробці зручних та красивих сайтів, а від мене як завжди вихідники теми на даний момент.

У наступному уроці розберемо, як робити шаблони для сторінок та сформуємо меню сайту.