Come aggiungere miniature ai link dei post precedenti e successivi in WordPress

Dopo tutto il lavoro su un post del blog di WordPress, vedere i lettori andarsene dopo una sola pagina è frustrante.

Una delle ragioni principali? I semplici collegamenti di navigazione testuali in fondo ai tuoi post vengono appena notati.

Aggiungere immagini in miniatura a questi collegamenti di navigazione può aiutarti ad attirare l'attenzione. I lettori possono vedere immediatamente cosa sta arrivando, il che li rende molto più propensi a rimanere ed esplorare i tuoi contenuti.

Abbiamo testato molti metodi e scoperto che WPCode è lo strumento migliore per questo lavoro. Ti consente di aggiungere snippet di codice personalizzati in modo sicuro senza toccare i file del tuo tema.

In questa guida, ti mostreremo esattamente come aggiungere miniature ai tuoi collegamenti ai post precedenti e successivi in WordPress. È più facile di quanto pensi! 💡

Perché visualizzare miniature con i collegamenti ai post precedenti e successivi?

Le miniature rendono immediatamente più accattivanti e cliccabili i tuoi collegamenti di navigazione. Possono incoraggiare i lettori a continuare a esplorare il tuo sito, aumentando potenzialmente le visualizzazioni di pagina e il tempo di permanenza.

Il tuo blog WordPress offre alcune utili funzionalità per aiutare i visitatori a trovare nuovi contenuti e navigare nel tuo sito.

Queste funzionalità includono:

• Menu di navigazione
• Una barra di ricerca, e
• Un widget degli archivi dei post.

Un'altra utile funzione di navigazione si trova in fondo a ogni post del blog. Lì troverai i collegamenti ai post precedenti e successivi del tuo sito.

Questi link aumentano il coinvolgimento degli utenti perché, quando i visitatori finiscono di leggere un post del blog, potrebbero cercare qualcos'altro da leggere. Tuttavia, se aggiungi miniature, i link appariranno più interattivi.

È anche un ottimo modo per attirare l'attenzione sui tuoi post del blog più popolari o che hanno le migliori prestazioni.

Ad esempio, potresti avere contenuti fondamentali che stanno già generando molto traffico e convertendo quei lettori in iscritti alla tua newsletter. L'aggiunta di miniature con collegamenti ai post ti aiuterebbe solo a costruire la tua lista email e a far crescere la tua piccola impresa.

Tenendo conto di ciò, ti mostreremo come aggiungere miniature ai collegamenti dei post precedenti e successivi in WordPress. Ecco tutti gli argomenti che tratteremo in questo articolo:

Iniziamo!

Utilizzo di miniature con collegamenti ai post precedenti e successivi in WordPress

Per aggiungere miniature ai collegamenti dei post precedenti e successivi, dovrai aggiungere codice ai file del tema del tuo WordPress.

Consigliamo di utilizzare WPCode, il miglior plugin per snippet di codice per WordPress. Ti consente di aggiungere codice senza interrompere il tuo sito e viene fornito con molti modelli pronti all'uso, quindi non devi scrivere codice da zero.

Sui nostri siti web, utilizziamo WPCode per creare e gestire snippet di codice personalizzati. Ha funzionato incredibilmente bene per noi e puoi consultare la nostra recensione completa di WPCode per esplorare le sue funzionalità.

Se non l'hai mai fatto prima, consulta la nostra guida su come copiare e incollare codice in WordPress.

Per iniziare, dovrai installare e attivare il plugin WPCode. Dalla tua area di amministrazione di WordPress, vai su Plugin » Aggiungi Plugin.

Nella schermata successiva, utilizza la casella di ricerca per trovare rapidamente il plugin WPCode.

Fai clic su ‘Installa Ora’ nel risultato della ricerca, seguito da ‘Attiva’.

Se hai bisogno di aiuto, puoi consultare il nostro articolo su come installare un plugin di WordPress.

Dopo l'attivazione, vai su Snippet di Codice » + Aggiungi Snippet dalla tua bacheca di WordPress.

Verrai reindirizzato a una libreria di snippet di codice, dove potrai scegliere tra un'ampia varietà di modelli predefiniti.

Per aggiungere miniature ai collegamenti dei post precedenti e successivi, caricheremo una stringa di codice personalizzato.

Quindi, facciamo clic su ‘+ Aggiungi Snippet Personalizzato’ sotto ‘Aggiungi il tuo Codice Personalizzato (Nuovo Snippet)’.

Nel popup che appare, selezionerai il tipo di codice.

Qui, vorrai scegliere 'Snippet di PHP', che è un piccolo pezzo di codice utilizzato per estendere la funzionalità di WordPress.

Il passo successivo è dare un nome allo snippet di codice in modo da poterlo consultare in seguito.

Quindi, copia semplicemente il seguente codice nell'editor di testo WPCode:

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

Ecco come potrebbe apparire sullo schermo:

Prima di attivare, scorri verso il basso fino alla sezione ‘Inserimento’ per controllare le impostazioni.

Qui, assicurati che il ‘Metodo di Inserimento’ sia impostato su ‘Inserimento Automatico’ e la ‘Posizione’ sia ‘Esegui Ovunque’.

Quindi, puoi scorrere di nuovo verso l'alto e attivare il pulsante da 'Inattivo' ad 'Attivo'.

Non dimenticare di fare clic sul pulsante 'Salva Snippet' o 'Aggiorna' per attivare la tua nuova funzione.

Ora che la funzione è stata creata, dobbiamo creare un secondo snippet per dire a WordPress esattamente dove visualizzarla nella pagina. Dividendo questo in due snippet, creiamo in modo sicuro la funzionalità prima e poi la posizioniamo facilmente senza sovraccaricare il tuo sito o rompere il tuo layout.

Torniamo alla pagina Code Snippets » + Add Snippet.

Di nuovo, sotto l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo Snippet)', fai clic su '+ Aggiungi Snippet Personalizzato'.

Nel popup che appare, WPCode ti chiederà il tipo di codice.

Puoi selezionare 'Snippet PHP'.

Questo aprirà lo stesso editor di testo di prima.

Dai un nome descrittivo al tuo nuovo snippet personalizzato in modo da potervi fare facilmente riferimento in seguito.

Ora, puoi copiare e incollare il seguente codice nell'editor di testo di WPCode. Questo codice dice a WordPress dove mostrare la navigazione con l'immagine in evidenza.

wpb_posts_nav();

Ecco come potrebbe apparire sullo schermo:

Fatto ciò, scorri verso il basso fino alla sezione 'Inserimento' e fai clic sul menu a discesa accanto a 'Posizione'.

Da qui, vai su 'Specifico per pagina' e scegli 'Inserisci dopo il post'. In questo modo, le miniature appariranno correttamente accanto ai collegamenti.

Infine, puoi attivare l'opzione 'Attivo' e fare clic su 'Salva Snippet' (o 'Aggiorna').

Dopo aver salvato le modifiche, puoi utilizzare questa funzione nel modello in cui desideri mostrare i collegamenti ai post precedenti e successivi con miniature.

Poiché hai impostato la posizione su 'Inserisci dopo il post', WPCode gestirà automaticamente il posizionamento per te. Non è necessario modificare i file del tuo tema.

Ed ecco fatto: hai aggiunto e configurato le miniature dei post precedenti e successivi!

Ora, quando visualizzi un post sul tuo sito web, vedrai che i collegamenti precedenti e successivi in fondo al post ora hanno le miniature.

Alternativa: Visualizzare i post popolari con miniature

Un altro modo per coinvolgere i tuoi lettori dopo che hanno letto un post è visualizzare un elenco di post popolari dopo ogni articolo. Ciò consentirà ai tuoi lettori di vedere i tuoi migliori contenuti anziché solo gli articoli pubblicati in precedenza e successivamente.

I tuoi post popolari contengono i tuoi contenuti di maggior successo. Visualizzarli ai tuoi visitatori aiuterà ad aumentare le tue visualizzazioni di pagina e a migliorare l'interazione degli utenti.

Mentre i collegamenti precedente e successivo sono ottimi per la lettura cronologica, uno strumento come MonsterInsights ti consente di mostrare automaticamente i tuoi contenuti migliori e con il maggior numero di conversioni per mantenere i lettori coinvolti.

Su WPBeginner, utilizziamo MonsterInsights per tenere d'occhio le prestazioni del nostro sito web. Puoi leggere la nostra recensione completa di MonsterInsights e vedere perché è il nostro strumento di riferimento per prendere decisioni basate sui dati.

Il widget Post Popolari di MonsterInsights offre una vasta gamma di temi accattivanti e molte opzioni di personalizzazione.

Puoi scoprire quanto è facile impostare questo nella nostra guida su come visualizzare i post per visualizzazioni in WordPress.

Oppure puoi consultare la nostra guida su come aggiungere widget personalizzati dopo i post in WordPress, dove puoi imparare come aggiungere vari tipi di contenuti alla fine di ogni post del blog.

Domande frequenti sulle miniature di navigazione dei post

Hai domande sull'aggiunta di miniature alla navigazione dei tuoi post? Ecco alcune delle cose che i lettori chiedono spesso prima di iniziare.

Link bonus per l'utilizzo di immagini e altri file multimediali in WordPress

Speriamo che questo tutorial ti abbia aiutato a imparare come utilizzare le miniature con i link ai post precedenti e successivi in WordPress.

Successivamente, potresti anche voler imparare:

• Come ritagliare e modificare le miniature dei post di WordPress
• Come aggiungere miniature video in primo piano in WordPress
• Testo alternativo dell'immagine vs Titolo dell'immagine in WordPress
• Come risolvere il problema dell'immagine in evidenza non visualizzata in WordPress
• Come ottimizzare le immagini per le prestazioni web senza perdere qualità

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