Czy chcesz dodać następne / poprzednie odnośniki w WordPress?
Następne i poprzednie odnośniki to dynamiczne odnośniki, które pozwalają użytkownikom zobaczyć następny lub poprzedni wpis.
W tym artykule pokażemy, jak łatwo dodać kolejne/poprzednie odnośniki w WordPressie i jak najlepiej je wykorzystać.
Czym są odnośniki Następny/Poprzedni w WordPress?
Następne / Poprzednie odnośniki to dynamiczne odnośniki dodane przez motyw WordPress, które pozwalają użytkownikom łatwo przejść do następnego lub poprzedniego wpisu. Może to pomóc w zwiększeniu liczby odsłon i zmniejszeniu współczynnika odrzuceń.
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 twojego bloga.
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.
Poniżej znajduje się lista tematów, które omówimy w tym artykule.
- Dodawanie następnych / poprzednich odnośników do WordPressa za pomocą wtyczki
- Dodawanie odnośników Następny/Poprzedni do motywu WordPress
- Stylizacja odnośników Następny/Poprzedni w WordPress
- Dodawanie odnośników Następny/Poprzedni do stron
- Dodawanie następnych / poprzednich odnośników z miniaturkami
- Usuwanie odnośników Następny/Poprzedni w WordPressie
Dodawanie odnośników Następny/Poprzedni do WordPressa za pomocą wtyczki
Ta metoda jest łatwiejsza 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 należy przejść 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 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.
Darmowa wersja wtyczki pozwala jedynie na 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.
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 należy wybrać taksonomię, która będzie używana do wybierania następnych i poprzednich odnośników.
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ęć.
Po zakończeniu nie zapomnij kliknąć przycisku 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 nie wyświetla tytułu następnego lub poprzedniego wpisu.
Jeśli potrzebujesz większej elastyczności, czytaj dalej.
Dodawanie odnośników Następny/Poprzedni do motywu WordPress
W przypadku tej metody będziesz musiał edytować pliki twojego motywu WordPress. Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym przewodnikiem na temat kopiowania i wklejania kodu w WordPress.
Następnie musisz połączyć się z twoją witryną internetową WordPress za pomocą klienta FTP lub aplikacji Menedżer plików w panelu sterowania hostingu WordPress.
Po nawiązaniu połączenia należy przejść do katalogu /wp-content/themes/your-current-theme/.
Teraz musisz zlokalizować plik single.php. Jest to plik odpowiedzialny za wyświetlanie pojedynczych wpisów na twojej witrynie internetowej.
Niektóre motywy WordPress mogą odwoływać się do innych plików wewnątrz pliku single.php. Pliki te nazywane są fragmentami szablonu i znajdują się w katalogu template-parts twojego motywu WordPress.
Więcej szczegółów można znaleźć w naszym artykule na temat tego, które pliki należy edytować w motywie WordPress.
Następnie wystarczy skopiować i wkleić poniższy kod w miejscu w pliku szablonu, w którym mają być wyświetlane odnośniki następny i poprzedni.
<?php the_post_navigation(); ?>
Możesz teraz zapisać zmiany i przejść na twoją witrynę internetową, aby zobaczyć w działaniu odnośniki Następny/Poprzedni.
Powyższy tag szablonu po prostu wyświetli odnośnik do następnego i poprzedniego wpisu z tytułem wpisu jako tekstem kotwicy. Nie mówi, że są to odnośniki do następnego i poprzedniego artykułu.
Zmieńmy to nieco i zapewnijmy użytkownikom pewien kontekst dotyczący tych odnośników. Zrobimy to dodając dostępne parametry dla tagu szablonu the_post_navigation.
Wystarczy zastąpić powyższy kod następującym:
<?php the_post_navigation( array(
'prev_text' => __( 'Previous Article: %title' ),
'next_text' => __( 'Next Article: %title' ),
) );
?>
Możesz teraz zapisać swoje zmiany i wyświetlić podgląd witryny internetowej.
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:
<?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.
<?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 nawigacyjnych wpisów. Możesz użyć tych klas CSS w twoim motywie WordPress, aby nadać styl tym odnośnikom.
Oto kilka podstawowych CSS, które możesz dodać do twojego motywu.
.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%;
}
Ten podstawowy CSS po prostu wyświetla następne i poprzednie odnośniki obok siebie, ale po różnych stronach tej samej linii.
Możesz również wyróżnić swoje odnośniki nawigacyjne, dodając kolor tła, efekt najechania kursorem i inne.
Oto przykładowy kod CSS, który można wykorzystać jako punkt wyjścia.
.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;
}
Ten kod stylizuje tekst odnośnika i dodaje kolor tła oraz efekt najechania kursorem, aby bardziej wyróżnić następny i poprzedni odnośnik.
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ą potrzebować wyświetlania nawigacji po stronach, aby użytkownicy mogli łatwo znaleźć następną stronę.
Na szczęście możesz użyć tego samego kodu, którego użyliśmy wcześniej dla stron. Będziesz jednak musiał dodać kod wewnątrz szablonu page.php.
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
) );
?>
Oto jak to wyglądało na naszej witrynie demonstracyjnej:
Dodawanie odnośników Następny/Poprzedni w WordPressie za pomocą miniaturek
Chcesz, aby twoje odnośniki do następnej i poprzedniej strony były bardziej powiadomione? 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.
Dodajmy odnośniki następny i poprzedni z miniaturką wpisu lub obrazkiem wyróżniającym obok nich.
Najpierw należy dodać poniższy kod do pliku functions. php motywu lub wtyczki witryny.
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.
Następnie musisz dodać funkcję wpb_posts_nav( ) do pliku single.php twojego motywu, w którym chcesz wyświetlać odnośniki.
Jeśli twój motyw ma już odnośniki następny i poprzedni, możesz znaleźć linię zawierającą funkcję the_post_navigation() i usunąć ją.
Teraz dodaj następujący kod, aby wyświetlić własne odnośniki następny i poprzedni.
<?php wpb_posts_nav(); ?>
Po dodaniu kodu nie zapomnij zapisać zmian i przejdź na swoją witrynę internetową, aby zobaczyć odnośniki w działaniu.
Teraz możesz powiadomić, że te odnośniki nie wyglądają zbyt czysto.
Zmieńmy to, dodając kilka własnych CSS, aby je stylizować.
.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.
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 jak tylko zaktualizujesz swój motyw, usunięty kod powróci.
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ę.
<?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:
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.
nav.navigation.post-navigation {
display: none;
}
Nie zapomnij zapisać zmian i przejdź na swoją witrynę internetową, aby zobaczyć, jak odnośniki nawigacyjne znikają.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak łatwo dodać następne i poprzednie odnośniki w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat wyboru najlepszego oprogramowania do projektowania stron internetowych lub naszym eksperckim porównaniem najlepszych rejestratorów domen.
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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Carolyn says
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 says
The code for that is in our article just before the Styling section
Administrator
Shanna says
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 says
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.
Administrator
Kristi Borst says
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 says
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!
Administrator
George Okinda says
Awesome! this helped. Thanks and God bless you all in Christ Jesus
WPBeginner Support says
You’re welcome, glad our guide was helpful!
Administrator
Jennifer says
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 says
You would want to place the add_shortcode below the code for one likely reason if you have not tested so far.
Administrator
Ciprian Popescu says
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 says
Thank you for your feedback on an alternative option!
Administrator
WPBeginner Support says
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,
) );
Administrator
Bipo says
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 says
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 says
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!
Administrator
Henrik Blomgren says
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č says
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 says
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/
Administrator
Tina Filipčič says
Hello,
I solved the problem by adding this:
let page = document.querySelector(’.page’);
page.querySelector(’.wpb-posts-nav’).style = „display:none”