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?

In breve, le miniature rendono immediatamente i tuoi collegamenti di navigazione più accattivanti e cliccabili. Possono incoraggiare i lettori a continuare a esplorare il tuo sito.

Il tuo blog WordPress offre alcune funzionalità utili 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 link 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ù performanti o popolari.

Ad esempio, potresti avere contenuti pilastro 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 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:

• Using Thumbnails with Previous and Next Post Links in WordPress
• Alternativa: Visualizzare i post popolari con miniature
• Domande frequenti sulle miniature di navigazione dei post
• Link bonus: Utilizzo di immagini e altri file multimediali in WordPress

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 tuo tema WordPress. Se non l'hai mai fatto prima, consulta la nostra guida su come copiare e incollare codice in WordPress.

Aggiungere codice usando WPCode

Il primo passo è aggiungere il seguente snippet di codice utilizzando WPCode, il miglior plugin per snippet di codice. Ti permette di aggiungere codice senza compromettere il tuo sito e offre molti modelli pronti all'uso, così non dovrai scrivere codice da zero.

Sui siti dei nostri brand partner, 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 esplorarne le funzionalità.

Per iniziare, dovrai installare e attivare il plugin WPCode. Se hai bisogno di aiuto, puoi consultare il nostro articolo su come installare un plugin di WordPress.

Dopo l'attivazione, vai alla pagina Code Snippets » + Add Snippet dalla tua bacheca di WordPress.

Quindi, procedi e fai clic sul pulsante ‘Add New’.

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

Per aggiungere miniature ai link dei post precedenti e successivi, caricheremo una stringa di codice personalizzato. Quindi, facciamo clic su ‘Use Snippet’ sotto ‘Add Your Custom Code (New Snippet).’

Nel popup che appare, selezionerai il tipo di codice.

Qui, dovrai scegliere ‘PHP Snippet.’

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

Una volta inserito lo snippet, puoi attivare l'interruttore da ‘Inactive’ ad ‘Active.’

Dovrebbe apparire così.

Questo abiliterà il codice a funzionare.

Quindi, puoi semplicemente fare clic sul pulsante ‘Update.’

Ora, dovremo tornare alla pagina Code Snippets » + Add Snippet.

Di nuovo, sotto l'opzione ‘Add Your Custom Code (New Snippet)’, seleziona ‘Use Snippet.’

Assicurati di selezionare ‘PHP Snippet’ nel popup che appare.

Dopodiché, puoi dargli un nome descrittivo in modo da poterlo consultare facilmente in seguito.

Ora, puoi copiare il seguente codice e incollarlo nell'editor di testo WPCode.

wpb_posts_nav();

Questo codice dice a WordPress dove mostrare la navigazione con l'immagine in primo piano.

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 'Attivo' e fare clic su '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.

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 creerà fiducia, migliorerà la prova sociale e garantirà che i tuoi visitatori rimangano più a lungo sul tuo sito web.

Quando controlli il primo metodo nella nostra guida su come visualizzare i post più popolari in WordPress, scoprirai quanto è facile aggiungere post popolari utilizzando il plugin MonsterInsights.

Noi di WPBeginner utilizziamo MonsterInsights per tenere d'occhio le prestazioni del nostro sito web. Puoi leggere la nostra recensione completa di MonsterInsights e scoprire 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.

Oppure puoi consultare la nostra guida su come aggiungere widget personalizzati dopo i post in WordPress, dove potrai 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.

Posso cambiare le dimensioni delle miniature?

Assolutamente! Nel primo snippet di codice, cerca le righe contenenti [ 100, 100 ]. Questi numeri rappresentano la larghezza e l'altezza in pixel. Sostituiscili semplicemente con le dimensioni che funzionano meglio con il design del tuo tema.

L'aggiunta di miniature tramite codice rallenterà il mio sito web?

Assolutamente no. Il codice è leggero e costruito pensando alle prestazioni, quindi non dovresti notare alcun rallentamento. Inoltre, WPCode si assicura che lo snippet venga caricato solo nelle pagine dei singoli post dove è necessario.

Cosa succede se un post non ha un'immagine in evidenza?

Nessun problema. Se un post collegato non ha un'immagine in evidenza, il codice mostrerà semplicemente il link di testo. Detto questo, impostare un'immagine in evidenza per ogni post aiuta a mantenere il tuo sito dall'aspetto curato e coerente.

È meglio mostrare i link precedente/successivo o una sezione dei post più popolari?

Dipende dal tuo obiettivo. I link precedente e successivo sono ottimi per guidare i lettori attraverso contenuti correlati in ordine.

Ma se vuoi mantenere le persone che navigano nei tuoi articoli principali, una sezione articoli popolari (utilizzando uno strumento come MonsterInsights) può fare miracoli.

Link bonus: 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 agli articoli precedenti e successivi in WordPress. Successivamente, potresti anche voler imparare:

• Come ritagliare e modificare le miniature dei post di WordPress
• Come aggiungere un'immagine di sfondo in WordPress
• Come aggiungere miniature video in primo piano in WordPress
• Come aggiungere un widget per lettore musicale audio in WordPress
• Come aggiungere indicizzazione e ricerca PDF 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 anche trovarci su Twitter e Facebook.