Come aggiungere immagini in evidenza ai collegamenti agli articoli precedenti e successivi in WordPress

Di default, WordPress visualizza i link all’articolo precedente e a quello successivo nella parte inferiore di ogni pubblicazione per facilitare la navigazione.

L’aggiunta di miniature a questi link può fare una grande differenza per l’esperienza utente del vostro blog WordPress. Questa semplice modifica può catturare l’attenzione dei lettori e farli rimanere sul sito più a lungo.

In questo articolo vi guideremo ad add-on per aggiungere immagini in evidenza ai link degli articoli precedenti e successivi in WordPress per dare al vostro sito una spinta visiva.

Perché visualizzare le immagini in evidenza con i collegamenti agli articoli precedenti e successivi?

Il blog WordPress offre alcune caratteristiche utili per aiutare i visitatori a trovare nuovi contenuti e a navigare nel sito. Queste caratteristiche includono menu di navigazione, una barra di ricerca e un widget per l’archivio delle pubblicazioni.

Un’altra utile caratteristica di navigazione si trova in fondo a ciascuna pubblicazione del blog WordPress. Qui si trovano i link agli articoli precedenti e successivi del sito.

Questi link aumentano l’engagement dell’utente, perché quando i visitatori finiscono di leggere una pubblicazione del blog, potrebbero cercare qualcos’altro da leggere. Tuttavia, se aggiungete delle miniature, i link appariranno più interattivi.

È anche un ottimo modo per attirare l’attenzione sui blog più performanti.

Ad esempio, potreste avere dei contenuti di base che stanno già portando una tonnellata di traffico e convertono i lettori in abbonati alle email. L’aggiunta di immagini in evidenza con i link alle pubblicazioni vi aiuterebbe a costruire la vostra mailing list e a far crescere la vostra piccola impresa.

Tenendo presente questo, vediamo come aggiungere immagini in evidenza ai link dell’articolo precedente e successivo in WordPress.

Utilizzo delle immagini in evidenza con gli articoli successivi e precedenti in WordPress

Per aggiungere le immagini in evidenza ai collegamenti agli articoli precedenti e successivi, dovrete aggiungere del codice ai file del vostro tema WordPress. Se non l’avete mai fatto prima, consultate la nostra guida su come copiare e incollare codice in WordPress.

Aggiunta di codice con WPCode

Il primo passo è aggiungere il seguente snippet di codice utilizzando WPCode, il miglior plugin per snippet di codice. Permette di aggiungere codice senza rompere il sito e viene fornito con molti template già pronti, in modo da non dover scrivere codice da zero.

Per iniziare, è necessario installare e attivare il plugin WPCode. Per maggiori dettagli, potete selezionare il nostro articolo su come installare un plugin di WordPress.

Da qui, andare alla pagina Code Snippets “ + Add Snippet. Fare clic su “Add-on”.

Si accede a una libreria di snippet di codice, dove è possibile scegliere tra un’ampia gamma di template predefiniti.

Tuttavia, per aggiungere immagini in evidenza ai link degli articoli precedenti e successivi, caricheremo una stringa di codice personalizzato. Facciamo quindi clic su “Usa snippet” in “Aggiungi codice personalizzato”.

Il passo successivo consiste nell’assegnare un nome allo snippet di codice, in modo da potervi fare riferimento in seguito.

Quindi, copiare semplicemente il seguente codice nell’editor di testo WPCode. Assicurarsi di selezionare “Snippet PHP” come “Tipo di codice”.

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, è possibile attivare/disattivare il pulsante da “Inattivo” ad “Attivo”.

L’aspetto dovrebbe essere il seguente.

Questo abilita il codice a funzionare.

A questo punto è sufficiente fare clic sul pulsante “Aggiorna”.

Ora dobbiamo tornare alla pagina Code Snippets “ +Add Snippet.

Anche in questo caso, sotto l’opzione “Aggiungi codice personalizzato”, selezionerete “Usa snippet” e gli darete un nome per potervi fare riferimento in seguito.

Quindi, si può copiare il seguente codice e incollarlo nell’editor di testo WPCode. Assicurarsi di selezionare ‘PHP Snippet’ dal menu a discesa ‘Code Type’.

wpb_posts_nav();

Questo codice indica a WordPress dove mostrare la navigazione con l’immagine in evidenza.

A questo punto, scorrere verso il basso fino alla sezione “Inserimento” e fare clic sul menu a discesa accanto a “Posizione”.

Da qui, andare su “Specifiche della pagina” e scegliere “Inserisci dopo la pubblicazione”. In questo modo, le miniature appariranno correttamente accanto ai link.

Infine, è possibile attivare/disattivare l’opzione “Attivo” e fare clic su “Aggiorna”.

Dopo aver salvato le modifiche, è possibile utilizzare questa funzione nel template in cui si desidera mostrare i link agli articoli precedenti e successivi con le miniature.

Ed ecco fatto: avete aggiunto e configurato le immagini in evidenza degli articoli precedenti e successivi!

Ora, quando si visualizza un articolo sul proprio sito web, si noterà che gli articoli precedenti e successivi in fondo all’articolo hanno ora delle immagini in evidenza.

Alternativa: Visualizzazione degli articoli più popolari con immagini in evidenza

Un altro modo per coinvolgere i lettori dopo la lettura di un articolo è quello di visualizzare un elenco di articoli popolari dopo ogni articolo. In questo modo i lettori potranno vedere i vostri contenuti migliori, anziché solo gli articoli pubblicati prima e dopo.

Le vostre pubblicazioni più popolari contengono i vostri contenuti di maggior successo. Visualizzandoli ai vostri visitatori, creerete fiducia, migliorerete la riprova sociale e farete in modo che i visitatori rimangano più a lungo sul vostro sito web.

Controllando il primo metodo della nostra guida su come visualizzare gli articoli in base alle visualizzazioni in WordPress, imparerete quanto sia facile aggiungere articoli popolari utilizzando il plugin MonsterInsights.

Il widget degli articoli popolari di MonsterInsights offre un’ampia gamma di temi attraenti e molte opzioni personalizzate.

Oppure potete consultare la nostra guida su come aggiungere widget personalizzati dopo il post in WordPress, dove potrete imparare ad aggiungere vari tipi di contenuto alla fine di ogni post / tipo di contenuto.

Speriamo che questo tutorial vi abbia aiutato a imparare a usare le miniature con i link agli articoli precedenti e successivi in WordPress. In seguito, potreste anche voler imparare come ritagliare e modificare le miniature dei post di WordPress o come aggiungere miniature di video in evidenza in WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.