Come aggiungere collegamenti Successivo / Precedente in WordPress (Guida definitiva)

Hai mai letto un post del blog e desiderato un modo semplice per passare al successivo?

È qui che i collegamenti successivo/precedente tornano utili. Questi semplici collegamenti di navigazione mantengono i lettori coinvolti guidandoli verso altri contenuti sul tuo sito senza che debbano cercarli.

Per impostazione predefinita, WordPress include collegamenti ai post successivi e precedenti, ma a seconda del tuo tema, potrebbero non essere visibili o stilizzati come desideri.

Tuttavia, non c'è bisogno di preoccuparsi perché ti abbiamo coperto! Dopo aver testato diversi metodi, abbiamo trovato alcuni modi affidabili per aggiungere e personalizzare questi collegamenti.

In questa guida, ti mostreremo come aggiungere facilmente collegamenti successivo/precedente in WordPress, sia che tu voglia farlo con un plugin o con un po' di codice personalizzato.

Cosa sono i collegamenti Successivo / Precedente in WordPress?

I collegamenti successivo e precedente sono collegamenti di navigazione dinamici integrati nei temi WordPress. Consentono agli utenti di spostarsi facilmente tra i post, aiutandoli a scoprire altri contenuti senza clic aggiuntivi.

Per impostazione predefinita, i post del blog WordPress vengono visualizzati in ordine cronologico inverso (i post più recenti prima).

Ciò significa che il post successivo è quello pubblicato dopo il post corrente che un utente sta visualizzando, e il post precedente è quello pubblicato prima del post corrente.

I collegamenti successivo/precedente consentono agli utenti di navigare facilmente tra singoli articoli e pagine di archivio del blog. Ti aiuta anche a ottenere più visualizzazioni di pagina sul tuo blog.

La maggior parte dei temi WordPress include collegamenti predefiniti per i post successivi e precedenti, che vengono visualizzati automaticamente in fondo a ciascun post. Tuttavia, alcuni temi non li visualizzano, o potresti voler personalizzare dove e come appaiono sul tuo sito web WordPress.

Detto questo, diamo un'occhiata a come aggiungere facilmente collegamenti successivi e precedenti in WordPress. Puoi seguire i collegamenti sottostanti per passare alla sezione di tua scelta:

• Aggiungere collegamenti successivi / precedenti a WordPress utilizzando un plugin (metodo più semplice)
• Aggiungere collegamenti successivi / precedenti utilizzando codice personalizzato
• Stilizzare i collegamenti successivi / precedenti in WordPress
• Aggiungere collegamenti successivi / precedenti per post con miniature
• Aggiungere collegamenti successivi / precedenti a pagine WordPress
• Bonus: Rimuovere collegamenti successivi e precedenti in WordPress

Aggiungere collegamenti successivi / precedenti a WordPress utilizzando un plugin (metodo più semplice)

Questo metodo è facile ed è consigliato ai principianti che non si sentono a proprio agio nell'aggiungere codice ai propri siti web.

Innanzitutto, devi installare e attivare il plugin CBX Next Previous Article. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, visita la pagina Impostazioni » CBX Successivo Precedente. Da qui, puoi scegliere dove vuoi mostrare i collegamenti successivi e precedenti sul tuo sito web.

Il plugin ti consente di mostrare le frecce dei collegamenti Successivo e Precedente sui singoli post, pagine, pagine di archivio e altro.

Per fare ciò, scorri verso il basso fino alla sezione ‘Impostazioni di visualizzazione archivio’ e seleziona ‘Sì’ per le aree in cui desideri mostrare questi collegamenti.

Per rendere i tuoi collegamenti successivo e precedente più pertinenti, puoi anche scegliere di visualizzare i post successivi e precedenti dalla stessa categoria o tag.

Ora, scorri verso il basso fino alla sezione ‘Impostazioni di visualizzazione articolo singolo’. Vedrai che Post e Pagine sono già selezionati come tipi di post predefiniti in cui appariranno le tue frecce.

Se desideri mostrare solo una freccia per il post precedente o successivo, seleziona semplicemente l’opzione ‘Precedente’ o ‘Successivo’ nell’impostazione ‘Mostra post’.

Tuttavia, se desideri visualizzare entrambe le frecce, scegli l’opzione ‘Sì’ nell’impostazione ‘Mostra entrambe le frecce’.

La versione gratuita del plugin ti consente solo di visualizzare le frecce per gli articoli successivi e precedenti. Puoi passare alla versione pro per sbloccare altre opzioni di visualizzazione, come il popup a comparsa.

Dopodiché, puoi selezionare uno stile di freccia dal menu a discesa nella sezione ‘Impostazioni stile freccia’.

Una volta fatto ciò, vedrai un'anteprima delle frecce qui sotto. Quindi, procedi e fai clic sul pulsante ‘Salva impostazioni’.

Se scegli di visualizzare i post successivi/precedenti dalla stessa tassonomia, allora devi passare alla scheda Naviga per tassonomia.

Da qui, scegli quale tassonomia vuoi usare per selezionare i collegamenti successivi e precedenti. Quindi, fai semplicemente clic sul pulsante ‘Salva impostazioni’.

Opzionalmente, il plugin ti consente anche di monitorare i clic utilizzando Google Analytics. Per utilizzare questa funzionalità, dovrai prima installare Google Analytics in WordPress.

Dopodiché, passa alla scheda Google Analytics nelle impostazioni del plugin e abilita le opzioni di monitoraggio dei clic.

Puoi quindi lasciare il resto delle impostazioni così come sono o configurarle secondo le tue preferenze. Una volta terminato, fai semplicemente clic sul pulsante ‘Salva impostazioni’ per memorizzare le tue modifiche.

Ora puoi visitare il tuo sito web WordPress per vedere i collegamenti successivi/precedenti in azione.

Questo metodo è più semplice, ma non offre molta flessibilità. Ad esempio, la versione gratuita del plugin non visualizza il titolo del post successivo o precedente.

Aggiungere collegamenti successivi / precedenti utilizzando codice personalizzato

Se stai cercando un modo più flessibile e personalizzabile per aggiungere collegamenti di navigazione, allora questo metodo fa per te. Per aggiungere i collegamenti successivi/precedenti, dovrai modificare i file del tuo tema WordPress.

Questo può essere molto rischioso, poiché il più piccolo errore può rendere il tuo sito inaccessibile.

È qui che entra in gioco WPCode. È il miglior plugin per snippet di codice di WordPress perché ti consente di aggiungere codice personalizzato in modo sicuro senza il rischio di compromettere il tuo sito web.

Per maggiori dettagli, consulta la nostra recensione di WPCode.

Innanzitutto, devi installare e attivare il plugin WPCode. Per i dettagli, consulta il nostro tutorial su come installare un plugin di WordPress.

Dopo l'attivazione, visita la pagina Snippet di codice » +Aggiungi snippet dalla dashboard di WordPress. Qui, fai clic sul pulsante '+ Aggiungi snippet personalizzato' sotto l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)'.

Questo ti porterà alla pagina 'Crea snippet personalizzato', dove puoi iniziare aggiungendo un titolo per il tuo codice.

Successivamente, scegli 'Snippet PHP' come tipo di codice dal menu a discesa sulla destra.

Quindi, aggiungi il seguente codice personalizzato nella casella ‘Anteprima codice’:

<?php the_post_navigation(); ?> 

Successivamente, scorri verso il basso fino alla sezione ‘Inserimento’ e scegli la modalità ‘Inserimento Automatico’.

Il tuo codice verrà eseguito automaticamente sul tuo sito dopo l'attivazione.

Successivamente, apri il menu a discesa 'Posizione' e passa alla scheda 'Specifico per pagina'.

Quindi, scegli 'Inserisci dopo il post' come posizione del tuo codice. I tuoi link al post precedente/successivo verranno ora visualizzati alla fine di ogni post.

Tuttavia, se hai un'altra posizione in mente, puoi selezionare quell'opzione.

Infine, scorri di nuovo verso l'alto e cambia l'interruttore da ‘Inattivo’ ad ‘Attivo’.

Quindi, fai clic sul pulsante ‘Salva Snippet’ per memorizzare le tue modifiche.

Ora puoi visitare il tuo sito WordPress per vedere i collegamenti Successivo / Precedente in azione.

Qui, noterai che il codice personalizzato che hai aggiunto mostra solo i link ai post successivi e precedenti con il titolo del post come testo di ancoraggio.

Non evidenzia che questi sono i link agli articoli successivi e precedenti.

Se vuoi cambiare questo, puoi aggiungere il seguente codice personalizzato nella casella 'Anteprima codice' invece:

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

Una volta salvate le modifiche in WPCode, visita semplicemente il tuo sito web.

Ecco come appariva sul nostro sito di prova:

Puoi anche usare caratteri speciali e frecce insieme ai titoli dei post successivi e precedenti.

Sostituisci semplicemente il codice con il seguente:

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

Ecco come appariva questo codice sul nostro sito web di test:

Ora, supponiamo che tu voglia rendere i link successivo e precedente più pertinenti all'articolo che l'utente sta attualmente visualizzando.

Puoi farlo mostrando i link successivo e precedente della stessa categoria o degli stessi tag:

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

Questo codice dice a WordPress di visualizzare i post successivi e precedenti nella stessa categoria. Puoi cambiare il parametro taxonomy in tags o in qualsiasi altra tassonomia personalizzata, se necessario.

Stilizzare i collegamenti successivi / precedenti in WordPress

Ora che abbiamo imparato come aggiungere link Successivo / Precedente in WordPress, diamo un'occhiata a come stilizzarli correttamente.

Per impostazione predefinita, WordPress aggiunge automaticamente diverse classi CSS predefinite ai link di navigazione dei post. Puoi utilizzare queste classi CSS in WPCode per stilizzare questi link.

Innanzitutto, vai alla pagina Snippet di codice » Aggiungi snippet dalla barra laterale di amministrazione di WordPress. Quindi, fai clic sul pulsante ‘+ Aggiungi snippet personalizzato’ sotto l'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’.

Una volta nella pagina ‘Crea snippet personalizzato’, aggiungi un titolo per il tuo codice.

Successivamente, scegli ‘Snippet CSS’ come tipo di codice dal menu a discesa.

Dopodiché, puoi aggiungere il seguente codice CSS nella tua casella ‘Anteprima codice’.

Questo CSS di base visualizza semplicemente i link successivo e precedente uno accanto all'altro ma sui lati opposti della stessa riga:

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

Puoi anche far risaltare i tuoi link di navigazione aggiungendo un colore di sfondo, un effetto hover e altro ancora.

Ecco un codice CSS di esempio che puoi utilizzare come punto di partenza:

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

Ora, scorri verso il basso fino alla sezione ‘Inserimento’ e scegli la modalità ‘Inserimento automatico’.

Il tuo codice personalizzato verrà eseguito automaticamente all'attivazione.

Procedi e attiva l'interruttore da ‘Inattivo’ ad ‘Attivo’.

Dopodiché, fai clic sul pulsante ‘Salva frammento’ per memorizzare le tue impostazioni.

Ora, visita il tuo sito WordPress per vedere i link stilizzati per i tuoi post.

Noterai che il testo del link ora ha un po' di colore di sfondo e un effetto al passaggio del mouse per rendere i link successivi e precedenti più evidenti.

Aggiungere collegamenti successivi / precedenti per post con miniature

Se vuoi rendere i tuoi link successivi/precedenti più evidenti, puoi mostrare le miniature dei post insieme ai link. Le immagini sono il modo più semplice per attirare l'attenzione dell'utente e rendere questi link più coinvolgenti.

Per fare ciò, potresti aggiungere codice personalizzato al tuo file functions.php, ma tieni presente che il più piccolo errore può compromettere il tuo sito web. Ecco perché ti consigliamo di utilizzare anche WPCode per questo.

Dopo l'attivazione del plugin, vai alla pagina Code Snippets » +Add Snippet e fai clic sul pulsante ‘+ Add Custom Snippet’ sotto l'opzione ‘Add Your Custom Code (New Snippet)’.

Una volta che verrai reindirizzato alla pagina ‘Create Custom Snippet’, dovrai aggiungere un titolo per il tuo codice.

Quindi, scegli ‘PHP Snippet’ come tipo di codice dal menu a discesa sulla destra.

Dopodiché, aggiungi il seguente codice personalizzato nella casella ‘Code Preview’:

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

Questo codice crea semplicemente una funzione che visualizza i post successivi e precedenti con immagini in evidenza o miniature dei post.

Una volta inserito lo snippet, puoi attivare l'interruttore su ‘Active’ e fare clic sul pulsante ‘Save Snippet’.

Successivamente, devi tornare alla pagina Code Snippets » + Add Snippet e fare clic sul pulsante ‘Use Snippet’ sotto l'opzione ‘Add Your Custom Code’.

Una volta aperta la pagina ‘Create Custom Snippet’, copia il seguente codice e incollalo nella casella ‘Code Preview’:

<?php wpb_posts_nav(); ?>

Questo codice decide dove vuoi visualizzare i link.

Assicurati di selezionare anche ‘PHP Snippet’ dal menu a discesa ‘Tipo di codice’.

Quindi, scorri verso il basso fino alla sezione ‘Inserimento’ e scegli la modalità ‘Inserimento automatico’ per l'esecuzione automatica del codice.

Puoi anche espandere la sezione ‘Posizione’ e passare alla scheda ‘Specifico per pagina’. Da qui, seleziona l'opzione ‘Inserisci dopo il post’ in modo che le miniature appaiano correttamente accanto ai collegamenti.

Infine, puoi attivare l'interruttore su ‘Attivo’ e fare clic sul pulsante ‘Salva snippet’.

Ora, puoi visitare il tuo sito web per vedere i collegamenti in azione.

Ora, potresti notare che questi collegamenti non hanno un aspetto molto pulito.

Puoi cambiarlo aggiungendo un po' di CSS personalizzato con WPCode per stilizzarli.

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

Ora puoi salvare le modifiche e visitare il tuo sito web per visualizzare i collegamenti successivo e precedente con miniature.

Ecco come appariva sul nostro sito di prova:

Per maggiori dettagli, puoi consultare la nostra guida su come aggiungere miniature ai collegamenti dei post precedenti e successivi in WordPress.

Aggiungere collegamenti successivi / precedenti a pagine WordPress

Normalmente, i collegamenti di navigazione dei post vengono utilizzati per i post del blog in WordPress. Questo perché tali elementi vengono pubblicati in ordine cronologico inverso.

D'altra parte, le pagine di WordPress generalmente non vengono pubblicate in ordine cronologico. Per maggiori dettagli, consulta la nostra guida su la differenza tra post e pagine in WordPress.

Tuttavia, alcuni utenti potrebbero voler visualizzare la navigazione delle pagine per aiutare i visitatori a trovare facilmente la pagina successiva. La buona notizia è che il codice che abbiamo usato in precedenza con WPCode mostra i collegamenti precedente e successivo per le pagine.

Se desideri visualizzare questi collegamenti sia nelle pagine che nei post, non dovrai apportare ulteriori modifiche.

Tuttavia, se desideri visualizzare i collegamenti precedente/successivo solo per le pagine, vai alla pagina Snippet di codice » + Aggiungi snippet.

Qui, seleziona l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)'.

Una volta nella pagina 'Crea snippet personalizzato', aggiungi un titolo per il tuo snippet.

Quindi, scegli 'Snippet PHP' come tipo di codice dal menu a discesa.

Quindi, aggiungi il seguente codice personalizzato nella casella 'Anteprima codice'.

Questo è lo stesso codice che puoi utilizzare per aggiungere collegamenti precedente/successivo per i post:

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

Successivamente, scorri verso il basso fino alla sezione 'Inserimento' e scegli la modalità 'Inserimento automatico' per l'esecuzione automatica del codice.

Puoi anche configurare la posizione dei tuoi collegamenti dal menu a discesa 'Posizione'. Ad esempio, se scegli 'Inserisci dopo il post', i tuoi collegamenti appariranno alla fine di ogni pagina.

Se hai in mente un'altra posizione, seleziona semplicemente l'opzione appropriata dal menu a discesa.

Successivamente, scorri verso il basso fino alla sezione 'Logica condizionale intelligente' e attiva l'interruttore 'Abilita logica'.

Successivamente, scegli 'Mostra' dal menu a discesa 'Condizioni' e fai clic sul pulsante '+ Aggiungi nuovo gruppo'.

Questo aprirà alcune nuove impostazioni in cui devi definire le condizioni per la visualizzazione dello snippet di codice.

Poiché vogliamo visualizzare i collegamenti precedente/successivo solo nelle pagine, apri il primo menu a discesa e passa alla scheda 'Dove (pagina)' nella colonna di sinistra.

Quindi, seleziona 'Tipo di post' dalle opzioni, scegli 'È' dal menu a discesa centrale e seleziona 'Pagine' dal menu a discesa finale.

Infine, scorri di nuovo verso l'alto e attiva l'interruttore 'Inattivo' su 'Attivo' e fai clic sul pulsante 'Salva snippet'. Ora hai aggiunto con successo i collegamenti precedente/successivo alle tue pagine.

Ecco come appariva sul nostro sito demo:

Bonus: Rimuovere collegamenti successivi e precedenti in WordPress

Alcuni utenti potrebbero voler rimuovere i link successivo e precedente in WordPress.

Ad esempio, alcuni utenti potrebbero trovare questi link meno utili. Alcuni potrebbero voler visualizzare invece post correlati o post popolari.

Ci sono due modi per rimuovere i collegamenti successivo e precedente in WordPress.

Metodo 1. Elimina il codice nel tuo tema WordPress

Per rimuovere i collegamenti successivo e precedente in WordPress, dovrai rimuovere il codice responsabile della visualizzazione dei collegamenti nel tuo tema WordPress.

Il problema con questo approccio è che non appena aggiorni il tuo tema, il codice eliminato tornerà se faceva parte del tema originale.

Per evitare ciò, dovrai creare un tema figlio.

Successivamente, devi trovare il codice responsabile della visualizzazione dei collegamenti successivo e precedente nel tuo tema padre.

Di solito, si trova all'interno dei template single.php o content-single.php.

In sostanza, cercherai il codice che include la seguente funzione:

<?php the_post_navigation() ?> 

Questo codice potrebbe avere un formato e parametri leggermente diversi.

Ad esempio, sul nostro sito di prova, il tema ha utilizzato questo codice per visualizzare i collegamenti:

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

Se stai utilizzando un tema figlio, allora devi duplicare questo particolare template nel tuo tema figlio e quindi eliminare le righe utilizzate per visualizzare i collegamenti successivo o precedente.

Se preferisci semplicemente eliminarlo nel tuo tema padre, puoi farlo anche.

L'eliminazione del codice impedirà a WordPress di visualizzare i collegamenti successivo e precedente.

Metodo 2. Nascondi i collegamenti ai post successivo e precedente

Questo metodo non rimuove realmente i collegamenti successivo e precedente. Invece, li rende semplicemente invisibili ai lettori umani.

Aggiungi semplicemente il seguente CSS personalizzato al tuo tema WordPress:

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

Non dimenticare di salvare le modifiche.

Quindi, visita il tuo sito web per vedere scomparire i collegamenti di navigazione.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere facilmente link successivi e precedenti in WordPress. Potresti anche voler consultare la nostra guida su come usare i pattern di blocchi di WordPress e il nostro elenco di suggerimenti essenziali per l'uso degli shortcode in WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.