Cum să adăugați linkuri Următorul / Anterior în WordPress (Ghid complet)

Ați citit vreodată o postare de blog și ați dorit o modalitate ușoară de a trece la următoarea?

Aici sunt utile linkurile următor/anterior. Aceste linkuri simple de navigare mențin cititorii implicați ghidându-i către mai mult conținut de pe site-ul dvs. fără a-i face să-l caute.

Implicit, WordPress include linkuri către postările anterioare și următoare, dar în funcție de tema dvs., acestea s-ar putea să nu fie vizibile sau stilizate așa cum doriți.

Cu toate acestea, nu trebuie să vă faceți griji, deoarece v-am acoperit! După testarea diferitelor metode, am găsit câteva modalități fiabile de a adăuga și personaliza aceste linkuri.

În acest ghid, vă vom arăta cum să adăugați cu ușurință link-uri următoare/anterioare în WordPress, fie că doriți să o faceți cu un plugin sau cu puțin cod personalizat.

Ce sunt linkurile Următor / Anterior în WordPress?

Linkurile „următorul” și „anteriorul” sunt linkuri de navigare dinamice integrate în temele WordPress. Ele permit utilizatorilor să se deplaseze cu ușurință între postări, ajutându-i să descopere mai mult conținut fără clicuri suplimentare.

În mod implicit, postările de pe blogul WordPress sunt afișate în ordine cronologică inversă (cele mai noi postări primele).

Aceasta înseamnă că postarea următoare este cea publicată după postarea curentă pe care o vizualizează un utilizator, iar postarea anterioară este cea publicată înainte de postarea curentă.

Linkurile următoare/anterioare permit utilizatorilor să navigheze cu ușurință între articole individuale și paginile de arhivă ale blogului. De asemenea, vă ajută să obțineți mai multe vizualizări de pagină pe blogul dvs.

Majoritatea temelor WordPress vin cu linkuri încorporate către postările următoare și anterioare, care sunt afișate automat în partea de jos a fiecărei postări. Cu toate acestea, unele teme nu le afișează, sau s-ar putea să doriți să personalizați unde și cum apar acestea pe site-ul dvs. WordPress.

Acestea fiind spuse, să vedem cum să adăugați cu ușurință linkuri „următorul” și „anteriorul” în WordPress. Puteți urma linkurile de mai jos pentru a sări la secțiunea dorită:

• Adăugarea linkurilor următoare / anterioare la WordPress folosind un plugin (cea mai ușoară metodă)
• Adăugarea linkurilor Următor / Anterior folosind cod personalizat
• Stilul legăturilor următoare / anterioare în WordPress
• Adăugarea linkurilor următoare / anterioare pentru postări cu miniaturi
• Adăugarea linkurilor următoare / anterioare la paginile WordPress
• Bonus: Elimină linkurile următoare și anterioare în WordPress

Adăugarea linkurilor următoare / anterioare la WordPress folosind un plugin (cea mai ușoară metodă)

Această metodă este ușoară și recomandată începătorilor care nu se simt confortabil să adauge cod pe site-urile lor.

Mai întâi, trebuie să instalați și să activați pluginul CBX Next Previous Article. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

La activare, vizitați pagina Setări » CBX Următor Anterior. De aici, puteți alege unde doriți să afișați linkurile următoare și anterioare pe site-ul dvs.

Pluginul vă permite să afișați săgeți de linkuri următoare și anterioare pe postări individuale, pagini, pagini de arhivă și multe altele.

Pentru a face acest lucru, derulați în jos la secțiunea „Setări de afișare arhivă” și selectați „Da” pentru zonele în care doriți să afișați aceste linkuri.

Pentru a face linkurile tale anterioare și următoare mai relevante, poți alege, de asemenea, să afișezi postările anterioare și următoare din aceeași categorie sau etichetă.

Acum, derulați în jos la secțiunea „Setări afișare articol unic”. Veți vedea că Postările și Paginile sunt deja selectate ca tipuri de postări implicite unde vor apărea săgețile dvs.

Dacă doriți să afișați o singură săgeată fie pentru postarea anterioară, fie pentru cea următoare, selectați opțiunea „Anterior” sau „Următor” din setarea „Afișare postare”.

Cu toate acestea, dacă doriți să afișați ambele săgeți, alegeți opțiunea „Da” în setarea „Afișare ambele săgeți”.

Versiunea gratuită a pluginului vă permite doar să afișați săgeți pentru articolele următoare și anterioare. Puteți face upgrade la versiunea pro pentru a debloca alte opțiuni de afișare, cum ar fi un popup glisant.

După aceea, puteți selecta un stil de săgeată din meniul derulant din secțiunea „Setări stil săgeată”.

Odată ce faceți acest lucru, veți vedea o previzualizare a săgeților mai jos. Apoi, continuați și faceți clic pe butonul „Salvează setările”.

Dacă alegeți să afișați postările următoare/anterioare din aceeași taxonomie, atunci trebuie să treceți la fila Navigare după taxonomie.

De aici, alege ce taxonomie vrei să folosești pentru a selecta legăturile următoare și anterioare. Apoi, pur și simplu apasă butonul „Save Settings”.

Opțional, pluginul vă permite, de asemenea, să urmăriți clicurile folosind Google Analytics. Pentru a utiliza această funcționalitate, va trebui mai întâi să instalați Google Analytics în WordPress.

După aceea, comutați la fila Google Analytics în setările pluginului și activați opțiunile de urmărire a clicurilor.

Puteți apoi lăsa restul setărilor așa cum sunt sau le puteți configura după bunul plac. Odată ce ați terminat, pur și simplu faceți clic pe butonul „Salvare setări” pentru a vă stoca modificările.

Acum puteți vizita site-ul dvs. WordPress pentru a vedea link-urile următoare/anterioare în acțiune.

Această metodă este mai ușoară, dar nu vă oferă multă flexibilitate. De exemplu, versiunea gratuită a pluginului nu afișează titlul postării următoare sau anterioare.

Adăugarea linkurilor Următor / Anterior folosind cod personalizat

Dacă sunteți în căutarea unei modalități mai flexibile și personalizabile de a adăuga linkuri de navigare, atunci această metodă este pentru dvs. Pentru a adăuga linkurile următoare/anterioare, va trebui să editați fișierele temei WordPress.

Acest lucru poate fi foarte riscant, deoarece cea mai mică eroare poate face site-ul dvs. inaccesibil.

Aici intervine WPCode. Este cel mai bun plugin pentru fragmente de cod WordPress, deoarece vă permite să adăugați în siguranță cod personalizat, fără riscul de a vă defecta site-ul web.

Pentru mai multe detalii, consultați recenzia noastră WPCode.

Mai întâi, trebuie să instalați și să activați plugin-ul WPCode. Pentru detalii, consultați tutorialul nostru despre cum să instalați un plugin WordPress.

La activare, vizitați pagina Code Snippets » +Add Snippet din tabloul de bord WordPress. Aici, faceți clic pe butonul „+ Add Custom Snippet” sub opțiunea „Add Your Custom Code (New Snippet)”.

Acest lucru vă va direcționa către pagina „Creare fragment personalizat”, unde puteți începe prin a adăuga un titlu pentru codul dvs.

Apoi, alegeți „Fragment PHP” ca tip de cod din meniul derulant din dreapta.

Apoi, adăugați următorul cod personalizat în caseta „Previzualizare cod”:

<?php the_post_navigation(); ?> 

După aceea, derulați în jos la secțiunea „Inserare” și alegeți modul „Inserare automată”.

Codul dvs. va fi executat automat pe site-ul dvs. la activare.

Apoi, deschide meniul derulant „Locație” și comută la fila „Specific paginii”.

Apoi, alegeți „Inserare după postare” ca locație a codului. Legăturile dvs. către postările anterioare/următoare vor fi acum afișate la sfârșitul fiecărei postări.

Cu toate acestea, dacă aveți în minte o altă poziție, puteți selecta acea opțiune.

În cele din urmă, derulați înapoi în partea de sus și comutați comutatorul „Inactiv” la „Activ”.

Apoi, faceți clic pe butonul „Salvare fragment de cod” pentru a salva modificările.

Acum puteți vizita site-ul dvs. WordPress pentru a vedea linkurile Următor / Anterior în acțiune.

Aici, vei observa că codul personalizat pe care l-ai adăugat afișează doar legăturile către postările următoare și anterioare, cu titlul postării ca text de ancorare.

Nu evidențiază faptul că acestea sunt linkurile către articolele următoare și anterioare.

Dacă doriți să schimbați acest lucru, atunci puteți adăuga următorul cod personalizat în caseta „Previzualizare cod” în schimb:

<?php the_post_navigation( array(
 'prev_text'  => __( 'Previous Article: %title' ),
 'next_text'  => __( 'Next Article: %title' ),
 ) );
?>

După ce salvați modificările în WPCode, vizitați pur și simplu site-ul dvs. web.

Iată cum arăta pe site-ul nostru de test:

Puteți folosi, de asemenea, caractere speciale și săgeți împreună cu titlurile postărilor următoare și anterioare.

Pur și simplu înlocuiți codul cu următorul:

<?php the_post_navigation( array(
 'prev_text'  => __( '← %title' ),
 'next_text'  => __( '%title →' ),
 ) );
?>

Iată cum arăta acest cod pe site-ul nostru de test:

Acum, să spunem că doriți să faceți linkurile „următorul” și „anteriorul” mai relevante pentru articolul pe care utilizatorul îl vizualizează în prezent.

Puteți face acest lucru afișând linkurile următoare și anterioare din aceeași categorie sau aceleași etichete:

<?php the_post_navigation( array(
 'prev_text'  => __( '← %title' ),
 'next_text'  => __( '%title →' ),
 'in_same_term' => true, 
 'taxonomy'	=> __( 'category' ),
 ) );
?>

Acest cod îi spune WordPress-ului să afișeze postările următoare și anterioare din aceeași categorie. Puteți schimba parametrul taxonomy la etichete sau la orice altă taxonomie personalizată, dacă este necesar.

Stilul legăturilor următoare / anterioare în WordPress

Acum că am învățat cum să adăugăm linkuri Următor / Anterior în WordPress, să vedem cum să le stilizăm corespunzător.

Implicit, WordPress adaugă automat mai multe clase CSS implicite la link-urile de navigare ale postărilor. Puteți utiliza aceste clase CSS în WPCode pentru a stiliza aceste link-uri.

Mai întâi, accesați pagina Fragment de cod » Adăugare fragment din bara laterală de administrare WordPress. Apoi, faceți clic pe butonul „+ Adăugare fragment personalizat” sub opțiunea „Adăugați codul dvs. personalizat (fragment nou)”.

Odată ce sunteți pe pagina „Creare fragment personalizat”, adăugați un titlu pentru codul dvs.

Apoi, alegeți „Fragment CSS” ca tip de cod din meniul derulant.

După aceea, puteți adăuga următorul cod CSS în caseta „Previzualizare cod”.

Acest CSS de bază afișează pur și simplu legăturile următoare și anterioare una lângă alta, dar pe laturi diferite ale aceleiași linii:

.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%;
}

Puteți, de asemenea, să faceți ca linkurile de navigare să iasă în evidență adăugând o culoare de fundal, un efect de hover și multe altele.

Iată un exemplu de cod CSS pe care îl puteți folosi ca punct de plecare:

.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;
}

Acum, derulați în jos la secțiunea „Inserare” și alegeți modul „Inserare automată”.

Codul dvs. personalizat va fi executat automat la activare.

Continuați și comutați comutatorul „Inactiv” la „Activ”.

După aceea, faceți clic pe butonul „Save Snippet” pentru a salva setările.

Acum, vizitați site-ul dvs. WordPress pentru a vedea linkurile stilizate pentru postările dvs.

Veți observa că textul linkului are acum o culoare de fundal și un efect de hover pentru a face linkurile anterioare și următoare mai proeminente.

Adăugarea linkurilor următoare / anterioare pentru postări cu miniaturi

Dacă doriți să faceți linkurile dvs. anterioare/următoare mai vizibile, atunci puteți afișa miniaturi ale postărilor împreună cu linkurile. Imaginile sunt cea mai ușoară modalitate de a atrage atenția utilizatorului și de a face aceste linkuri mai captivante.

Pentru a face acest lucru, ați putea adăuga cod personalizat la fișierul dvs. functions.php, dar rețineți că cea mai mică eroare vă poate defecta site-ul web. De aceea, recomandăm utilizarea WPCode și pentru acest lucru.

După activarea pluginului, accesați pagina Fragmentare cod » +Adăugare fragment și faceți clic pe butonul „+ Adăugare fragment personalizat” sub opțiunea „Adăugare cod personalizat (Fragment nou)”.

Odată ce sunteți direcționat către pagina „Creare fragment personalizat”, trebuie să adăugați un titlu pentru codul dvs.

Apoi, alegeți „PHP Snippet” ca tip de cod din meniul derulant din dreapta.

După aceea, adăugați următorul cod personalizat în caseta „Previzualizare cod”:

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

Acest cod creează pur și simplu o funcție care afișează postările următoare și anterioare cu imagini de prezentare sau miniaturi ale postărilor.

După ce ați introdus fragmentul, puteți comuta comutatorul la „Activ” și faceți clic pe butonul „Salvează fragmentul”.

Apoi, trebuie să reveniți la pagina Snippets de cod » + Adăugare Snippet și să faceți clic pe butonul „Utilizare Snippet” sub opțiunea „Adăugare cod personalizat”.

Odată ce se deschide pagina „Creare fragment personalizat”, copiați următorul cod și lipiți-l în caseta „Previzualizare cod”:

<?php wpb_posts_nav(); ?>

Acest cod decide unde doriți să afișați linkurile.

Asigurați-vă că selectați și „Fragment de cod PHP” din meniul derulant „Tip de cod”.

Apoi, derulați în jos la secțiunea „Inserare” și alegeți modul „Inserare automată” pentru execuția automată a codului.

Puteți, de asemenea, să extindeți secțiunea „Locație” și să comutați la fila „Specific paginii”. De aici, selectați opțiunea „Inserare după postare” pentru ca miniaturile să apară corect lângă link-uri.

În final, puteți activa comutatorul la „Activ” și faceți clic pe butonul „Salvează Snippet”.

Acum, puteți vizita site-ul dvs. pentru a vedea linkurile în acțiune.

Acum, s-ar putea să observați că aceste linkuri nu arată foarte curate.

Puteți schimba acest lucru adăugând un CSS personalizat cu WPCode pentru a le stiliza.

.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;
}

Acum puteți salva modificările și puteți vizita site-ul dvs. pentru a vedea linkurile următoare și anterioare cu miniaturi.

Iată cum arăta pe site-ul nostru de test:

Pentru mai multe detalii, puteți consulta ghidul nostru despre cum să adăugați miniaturi la legăturile postărilor anterioare și următoare în WordPress.

Adăugarea linkurilor următoare / anterioare la paginile WordPress

În mod normal, linkurile de navigare a postărilor sunt utilizate pentru postările de blog în WordPress. Acest lucru se datorează faptului că acele elemente sunt publicate în ordine cronologică inversă.

Pe de altă parte, paginile WordPress nu sunt, în general, publicate în ordine cronologică. Pentru mai multe detalii, consultați ghidul nostru despre diferența dintre postări și pagini în WordPress.

Cu toate acestea, unii utilizatori ar putea dori să afișeze navigarea pe pagină pentru a ajuta vizitatorii să găsească cu ușurință pagina următoare. Vestea bună este că codul pe care l-am folosit anterior cu WPCode afișează linkurile anterioare și următoare pentru pagini.

Dacă doriți să afișați aceste link-uri atât pe pagini, cât și pe postări, nu va trebui să faceți nicio modificare suplimentară.

Cu toate acestea, dacă doriți doar să afișați legăturile anterioare/următoare pentru pagini, accesați pagina Snippets de cod » + Adăugați Snippet .

Aici, selectați opțiunea „Adăugați codul dvs. personalizat (Snippet nou)”.

Odată ce sunteți pe pagina „Creare fragment personalizat”, adăugați un titlu pentru fragmentul dvs.

Apoi, alegeți „Fragment PHP” ca tip de cod din meniul derulant.

Apoi, adăugați următorul cod personalizat în caseta „Previzualizare cod”.

Acesta este același cod pe care îl puteți folosi pentru a adăuga linkuri anterioare/următoare pentru postări:

<?php the_post_navigation( array(
  'prev_text'   => __( '← %title' ),
  'next_text'   => __( '%title →' ),
   ) );
?>

După aceea, derulați în jos la secțiunea „Inserare” și alegeți modul „Inserare automată” pentru execuția automată a codului.

De asemenea, puteți configura poziția linkurilor dvs. din meniul derulant „Locație”. De exemplu, dacă alegeți „Inserare după postare”, atunci linkurile dvs. vor apărea la sfârșitul fiecărei pagini.

Dacă aveți o altă poziție în minte, pur și simplu selectați opțiunea corespunzătoare din meniul derulant.

Apoi, derulează în jos la secțiunea „Smart Conditional Logic” și activează comutatorul „Enable Logic”.

După aceea, alege „Afișare” din meniul derulant „Condiții” și apasă butonul „+ Adaugă un grup nou”.

Aceasta va deschide noi setări unde trebuie să definiți condițiile pentru apariția fragmentului de cod.

Deoarece dorim să afișăm linkurile anterioare/următoare doar pe pagini, deschideți primul meniu derulant și comutați la fila „Unde (pagină)” din coloana din stânga.

Apoi, selectați „Tip postare” din opțiuni, alegeți „Este” din meniul derulant din mijloc și selectați „Pagini” din meniul derulant final.

În cele din urmă, derulați înapoi în partea de sus și comutați comutatorul „Inactiv” la „Activ” și faceți clic pe butonul „Salvare fragment”. Acum ați adăugat cu succes linkurile anterioare/următoare la paginile dvs.

Iată cum arăta pe site-ul nostru demo:

Bonus: Elimină linkurile următoare și anterioare în WordPress

Unii utilizatori ar putea dori să elimine linkurile următoare și anterioare în WordPress.

De exemplu, unii utilizatori ar putea constata că aceste legături sunt mai puțin utile. Unii ar putea dori să afișeze în schimb postări similare sau postări populare.

Există două moduri în care poți elimina linkurile anterioare și următoare în WordPress.

Metoda 1. Ștergeți codul din tema dvs. WordPress

Pentru a elimina linkurile anterioare și următoare în WordPress, va trebui să eliminați codul responsabil pentru afișarea linkurilor în tema dvs. WordPress.

Problema cu această abordare este că, imediat ce actualizați tema, codul șters va reveni dacă a făcut parte din tema originală.

Pentru a evita acest lucru, va trebui să creați o temă copil.

Apoi, trebuie să găsiți codul responsabil pentru afișarea linkurilor către postarea următoare și anterioară în tema părinte.

De obicei, este găsit în șabloanele single.php sau content-single.php.

Practic, veți căuta codul care include următoarea funcție:

<?php the_post_navigation() ?> 

Acest cod ar putea avea un format și parametri ușor diferiți.

De exemplu, pe site-ul nostru de test, tema a folosit acest cod pentru a afișa linkurile:

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>',
				)
			);

Dacă folosești o temă copil, atunci trebuie să duplici acest șablon particular în tema ta copil și apoi să ștergi liniile folosite pentru a afișa legăturile următoare sau anterioare.

Dacă preferați să îl ștergeți în tema părinte, puteți face și acest lucru.

Ștergerea codului va împiedica WordPress să afișeze link-urile următoare și anterioare.

Metoda 2. Ascundeți linkurile postărilor următoare și anterioare

Această metodă nu elimină cu adevărat link-urile următoare și anterioare. În schimb, le face doar invizibile pentru cititorii umani.

Pur și simplu adăugați următorul CSS personalizat la tema dvs. WordPress:

nav.navigation.post-navigation {
    display: none;
}

Nu uitați să salvați modificările.

Apoi, vizitați site-ul dvs. pentru a vedea dispariția link-urilor de navigare.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați cu ușurință linkuri următoare și anterioare în WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să folosiți modele de blocuri WordPress și lista noastră cu sfaturi esențiale pentru utilizarea shortcodurilor în WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.