Wyświetlanie nawigacji dla pojedynczego postu w WordPress – lekcja 21

przez Nikołajenko Maksym · Opublikowany Styczeń 6, 2015 · Zaktualizowano Sierpień 7, 2018

W tym samouczku porozmawiamy o tym, jak poruszać się między postami., jeśli jesteś zarejestrowany (szablon pojedynczy.php).

Najpierw otwórz szablon single.php i dodaj go do kodu szablonu, we właściwe miejsce kod nawigacyjny.

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

Kod do wstawiania nawigacji do szablonu:

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

Po dodaniu kodu nawigacyjnego musimy go upiększyć i dodać style do pliku /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 */

Aby pięknie wyświetlić strzałki, musimy wgrać dwa obrazy do folderu /wp-content/themes/my_theme_tmp/images/… .

Obrazy do nawigacji:

Przed stylizacją nawigacji:

następna nawigacja privios bez stylu - kursy wordpressa

Po stylizacji nawigacji:

Wordpress następna nawigacja ze stylem - kursy wordpressa

To wszystko., jak widzimy, nasz ulubiony system zarządzania treścią już dawno się tym zajął, dzięki czemu programiści nie muszą od nowa pisać nawigacji z nazwą poprzedniego i następnego artykułu.

Powodzenia w nauce i rozwijaniu przyjaznych dla użytkownika i pięknych stron, a ode mnie jak zawsze kod źródłowy tematu na ten moment.

W następnej lekcji przyjrzymy się, jak tworzyć szablony stron i tworzyć menu witryny.

Usługi korepetycji online. Lista kursów, które prowadzę

Podstawowy kurs projektowania stron internetowych;
Układ stron;
Ogólny kurs CMS WordPress oraz kontynuacja kursu dotyczącego tworzenia szablonów;
Tworzenie stron internetowych w PHP.

Czytaj więcej na stronie Nauczyciel WordPressa