Volete visualizzare le immagini in evidenza con i collegamenti agli articoli precedenti e successivi in WordPress?
In fondo a ogni articolo, WordPress visualizza i colleghi agli articoli precedenti e successivi per facilitare la navigazione. L’aggiunta di miniature a questi colleghi li renderà più attraenti per i lettori.
In questo articolo vi mostreremo come utilizzare le miniature con i collegamenti agli articoli precedenti e successivi in WordPress.
Perché visualizzare le immagini in evidenza con i collegamenti agli articoli precedenti e successivi?
Il vostro blog WordPress offre alcune caratteristiche utili per aiutare i visitatori a trovare nuovi contenuti e a navigare nel vostro sito.
Queste caratteristiche includono menu di navigazione, una barra di ricerca e un widget per gli archivi degli articoli.
Un’altra utile caratteristica di navigazione si trova in fondo a ogni articolo del blog WordPress. Lì troverete i colleghi agli articoli precedenti e successivi del vostro sito.
Questi collegamenti aumentano il coinvolgimento dell’utente, perché quando i visitatori finiscono di leggere un articolo del blog, cercheranno qualcos’altro da leggere. Tuttavia, i colleghi avranno un aspetto più interattivo se aggiungerete delle miniature.
È anche un buon modo per attirare l’attenzione sugli articoli del blog che funzionano meglio. Ad esempio, potreste avere dei contenuti pilastro 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 agli articoli vi aiuterà a costruire la vostra lista di email e a far crescere la vostra piccola impresa.
Detto questo, vediamo come aggiungere le miniature ai collegamenti agli articoli precedenti e successivi 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 frammento di codice con un plugin come WPCode.
WPCode è il miglior plugin per gli snippet di codice che permette di aggiungere codice senza rompere il sito. 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, selezionate il nostro articolo su come installare un plugin di WordPress.
Da lì, andare alla pagina Code Snippets “ + Code Snippets. Poi fate clic su “Add-on”.
Qui si accede a una libreria di snippet di codice in cui si possono trovare tonnellate di template già pronti tra cui scegliere.
Sotto la voce “Add-on Codice personalizzato”, fate clic su “Usa snippet”.
Assegnate un nome allo snippet di codice, in modo da potervi fare riferimento in seguito.
Quindi, copiare il seguente codice nell’editor di testo WPCode. Assicurarsi di selezionare ‘PHP Snippet’ 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;
}
Successivamente, spostare il pulsante da “Inattivo” ad “Attivo”.
In questo modo il frammento di codice avrà effetto.
A questo punto, è sufficiente premere il pulsante “Aggiorna”.
Ora dobbiamo tornare alla pagina Code Snippets “ +Add Snippet.
Anche in questo caso, sotto l’opzione “Aggiungi codice personalizzato”, si selezionerà “Usa snippet”.
Assegnate un nome allo snippet di codice, in modo da potervi fare riferimento in seguito.
Quindi, copiare il seguente codice nell’editor di testo WPCode. Assicurarsi di selezionare ‘PHP Snippet’ come tipo di codice.
wpb_posts_nav();
Questo codice indica a WordPress dove mostrare la navigazione con l’immagine in evidenza.
Scorrere poi verso il basso fino alla sezione Pannelli di inserimento. Fare clic sul menu a discesa accanto a Posizione.
Da qui, andare su Specifica pagina e scegliere Inserisci dopo l’articolo. In questo modo, le miniature appariranno correttamente accanto ai colleghi.
Infine, rendere attivo lo snippet di codice attivando il pulsante “Attivo”.
Poi fate clic su “Aggiornamento”.
Una volta salvate le modifiche, questa funzione può essere richiamata dal template in cui si desidera visualizzare i collegamenti agli articoli precedenti e successivi con le immagini in evidenza.
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.
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.
Nota: se uno degli articoli collegati non ha già un’immagine in evidenza, non verrà visualizzata un’immagine in evidenza.
Per sapere come aggiungere miniature a un post, consultate la nostra guida su come aggiungere immagini in evidenza o miniature di articoli in WordPress.
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 avranno la possibilità di vedere i vostri contenuti migliori, anziché solo gli articoli pubblicati prima e dopo.
Gli articoli più popolari contengono i 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.
Potreste anche 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 articolo del blog.
Speriamo che questo tutorial vi abbia aiutato a imparare a usare le miniature con i collegamenti agli articoli precedenti e successivi in WordPress. Potreste anche voler imparare a velocizzare le prestazioni di WordPress o consultare il nostro elenco dei migliori plugin per i social media per WordPress.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Atesz says
Hello,
thnak you for this code. I would like to add the post navigation in the middle of my page as a block. So I tried to create a shortcode calling the wpb_posts_nav funtion:
add_shortcode( ‘custom-post-nav’, ‘wpb_posts_nav’ );
but if I use the shortcode [custom-post-nav] in the block editor, I cannot publish the post and I get the following: “Updating failed. The response is not a valid JSON response”
The post nav still appears but only If I paste the code at the end of the page and then they go to wrong place (to the top).
Do you know where is the problem?
Thank you in advance!
WPBeginner Support says
For your JSON response error, we would recommend going through our troubleshooting guide below!
https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-invalid-json-error-in-wordpress-beginners-guide/
Admin
Sekh Sahajahan says
Hello sir have you any solution to remove the 3 line navigation bar from menu bar because it automatically added.
Markus Martin says
Hi Syed. Does this still work especally with the new version of wordpress?
patricia says
Hello! How would I do, if i want to use this for custom post type? thanks
MarykeVanRensburg says
I got it to work. It seems the } in this “<?php } ?>” was the problem. I removed it and it works. Now just to figure out how to only show next and previous in same category. Thanks
bowetech says
HOw would i set it up so that it will actually get the next post from its current category ?
Japh says
Nice and simple solution, I really like it. Great answer for your Facebook asker
Wordpress Themes Labs says
nice guide
MarykeVanRensburg says
Can you tell me how to only show previous and next in the same category? Thanks for this code. I’m going to try it.
wpbeginner says
@MarykeVanRensburg I think the TRUE variable there means in category browsing.
MarykeVanRensburg says
@wpbeginner I used the code, but it doesn’t work in an Artisteer created theme. The code in my theme is as follows:
‘next_link’ => theme_get_previous_post_link(‘« %link’), ‘prev_link’ => theme_get_next_post_link(‘%link »’),
and I need to change it to show a thumbnail and only a certain category. Thanks.
wpbeginner says
@MarykeVanRensburg AFter the link area just add ,true
our code above will do only category browsing. Unfortunately we do not provide support for specific frameworks.
Sugeng Santoso says
I love this.
Dragon Blogger says
Really cool, I do think using thumbnails with latest/next post may be overkill if you already use it with “related posts” there is limited real estate which is especially true for the growing trend of mobile browsing.
wpbeginner says
@Dragon Blogger That is only if you are assuming that the site has related posts. Some may not. We are using it on our List25 site which is relatively new site, so related articles is not very helpful at the time. That is why we are using single post navigation.
Dragon Blogger says
@wpbeginner @Dragon Blogger
Dragon Blogger says
@wpbeginner your are right and make a good point about newer sites without enough content to do images for related content.