Bestseller, Nawigacja, Premium

Jak dodać nawigację następny/poprzedni wpis po lewej i prawej stronie witryny?

  • Poziom trudności:

Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:

10 PLN

Stosunkowo niewiele motywów posiada domyślnie pozostawiony skrypt odpowiadający za wyświetlanie poprzednich i następnych wpisów. A szkoda, bo jest to narzędzie ułatwiające czytanie Twojego bloga/serwisu od deski do deski. W domyślnych motywu tego typu odnośniki znajdziesz pod wpisem i nie wyglądają one zbyt estetycznie. Ja preferuję nieco inne rozwiązanie.

Metoda, którą chciałbym przedstawić sprawia, że po lewej i prawej stronie wpisu pojawiają się strzałki pozwalające na łatwą nawigację po poprzednich i następnych wpisach. Po najechaniu na strzałkę pojawia się tytuł, a po kliknięciu następuje automatyczne przekierowanie na wcześniejszy lub poprzedni wpis. Strzałki są widoczne tylko na stronie pojedynczego wpisu. Dokładnie tak działają:

strzalki-prawa-lewa

Aby dodać taki element u siebie na stronie wejdź do Wygląd -> Edytor i rozpocznij edycję pliku header.php albo innego w którym się znajduje się element <head>. W niektórych motywach nie ma dostępu do tych plików poprzez panel administracyjny WordPressa i trzeba się posiłkować klientem FTP.

[FMP]

W <head> dopisz:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">

Dzięki temu Twoja strona będzie od tej pory (po użyciu specjalnego znacznika) mogła wyświetlać ponad 500 dodatkowych ikon. Font Awesome w tym przypadku używany jest do wyświetlenia strzałki w lewo i prawo. Pełną listę ikon, z których od tej pory będziesz mógł skorzystać znajdziesz tutaj.

Po dodaniu pierwszej linii  znajdź znacznik <body> i wprowadź po nim kod odpowiadający za wyświetlanie strzałek na stronie pojedynczego wpisu:

<?php
if ( is_single() ) {
?>

<div class="next-prev-hop">
<?php
$next_post = get_next_post();
if ( is_a( $next_post , 'WP_Post' ) ) { ?>
  <a href="<?php echo get_permalink( $next_post->ID ); ?>" class="nav-post nav-post__prev is-visible"><span class="nav-post__title"><?php echo get_the_title( $next_post->ID ); ?><i class="fa fa-angle-right"></i></span><i class="fa fa-angle-right"></i></a>
<?php } ?>

<?php
$prev_post = get_previous_post();
if ( is_a( $prev_post , 'WP_Post' ) ) { ?>
  <a href="<?php echo get_permalink( $prev_post->ID ); ?>" class="nav-post nav-post__next is-visible"><span class="nav-post__title"><i class="fa fa-angle-left"></i> <?php echo get_the_title( $prev_post->ID ); ?></span><i class="fa fa-angle-left"></i></a>
<?php } ?>
</div>
<?php
} else {
}
?>

W moim motywie znacznik <body> znajdował się również w pliku header.php ale u Ciebie może to wyglądać inaczej, dlatego jeśli jest taka potrzeba skorzystaj z klienta FTP.

Teraz została już ostatnia modyfikacja kodu.

W CSS w pliku style.css wklej fragment odpowiadający za umieszczenie strzałek z lewej i prawej strony.

.nav-post {
    position: fixed;
    top: 50%;
    margin-top: -28px;
    font-size: 40px;
    color: #fff;
    z-index: 1000;
}

.nav-post__next {
    left: 0;
}

.nav-post__prev {
    right: 0;
}

.next-prev-hop .fa-angle-left {
    padding: 0 20px!important;
}

.next-prev-hop .fa-angle-right {
    padding: 0 20px!important;
}

span.nav-post__title .fa-angle-left {
	padding: 0 20px!important;
	color: #ffffff!important;
	margin-right: 10px;
}

span.nav-post__title .fa-angle-right {
	padding: 0 20px!important;
	color: #ffffff!important;
	margin-left: 10px;
}

.nav-post.is-visible {
	color: #100F0F;
}

.nav-post__next {
	left: 0;
}

.nav-post__prev {
	right: 0;
}

.nav-post__title {
	position: absolute;
	padding: 0px 20px;
	text-transform: uppercase;
	font-size: 10px !important;
	line-height: 56px;
	color: #fff;	
	white-space: nowrap;
	background-color: #100F0F;
	font-family: Verdana, sans-serif;
	transition: all .3s linear;
}

.nav-post__title .nav-post__icon {
	font-size: 13px;
	position: relative;
	top: 2px;
}

.nav-post__prev .nav-post__title {
	right: -9999px;
}

.nav-post__prev .nav-post__title .nav-post__icon {
	margin-left: 10px
}

.nav-post__next .nav-post__title {
	left: -9999px;
}

.nav-post__next .nav-post__title .nav-post__icon {
	margin-right: 10px}

.nav-post__prev:hover .nav-post__title {
	right: 0;
}

.nav-post__next:hover .nav-post__title {
	left: 0;
}

.nav-post__prev .nav-post__title {
	right: -9999px;
}

.nav-post__prev .nav-post__title .nav-post__icon {
	margin-left: 10px
}

.nav-post__next .nav-post__title {
	left: -9999px;
}

.nav-post__next .nav-post__title .nav-post__icon {
	margin-right: 10px}

.nav-post__prev:hover .nav-post__title {
	right: 0;
}

.nav-post__next:hover .nav-post__title {
	left: 0;
}

.nav-post.is-visible {
    color: #100F0F;
}

Powyższy kod zawiera także informację o kolorze pod tytułami, który pojawia się po najechaniu na strzałki. Można ten fragment kodu zmodyfikować w linii 58 wpisując zamiast #100F0F; kod koloru. Możesz go pobrać np. ze strony Color Picker lub z zaawansowanego programu graficznego.

Strzałki bez tytułów

Z powodu długich tytułów lub względów przejrzystości możesz nie chcieć wyświetlać tytułów wpisów po najechaniu kursorem myszy. Wtedy wystarczy że wykonasz prostą modyfikację kodu wklejonego tuż po otwarciu znacznika <body>. Podmień kod dotychczas wklejony na:

<?php
if ( is_single() ) {
?>

<div class="next-prev-hop">
<?php
$next_post = get_next_post();
if ( is_a( $next_post , 'WP_Post' ) ) { ?>
  <a href="<?php echo get_permalink( $next_post->ID ); ?>" class="nav-post nav-post__prev is-visible"><span class="nav-post__title"><i class="fa fa-angle-right"></i></span><i class="fa fa-angle-right"></i></a>
<?php } ?>

<?php
$prev_post = get_previous_post();
if ( is_a( $prev_post , 'WP_Post' ) ) { ?>
  <a href="<?php echo get_permalink( $prev_post->ID ); ?>" class="nav-post nav-post__next is-visible"><span class="nav-post__title"><i class="fa fa-angle-left"></i></span><i class="fa fa-angle-left"></i></a>
<?php } ?>
</div>
<?php
} else {
}
?>

[/FMP]

UDOSTĘPNIJ

Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:

10 PLN