Czy kiedykolwiek czytałeś wpis na blogu i chciałeś w łatwy sposób przejść do następnego?
W tym miejscu przydają się odnośniki następny/poprzedni. Te proste odnośniki nawigacyjne utrzymują zaangażowanie czytelników, prowadząc ich do większej ilości treści na twojej witrynie bez konieczności ich wyszukiwania.
Domyślnie WordPress zawiera odnośniki do następnego i poprzedniego wpisu, ale w zależności od twojego motywu mogą one nie być widoczne lub stylizowane tak, jak chcesz.
Nie musisz się jednak martwić, ponieważ mamy wszystko pod kontrolą! Po przetestowaniu różnych metod, znaleźliśmy kilka niezawodnych sposobów na dodanie i dostosowanie tych odnośników.
W tym przewodniku pokażemy, jak łatwo dodać następne/poprzednie odnośniki w WordPressie, niezależnie od tego, czy chcesz to zrobić za pomocą wtyczki, czy odrobiny własnego kodu.
Czym są odnośniki Następny/Poprzedni w WordPress?
Następne i poprzednie odnośniki to dynamiczne linki nawigacyjne wbudowane w motywy WordPress. Pozwalają one użytkownikom łatwo przechodzić między wpisami, pomagając im odkrywać więcej treści bez dodatkowych kliknięć.
Domyślnie wpisy na blogu WordPress są wyświetlane w odwrotnej kolejności chronologicznej (najpierw nowsze wpisy).
Oznacza to, że następny wpis to ten, który został opublikowany po aktualnym wpisie, który użytkownik zobaczył, a poprzedni wpis to ten, który został opublikowany przed aktualnym wpisem.
Odnośniki następny/poprzedni pozwalają użytkownikom łatwo poruszać się po poszczególnych artykułach i stronach archiwum bloga. Pomaga to również uzyskać więcej odsłon na twoim blogu.
Większość motywów WordPress posiada wbudowane odnośniki do następnych i poprzednich wpisów, które są automatycznie wyświetlane na dole każdego wpisu. Jednak niektóre motywy nie wyświetlają ich lub możesz dostosować miejsce i sposób ich wyświetlania na twojej witrynie internetowej WordPress.
W związku z tym przyjrzyjmy się, jak łatwo dodać następne i poprzednie odnośniki w WordPress. Możesz skorzystać z poniższych odnośników, aby przejść do wybranej przez ciebie sekcji:
- Adding Next / Previous Links to WordPress Using a Plugin (Easiest Method)
- Adding Next / Previous Links Using Custom Code
- Styling Next / Previous Links in WordPress
- Adding Next / Previous Links for Posts with Thumbnails
- Adding Next / Previous Links to WordPress Pages
- Bonus: Remove Next and Previous Links in WordPress
Dodawanie następnych / poprzednich odnośników do WordPressa za pomocą wtyczki (najprostsza metoda)
Ta metoda jest łatwa i zalecana dla początkujących, którzy nie czują się komfortowo dodając kod do swoich witryn internetowych.
Najpierw należy zainstalować i włączyć wtyczkę CBX Next Previous Article. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu przejdź na stronę Ustawienia ” CBX Następny Poprzedni. Z tego miejsca możesz wybrać, gdzie chcesz wyświetlać następne i poprzednie odnośniki na twojej witrynie internetowej.
Wtyczka umożliwia wyświetlanie strzałek odnośników Następny i Poprzedni na pojedynczych wpisach, stronach, stronach archiwum i nie tylko.
Aby to zrobić, przewiń w dół do sekcji “Ustawienia wyświetlania archiwum” i wybierz “Tak” dla obszarów, w których chcesz wyświetlać te odnośniki.
Aby zwiększyć trafność twoich następnych i poprzednich odnośników, możesz również wybrać wyświetlanie następnych i poprzednich wpisów z tej samej kategorii lub tagu.
Teraz przewiń w dół do sekcji “Ustawienia wyświetlania pojedynczego artykułu”. Zobaczysz, że wpisy i strony są już wybrane jako domyślne typy treści, w których będą pojawiać się twoje strzałki.
Jeśli chcesz wyświetlić tylko jedną strzałkę dla poprzedniego lub następnego wpisu, wybierz opcję “Poprzedni” lub “Następny” w ustawieniach “Pokaż wpisy”.
Jeśli jednak chcesz wyświetlać obie strzałki, wybierz opcję “Tak” w ustawieniu “Pokaż obie strzałki”.
Darmowa wersja wtyczki umożliwia jedynie wyświetlanie strzałek dla następnego i poprzedniego artykułu. Możesz uaktualnić do wersji pro, aby odblokować inne opcje wyświetlania, takie jak wyskakujące okienko.
Następnie możesz wybrać styl strzałki z menu rozwijanego w sekcji “Ustawienia stylu strzałki”.
Gdy to zrobisz, zobaczysz podgląd strzałek poniżej. Następnie kliknij przycisk “Zapisz ustawienia”.
Jeśli zdecydujesz się wyświetlić następne/poprzednie wpisy z tej samej taksonomii, musisz przełączyć się na kartę Nawiguj według taksonomii.
W tym miejscu wybierz taksonomię, której chcesz użyć do wybrania następnego i poprzedniego odnośnika. Następnie kliknij przycisk “Zapisz ustawienia”.
Opcjonalnie wtyczka umożliwia również śledzenie kliknięć za pomocą Google Analytics. Aby skorzystać z tej funkcji, musisz najpierw zainstalować Google Analytics w WordPress.
Następnie należy przejść do karty Google Analytics w ustawieniach wtyczki i włączyć opcje śledzenia kliknięć.
Następnie możesz pozostawić resztę ustawień bez zmian lub skonfigurować je zgodnie z twoimi upodobaniami. Po zakończeniu wystarczy kliknąć przycisk “Zapisz ustawienia”, aby zapisać twoje zmiany.
Możesz teraz przejść na twoją witrynę internetową WordPress, aby zobaczyć następne/poprzednie odnośniki w działaniu.
Ta metoda jest łatwiejsza, ale nie zapewnia dużej elastyczności. Na przykład darmowa wersja wtyczki nie wyświetla tytułu następnego lub poprzedniego wpisu.
Dodawanie odnośników Następny/Poprzedni za pomocą własnego kodu
Jeśli szukasz bardziej elastycznego i konfigurowalnego sposobu dodawania odnośników nawigacyjnych, ta metoda jest dla Ciebie. Aby dodać odnośniki następny/poprzedni, musisz edytować pliki twojego motywu WordPress.
Może to być bardzo ryzykowne, ponieważ najmniejszy błąd może sprawić, że twoja witryna będzie niedostępna.
Tutaj właśnie wkracza WPCode. Jest to najlepsza wtyczka do fragmentów kodu WordPress, ponieważ pozwala bezpiecznie dodawać własny kod bez ryzyka zepsucia twojej witryny internetowej.
Więcej szczegółów można znaleźć w naszej recenzji WPCode.
Najpierw należy zainstalować i włączyć wtyczkę WPCode. Aby uzyskać szczegółowe informacje, zapoznaj się z naszym poradnikiem na temat instalacji wtyczki WordPress.
Uwaga: WPCode ma darmowy plan. Uaktualnienie do wersji pro daje jednak dostęp do biblioteki fragmentów kodu w chmurze, zaawansowanej logiki warunkowej i nie tylko.
Po włączaniu przejdź na stronę Fragmenty kodu ” + Dodaj fragment z kokpitu WordPress. Tutaj kliknij przycisk “+ Add Custom Snippet” pod opcją “Add Your Custom Code (New Snippet)”.
Spowoduje to przekierowanie do strony “Utwórz własny fragment kodu”, gdzie możesz zacząć od dodania tytułu dla twojego kodu.
Następnie wybierz “Fragment kodu PHP” jako rodzaj kodu z rozwijanego menu po prawej stronie.
Następnie dodaj następujący własny kod w polu “Podgląd kodu”:
1 | <?php the_post_navigation(); ?> |
Następnie przewiń w dół do sekcji “Wstawianie” i wybierz tryb “Automatyczne wstawianie”.
Twój kod zostanie automatycznie wykonany na Twojej witrynie po włączaniu.
Następnie otwórz menu rozwijane “Położenie” i przejdź do karty “Poszczególne strony”.
Następnie wybierz “Wstaw po wpisie” jako lokalizację twojego kodu. Twoje odnośniki do poprzedniego/kolejnego wpisu będą teraz wyświetlane na końcu każdego wpisu.
Jeśli jednak masz na myśli inne stanowisko, możesz wybrać tę opcję.
Na koniec przewiń z powrotem do góry i przełącz przełącznik “Nieaktywne” na “Aktywne”.
Następnie kliknij przycisk “Zapisz fragment kodu”, aby zapisać twoje zmiany.
Możesz teraz przejść na twoją witrynę WordPress, aby zobaczyć odnośniki Następny / Poprzedni w działaniu.
W tym miejscu można powiadomić, że dodany własny kod wyświetla tylko odnośniki do następnych i poprzednich wpisów z tytułem wpisu jako tekstem kotwicy.
Nie podkreśla, że są to odnośniki do następnego i poprzedniego artykułu.
Jeśli chcesz to zmienić, możesz zamiast tego dodać następujący własny kod do pola “Podgląd kodu”:
1 2 3 4 5 | <?php the_post_navigation( array( 'prev_text' => __( 'Previous Article: %title' ), 'next_text' => __( 'Next Article: %title' ), ) );?> |
Po zapisaniu zmian w WPCode wystarczy przejść na twoją witrynę internetową.
Oto jak to wyglądało na naszej witrynie testowej:
Można również używać znaków specjalnych i strzałek wraz z tytułami następnych i poprzednich wpisów.
Wystarczy zastąpić kod następującym:
1 2 3 4 5 | <?php the_post_navigation( array( 'prev_text' => __( '← %title' ), 'next_text' => __( '%title →' ), ) );?> |
Oto jak ten kod wyglądał na naszej testowej witrynie internetowej:
Załóżmy, że odnośniki do następnego i poprzedniego artykułu mają być bardziej adekwatne do artykułu, który użytkownik aktualnie zobaczył.
Można to zrobić, pokazując następne i poprzednie odnośniki z tej samej kategorii lub tagów:
1 2 3 4 5 6 7 | <?php the_post_navigation( array( 'prev_text' => __( '← %title' ), 'next_text' => __( '%title →' ), 'in_same_term' => true, 'taxonomy' => __( 'category' ), ) );?> |
Ten kod mówi WordPressowi, aby wyświetlał następne i poprzednie wpisy w tej samej kategorii. W razie potrzeby można zmienić parametr taksonomii na tagi lub inną dostosowaną taksonomię.
Stylizacja odnośników Następny/Poprzedni w WordPress
Teraz, gdy nauczyliśmy się dodawać odnośniki Następny/Poprzedni w WordPressie, przyjrzyjmy się, jak je odpowiednio stylizować.
Domyślnie WordPress automatycznie dodaje kilka domyślnych klas CSS do odnośników nawigacji we wpisach. Możesz użyć tych klas CSS w WPCode, aby nadać styl tym odnośnikom.
Najpierw przejdź do strony Fragmenty kodu ” Dodaj fragment z panelu bocznego administratora WordPress. Następnie kliknij przycisk “+ Add Custom Snippet” pod opcją “Add Your Custom Code (New Snippet)”.
Gdy znajdziesz się na stronie “Utwórz własny fragment kodu”, dodaj tytuł dla twojego kodu.
Następnie wybierz “Fragment kodu CSS” jako rodzaj kodu z rozwijanego menu.
Następnie możesz dodać następujący kod CSS do twojego pola “Podgląd kodu”.
Ten podstawowy CSS po prostu wyświetla następny i poprzedni odnośnik obok siebie, ale po różnych stronach tej samej linii:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .nav-links,.posts-navigation .nav-links,.post-navigation .nav-links { display: flex;}.nav-previous,.posts-navigation .nav-previous,.post-navigation .nav-previous { flex: 1 0 50%;}.nav-next,.posts-navigation .nav-next,.post-navigation .nav-next { text-align: end; flex: 1 0 50%;} |
Możesz również wyróżnić swoje odnośniki nawigacyjne, dodając kolor tła, efekt najechania kursorem i nie tylko.
Oto przykładowy kod CSS, który można wykorzystać jako punkt wyjścia:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .post-navigation {background-color:#f3f9ff;padding:0px;}.nav-previous, .nav-next{padding:10px;font-weight:bold}.nav-previous:hover,.nav-next:hover {background-color:#0170b9;}.nav-previous:hover a:link ,.nav-next:hover a:link {color:#fff;} |
Teraz przewiń w dół do sekcji “Wstawianie” i wybierz tryb “Automatyczne wstawianie”.
Twój dostosowany kod zostanie automatycznie wykonany po włączaniu.
Przełącz przełącznik “Nieaktywny” na “Aktywny”.
Następnie kliknij przycisk “Zapisz fragment kodu”, aby zapisać twoje ustawienia.
Teraz przejdź na swoją witrynę WordPress, aby zobaczyć stylizowane odnośniki dla twoich wpisów.
Zauważysz, że tekst odnośnika ma teraz kolor tła i efekt najechania kursorem, dzięki czemu następny i poprzedni odnośnik są bardziej widoczne.
Dodawanie odnośników Następny/Poprzedni dla wpisów z miniaturkami
Jeśli chcesz, aby twoje następne/poprzednie odnośniki były bardziej powiadomione, możesz zaprezentować miniaturki wpisów wraz z odnośnikami. Obrazki to najprostszy sposób na przyciągnięcie uwagi użytkowników i sprawienie, by odnośniki te były bardziej angażujące.
Aby to zrobić, możesz dodać własny kod do pliku functions.php, ale pamiętaj, że najmniejszy błąd może zepsuć twoją witrynę internetową. Dlatego zamiast tego zalecamy użycie WPCode.
Po włączeniu wtyczki przejdź do strony Code Snippets ” +Add Snippet i kliknij przycisk “+ Add Custom Snippet” pod opcją “Add Your Custom Code (New Snippet)”.
Gdy zostaniesz przeniesiony na stronę “Utwórz własny fragment kodu”, musisz dodać tytuł dla twojego kodu.
Następnie wybierz “Fragment kodu PHP” jako rodzaj kodu z rozwijanego menu po prawej stronie.
Następnie dodaj następujący własny kod w polu “Podgląd kodu”:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | function wpb_posts_nav(){ $next_post = get_next_post(); $prev_post = get_previous_post(); if ( $next_post || $prev_post ) : ?> <div class="wpb-posts-nav"> <div> <?php if ( ! empty( $prev_post ) ) : ?> <a href="<?php echo get_permalink( $prev_post ); ?>"> <div> <div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev"> <?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?> </div> </div> <div> <strong> <svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg> <?php _e( 'Previous article', 'textdomain' ) ?> </strong> <h4><?php echo get_the_title( $prev_post ); ?></h4> </div> </a> <?php endif; ?> </div> <div> <?php if ( ! empty( $next_post ) ) : ?> <a href="<?php echo get_permalink( $next_post ); ?>"> <div> <strong> <?php _e( 'Next article', 'textdomain' ) ?> <svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg> </strong> <h4><?php echo get_the_title( $next_post ); ?></h4> </div> <div> <div class="wpb-posts-nav__thumbnail wpb-posts-nav__next"> <?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?> </div> </div> </a> <?php endif; ?> </div> </div> <!-- .wpb-posts-nav --> <?php endif;} |
Ten kod po prostu tworzy funkcję, która wyświetla następne i poprzednie wpisy z wyróżniającymi się obrazkami lub miniaturkami wpisów.
Po wpisz fragment kodu, możesz przełączyć przełącznik na “Aktywny” i kliknąć przycisk “Zapisz fragment kodu”.
Następnie musisz wrócić do strony Code Snippets ” + Add Snippet i kliknąć przycisk “Use Snippet” pod opcją “Add Your Custom Code”.
Po otwarciu strony “Utwórz własny fragment kodu” skopiuj poniższy kod i wklej go w polu “Podgląd kodu”:
1 | <?php wpb_posts_nav(); ?> |
Ten kod decyduje o miejscu wyświetlania odnośników.
Upewnij się również, że wybrałeś “Fragment kodu PHP” z listy rozwijanej “Rodzaj kodu”.
Następnie przewiń w dół do sekcji “Wstaw” i wybierz tryb “Auto Insert” w celu automatycznego wykonania kodu.
Możesz również rozwinąć sekcję “Lokalizacja” i przejść do karty “Specyficzne dla strony”. W tym miejscu wybierz opcję “Wstaw po wpisie”, aby miniaturki pojawiały się prawidłowo obok odnośników.
Na koniec możesz przełączyć przełącznik na “Włączony” i kliknąć przycisk “Zapisz fragment kodu”.
Teraz użytkownik może przejść na twoją witrynę internetową, aby zobaczyć odnośniki w działaniu.
Teraz możesz powiadomić, że te odnośniki nie wyglądają zbyt czysto.
Można to zmienić, dodając niestandardowy CSS za pomocą WPCode, aby je stylizować.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | .wpb-posts-nav { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 50px; align-items: center; max-width: 1200px; margin: 100px auto;} .wpb-posts-nav a { display: grid; grid-gap: 20px; align-items: center;} .wpb-posts-nav h4,.wpb-posts-nav strong { margin: 0;} .wpb-posts-nav a svg { display: inline-block; margin: 0; vertical-align: middle;} .wpb-posts-nav > div:nth-child(1) a { grid-template-columns: 100px 1fr; text-align: left;} .wpb-posts-nav > div:nth-child(2) a { grid-template-columns: 1fr 100px; text-align: right;} .wpb-posts-nav__thumbnail { display: block; margin: 0;} .wpb-posts-nav__thumbnail img { border-radius: 10px;} |
Możesz teraz zapisać zmiany i przejść na twoją witrynę internetową, aby zobaczyć następne i poprzednie odnośniki z miniaturkami.
Oto jak to wyglądało na naszej witrynie testowej:
Więcej szczegółów można znaleźć w naszym przewodniku na temat dodawania miniaturek do odnośników do poprzednich i następnych wpisów w WordPress.
Dodawanie odnośników Następny/Poprzedni do stron WordPressa
Zazwyczaj odnośniki nawigacyjne do wpisów na blogu są używane w WordPressie. Dzieje się tak, ponieważ te elementy są publikowane w odwrotnej kolejności chronologicznej.
Z drugiej strony, strony WordPress nie są zazwyczaj publikowane w porządku chronologicznym. Więcej szczegółów można znaleźć w naszym przewodniku na temat różnicy między wpisami a stronami w WordPress.
Jednak niektórzy użytkownicy mogą chcieć wyświetlać nawigację strony, aby pomóc odwiedzającym łatwo znaleźć następną stronę. Dobrą wiadomością jest to, że kod, którego używaliśmy wcześniej z WPCode, wyświetla poprzednie i następne odnośniki dla stron.
Jeśli chcesz wyświetlać te odnośniki zarówno na stronach, jak i we wpisach, nie będziesz musiał wprowadzać żadnych dodatkowych zmian.
Jeśli jednak chcesz wyświetlać tylko poprzednie/następne odnośniki dla stron, przejdź do strony Fragmenty kodu ” + Dodaj fragment kodu .
Tutaj należy wybrać opcję “Add Your Custom Code (New Snippet)”.
Gdy znajdziesz się na stronie “Utwórz własny fragment kodu”, dodaj tytuł dla twojego fragmentu.
Następnie wybierz “Fragment kodu PHP” jako rodzaj kodu z rozwijanego menu.
Następnie dodaj następujący własny kod w polu “Podgląd kodu”.
Jest to ten sam kod, którego można użyć do dodania poprzednich/kolejnych odnośników dla wpisów:
1 2 3 4 5 | <?php the_post_navigation( array( 'prev_text' => __( '← %title' ), 'next_text' => __( '%title →' ), ) );?> |
Następnie należy przewinąć w dół do sekcji “Wstaw” i wybrać tryb “Auto Insert” w celu automatycznego wykonania kodu.
Możesz również skonfigurować położenie twoich odnośników z rozwijanego menu “Położenie”. Na przykład, jeśli wybierzesz “Wstaw po wpisie”, twoje odnośniki pojawią się na końcu każdej strony.
Jeśli masz na myśli inne stanowisko, po prostu wybierz odpowiednią opcję z listy rozwijanej.
Następnie przewiń w dół do sekcji “Inteligentna logika warunkowa” i przełącz przełącznik “Włącz logikę”.
Uwaga: Należy pamiętać, że ta funkcja jest dostępna tylko w wersji pro WPCode.
Następnie wybierz “Pokaż” z rozwijanego menu “Warunki” i kliknij przycisk “+ Utwórz nową grupę”.
Spowoduje to otwarcie nowych ustawień, w których należy zdefiniować warunki wyświetlania fragmentu kodu.
Ponieważ chcemy wyświetlać poprzednie/następne odnośniki tylko na stronach, otwórz pierwsze menu rozwijane i przełącz się na kartę “Gdzie (strona)” w lewej kolumnie.
Następnie wybierz “Typ treści” z opcji, wybierz “Jest” ze środkowego menu rozwijanego i wybierz “Strony” z ostatniego menu rozwijanego.
Na koniec przewiń z powrotem do góry i przełącz przełącznik “Nieaktywny” na “Aktywny” i kliknij przycisk “Zapisz fragment kodu”. Teraz z powodzeniem dodałeś poprzednie/następne odnośniki do twoich stron.
Oto jak to wyglądało na naszej witrynie demonstracyjnej:
Bonus: Usuwanie następnych i poprzednich odnośników w WordPressie
Niektórzy użytkownicy mogą chcieć usuwać odnośniki następny i poprzedni w WordPress.
Na przykład, niektórzy użytkownicy mogą uznać te odnośniki za mniej pomocne. Niektórzy mogą chcieć zamiast tego wyświetlać powiązane wpisy lub popularne wpisy.
Istnieją dwa sposoby na usuwanie następnych i poprzednich odnośników w WordPressie.
Metoda 1. Usuń kod z twojego motywu WordPress
Aby usunąć następne i poprzednie odnośniki w WordPress, musisz usunąć kod odpowiedzialny za wyświetlanie odnośników w twoim motywie WordPress.
Problem z tym podejściem polega na tym, że gdy tylko zaktualizujesz swój motyw, usunięty kod powróci, jeśli był częścią oryginalnego motywu.
Aby tego uniknąć, należy utworzyć motyw potomny.
Następnie musisz znaleźć kod odpowiedzialny za wyświetlanie następnych i poprzednich odnośników w twoim motywie nadrzędnym.
Zazwyczaj znajduje się on wewnątrz szablonów single.php lub content-single.php.
Zasadniczo będziesz szukał kodu, który zawiera następującą funkcję:
1 | <?php the_post_navigation() ?> |
Kod ten może mieć nieco inny format i parametry.
Na przykład na naszej witrynie testowej motyw używał tego kodu do wyświetlania odnośników:
1 2 3 4 5 6 | the_post_navigation( array( 'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'Previous:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>', 'next_text' => '<span class="nav-subtitle">' . esc_html__( 'Next:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>', ) ); |
Jeśli korzystasz z motywu potomnego, musisz powielić ten konkretny szablon w twoim motywie potomnym, a następnie usunąć linie używane do wyświetlania następnych lub poprzednich odnośników.
Jeśli wolisz po prostu usunąć go w twoim motywie nadrzędnym, możesz to również zrobić.
Usunięcie kodu spowoduje, że WordPress przestanie wyświetlać następne i poprzednie odnośniki.
Metoda 2. Ukryj odnośniki do następnych i poprzednich wpisów
Metoda ta tak naprawdę nie usuwa odnośników do następnej i poprzedniej strony. Zamiast tego czyni je niewidocznymi dla ludzkich czytelników.
Wystarczy dodać następujący własny CSS do twojego motywu WordPress:
1 2 3 | nav.navigation.post-navigation { display: none;} |
Nie zapomnij zapisać swoich zmian.
Następnie przejdź na twoją witrynę internetową, aby zobaczyć, jak odnośniki nawigacyjne znikają.
Mamy nadzieję, że ten artykuł pomógł ci nauczyć się, jak łatwo dodawać następne i poprzednie odnośniki w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat korzystania z wzorców blokowych WordPress i naszą listą zablokowanych wskazówek dotyczących korzystania z krótkich kodów w WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Carolyn
Hey there! This article is awesome! It was easy to get it all plugged in… however, do you know how to set it so that the previous/next navigates only within the category instead of navigating between ALL posts from all categories?
WPBeginner Support
The code for that is in our article just before the Styling section
Admin
Shanna
I created a WP.org website and I have 4 post per page. I don’t see a next page at the bottom of my page. I have over 20 blog posts. How can I see more blog posts or go to the next page?
WPBeginner Support
If you are using pages instead of posts, you would not see a next page option, we would recommend taking a look at our guide below for understanding how pages work compared to posts.
https://www.wpbeginner.com/beginners-guide/what-is-the-difference-between-posts-vs-pages-in-wordpress/
This guide would show how to go through posts with previous and next links.
Admin
Kristi Borst
Thanks for your article. Very helpful. How would I edit the call to limit the title to xx number of characters followed by eclipse “…”? I tried using css but nothing I did worked.
WPBeginner Support
At the moment we do not have a beginner friendly way to set that up at the moment and that would require editing the code, not the CSS. If we find a way we would recommend we will be sure to share!
Admin
George Okinda
Awesome! this helped. Thanks and God bless you all in Christ Jesus
WPBeginner Support
You’re welcome, glad our guide was helpful!
Admin
Jennifer
Hello,
So, how would the code look if you wanted to use a shortcode instead of adding it to the single.php file? I am using GeneratePress and I want to add a hook to my post pages.
Would it look like this?
add_shortcode( ‘posts-nav’, ‘prev_add_next_blogs’ );
the_post_navigation(
array(
‘prev_text’ => __( ‘← %title’ ),
‘next_text’ => __( ‘%title →’ ),
‘in_same_term’ => true,
‘taxonomy’ => __( ‘category’ ),
) );
add_action( ‘init’, ‘prev_add_next_blogs’ );
This did not work for me, any help would be greatly appreciated.
Thank you
Jennifer
WPBeginner Support
You would want to place the add_shortcode below the code for one likely reason if you have not tested so far.
Admin
Ciprian Popescu
This is a good tutorial and I have just implemented it on my blog. It will definitely help with user retention and bounce rate.
The Full Site Editor will never be able to do this using HTML only. That’s why having the code in functions.php (or, even better, in another PHP file called from functions.php) will always work. The function could be coded as a shortcode (with a slight modification to return data instead of echoing it):
`add_shortcode( ‘posts-nav’, ‘wpb_posts_nav’ );`
And then adding it to every post, as a shortcode block (for the Block Editor).
WPBeginner Support
Thank you for your feedback on an alternative option!
Admin
WPBeginner Support
For what it sounds like you’re wanting, you would want to add in_same_term to the post navigation code similar to the code below:
the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
'next_text' => true,
) );
Admin
Bipo
Hello,
thanks for this tutorial.
While I’m trying to have thumbnail thing working with Divi (images are not shown), I would ask if it is posssible to add the category/taxonomy filter to this code too.
I mean: is it possible to show links and thumbs only when pages are in the same category?
(I’ve already added category to pages and the_post_navigation works )
Henrik Blomgren
Hi, great tutorial. For old style WordPress.
Now if I wanted to do the image thumbnail post navigation next previous with the new thing in WordPress. The Full Site Editing?
How would I go around doing this tutorial with that?
WPBeginner Support
Unless we hear otherwise, we would still recommend this method with the full site editor but we will certainly take a look and update the article as needed!
Admin
Henrik Blomgren
Thank you very much for your reply. I forgot you still have full access to functions.php so the code will absolutely work.
Just that getting it into the single.html file is why my brain shut down. Since having to use single.php as the fallback for single posts feels a little weird.
So yes, please either update the article when time has been found or if possible please point me in the direction of how to use the function written in php in our html template.
Tina Filipčič
Thank you. It helps a lot. I only have this problem now: the navigation is displayed on both – pages and posts. How to make it display on posts only?
WPBeginner Support
The simplest method would be to have a template for your pages that does not use this, you can see more on our guide below about the template hierarchy:
https://www.wpbeginner.com/wp-themes/wordpress-template-hierarchy-explained/
as well as our guide below about creating a child theme:
https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
Admin
Tina Filipčič
Hello,
I solved the problem by adding this:
let page = document.querySelector(‘.page’);
page.querySelector(‘.wpb-posts-nav’).style = “display:none”