Виводимо навігацію для одного запису в WordPress – урок 21

за Ніколаєнко Максим · Опубліковано Січень 6, 2015 · Оновлено Серпень 7, 2018

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

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

wordpress next privios navigation - курсы по woordpress

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

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

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

Після додавання коду навігації нам необхідно зробити її красивою та додати стилі до файлу /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 */

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

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

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

наступна навігація без стилю - курси wordpress

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

стильна навігація wordpress next privios - курси wordpress

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

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

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