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:
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ą:
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.
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 { } ?>
Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:
Działa świetnie, dziękuję. Czy jest możliwość wyłączenia wyświetlania tytułu posty? Tak aby pozostała tylko nawigacja?
Dzięki za inspirację. W uzupełnieniu do tego wpisu w najbliższych dniach przygotuję dodatkowy wariant z nawigacją bez tytułów.
Przyda się ten dodatkowy wariant. Tymczasem uprościłem sprawę ustawiając w linii 61: transition: all 600s linear;
Właśnie dodałem instrukcję jak usunąć tytuły.
Cześć, zrobiłam krok po kroku, jak opisywałeś, ale nie wyświetlają mi się strzałki, dlaczego? Wpisy mam na jednej ze stron, a nie na stronie głównej, może to ma znaczenie?
Pozycja wpisów raczej nie ma tu wpływu. W źródle strony nie widzę kodu odpowiadającego za wyświetlanie strzałek. Kod CSS mówiący o tym jak mają wyglądać faktycznie jest, ale drugiego elementu dzięki któremu strzałki się pojawiają – nie ma. Sprawdź wszystko jeszcze raz i daj znać jak to zrobisz – zerknę i może tym razem się uda.