Vuoi visualizzare un elenco di post correlati sul tuo sito WordPress e preferisci usare il codice piuttosto che un plugin?
Su WPBeginner, sottolineiamo spesso l'importanza di coinvolgere il tuo pubblico e mantenerlo alla scoperta dei tuoi contenuti. Una strategia efficace che abbiamo visto utilizzare su innumerevoli siti WordPress di successo è la visualizzazione di post correlati.
Quando i visitatori del tuo blog hanno finito di leggere un articolo che li interessa, offrire un elenco di post correlati li manterrà coinvolti e li aiuterà a trovare nuovi contenuti da leggere.
In questo articolo, ti mostreremo come visualizzare post correlati con WordPress usando il codice, senza bisogno di plugin.
Perché mostrare post correlati in WordPress?
Quando il tuo blog WordPress inizia a crescere, può diventare più difficile per gli utenti trovare altri post sullo stesso argomento.
Visualizzare un elenco di contenuti correlati alla fine di ogni post del blog è un ottimo modo per mantenere i tuoi visitatori sul tuo sito e aumentare le visualizzazioni di pagina. Aiuta anche a migliorare la visibilità delle tue pagine più importanti mostrando i tuoi migliori contenuti dove le persone possono trovarli facilmente.
Se non hai familiarità con il codice, troverai più semplice scegliere uno dei tanti plugin per post correlati di WordPress che possono visualizzare post correlati senza codice.
Ma, se ti sei mai chiesto se puoi visualizzare post correlati senza usare un plugin, condivideremo due diversi algoritmi che puoi utilizzare per generare post correlati con miniature usando solo il codice:
- Metodo 1: Come mostrare post correlati in WordPress tramite tag
- Metodo 2: Come mostrare post correlati in WordPress tramite categoria
- Guide esperte sui post correlati in WordPress
Nota: Se desideri mostrare una miniatura con ogni post correlato, assicurati prima di aggiungere un'immagine in evidenza a tali post.
Metodo 1: Come mostrare post correlati in WordPress tramite tag
Un modo efficiente per individuare contenuti correlati è cercare altri post che condividono gli stessi tag. I tag vengono spesso utilizzati per concentrarsi sui dettagli specifici contenuti in un post.
Tenendo presente questo, potresti voler aggiungere alcuni tag comuni ai post che desideri mettere in relazione tra loro. Puoi inserirli nella casella 'Tag' nell'editor di WordPress.
Dopo aver aggiunto i tag ai tuoi post, la cosa successiva da fare è aggiungere il seguente snippet di codice al template single.php del tuo tema.
Se hai bisogno di aiuto per aggiungere codice al tuo sito, consulta la nostra guida su come incollare snippet dal web in WordPress.
$orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>5, // Number of related posts that will be shown.
'ignore_sticky_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="relatedposts"><h3>Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_post_thumbnail(); ?--></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_title(); ?--></a></h3>
<!--?php the_time('M j, Y') ?-->
</div>
</li>
<!--?php }
echo '</ul--></ul></div>';
}
}
$post = $orig_post;
wp_reset_query();
Questo codice cerca i tag associati a una pagina ed esegue quindi una query al database per recuperare pagine con tag simili.
Dove dovresti posizionare il codice? Dipende dal tuo tema, ma nella maggior parte dei casi, dovresti essere in grado di incollare il codice nel template single.php del tuo tema dopo il post principale e subito prima della sezione commenti.
Se stai usando il tema Twenty Twenty-One, come facciamo sul nostro sito demo, allora un buon posto dove incollare il codice è nel file template-parts/content/content-single.php dopo l'header e subito dopo <?php the_content();.
Questo visualizzerà automaticamente contenuti correlati su qualsiasi post di WordPress.
Dovrai modificare lo stile e l'aspetto dei tuoi post correlati per farli corrispondere al tuo tema aggiungendo CSS personalizzato.
Suggerimento: Invece di modificare i file del tuo tema, cosa che potrebbe compromettere il tuo sito web, ti consigliamo di utilizzare un plugin per snippet di codice come WPCode.
WPCode rende sicuro e facile aggiungere codice personalizzato in WordPress. Inoltre, offre opzioni di 'Inserimento' che ti consentono di inserire ed eseguire automaticamente snippet in posizioni specifiche del tuo sito WordPress, come dopo un post.
Per maggiori dettagli, consulta la nostra guida su come aggiungere codice personalizzato in WordPress. Puoi anche consultare la nostra recensione dettagliata di WPCode per saperne di più sul plugin.
Metodo 2: Come mostrare post correlati in WordPress tramite categoria
Un altro modo per visualizzare contenuti correlati è elencare i post che appartengono alla stessa categoria. Il vantaggio di questo metodo è che l'elenco dei post correlati non sarà quasi mai vuoto.
Come il Metodo 1, è necessario aggiungere uno snippet di codice al template single.php del tuo tema o in un plugin per snippet di codice come WPCode. Per maggiori dettagli, fai riferimento al Metodo 1 e alla nostra guida su come aggiungere codice personalizzato in WordPress.
$orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 2, // Number of related posts that will be shown.
'ignore_sticky_posts'=>1
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts"><h3>Related Posts</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>
<li><div class="relatedthumb"><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_post_thumbnail(); ?--></a></div>
<div class="relatedcontent">
<h3><a href="<?php the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><!--?php the_title(); ?--></a></h3>
<!--?php the_time('M j, Y') ?-->
</div>
</li>
<!--?php }
echo '</ul--></ul></div>';
}
}
$post = $orig_post;
wp_reset_query();
Ora vedrai un elenco di contenuti correlati in fondo a ogni post.
Se desideri modificare lo stile e l'aspetto delle tue pagine correlate, dovrai aggiungere CSS personalizzato per abbinarlo al tuo tema.
Guide esperte sui post correlati in WordPress
Vuoi saperne di più sulla visualizzazione di post correlati in WordPress? Dai un'occhiata a questi utili tutorial sui post correlati:
- Come visualizzare post correlati in WordPress (Passo dopo passo)
- Come visualizzare post correlati dello stesso autore in WordPress
- Come visualizzare gli articoli recenti in WordPress
- Come visualizzare post recenti di una categoria specifica in WordPress
- Come aggiungere post correlati inline nei post del blog di WordPress
- Come visualizzare post casuali in WordPress
- Come mostrare pagine correlate in WordPress
Speriamo che questo tutorial ti abbia aiutato a imparare come visualizzare post correlati con miniature in WordPress senza plugin. Potresti anche voler imparare come tracciare i visitatori sul tuo sito WordPress, o dare un'occhiata alla nostra lista di 24 suggerimenti per velocizzare il tuo sito web.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
imranhunzai
Assolutamente fantastico! e sì, aiuta.
8MEDIA
amazing post ,, thanks
shaileshtr
È bello mostrare post correlati in un blog WordPress senza plugin. Consumerà meno larghezza di banda e tempo per il caricamento. http://shareitto.com Grazie per il tuo suggerimento.
zioneyemedia
Ho una domanda su questo: sto lottando con il codice per catturare post da categorie figlie rispetto a categorie madri. Qualche consiglio?
AmandaLong
Questo spacca... Grazie!
dustinporchia
Sto cercando di usare i post correlati per categoria e ho notato che hai detto che il codice deve venire prima dei commenti nel loop principale. Nel mio codice voglio che i post correlati vengano dopo i commenti nel loop. Quando lo faccio, noto che il mio plugin per commenti Disqus impiega più tempo a caricarsi ora. È a causa di un errore con i commenti o è normale?
dustinporchia
Lascia perdere... sono passato a Livefyre perché è più quello che sto cercando in un sistema di commenti comunque... grazie!
subzerokh
per favore
qualcuno potrebbe aiutare un principiante come me a personalizzare questo script in modo che visualizzi i post correlati in modo orizzontale?
da sinistra a destra..
invece di mostrarli attualmente dall'alto verso il basso, verticalmente...
zioneyemedia
Ciao,
Quello che ho fatto è stato sostituire i codici e con il mio html e css. I codici creano elenchi per ogni post, e questo di solito è in modo verticale.
——————
<a href="” rel=”bookmark” title=””> <a href="” rel=”bookmark” title=””>
——————
Ho sostituito l'apertura con e la chiusura con come miei tag html. Poi scrivo il mio CSS per adattarlo alle esigenze specifiche di quella classe div sul tuo sito web. Ad esempio, una classe pleft di esempio potrebbe essere così:
.pleft {float:left; padding:2px; margin:10px; width:278px; height:190px;}
Uso il selettore float: nel mio CSS per spostare i post orizzontalmente, e i margini e il padding per dare a ogni post uno spazio tra loro. Ho aggiunto una larghezza e un'altezza specifiche per ulteriori esempi.
Spero che questo aiuti.
Simos
@zioneyemedia grazie!
gcog
Ho sicuramente i tag correlati, ma quando aggiungo il codice non vedo nulla. Inoltre, quando aggiungo il tuo codice per limitare a un tipo di post personalizzato, mi dà un errore. Ho cambiato il tipo di post con il mio tipo di post specifico.
subzerokh
@wpbeginner ciao
grazie per la tua rapida risposta...
ma sono un vero principiante per tutto quello che stai dicendo..
puoi per favore fare un piccolo esempio?
per renderli orizzontali come sul tuo blog?
puoi metterti in contatto tramite la mia email: khiloc at gmail dot com
wpbeginner
@subzerokh Dovresti modificare lo stile. Non è così difficile. Semplicemente racchiudi ogni post in un div. Specifica una larghezza per quel div e poi imposta una proprietà float left. Regola i margini e così via e il gioco è fatto.
subzerokh
Ciao a tutti!! grazie per questo script meraviglioso!!
È l'unica cosa che ho trovato che fa esattamente quello che volevo!!!
Ma mostra solo post correlati in modo verticale (dall'alto verso il basso)
Vorrei che fossero mostrati da sinistra a destra (orizzontalmente)
Come posso fare per favore??
ConnectIndia
Errore Fatal error: Call to undefined function the_post_thumbnail() in /home/connec92/public_html/wp-content/themes/weekly/single.php on line 59 Qualcuno può aiutarmi. sito web http://www.connectindia.co.in
xavpro
ehi,
ottimo post! forse potresti aiutarmi:
ho un'anteprima automatica se nessuna è definita,
if ($thumb_array[‘thumb’] == ”) $thumb_array[‘thumb’] = ‘link alla tua immagine di anteprima predefinita’;return $thumb_array;
ora la mia domanda è come definire un'anteprima per ogni categoria, che verrà utilizzata se nessuna è definita nel post.
dehahs
funziona bene, grazie per aver condiviso!
AdnanAsif
Ciao
grazie per il tuo ottimo post..
Ma c'è un modo per ottenere post per categorie ma non in ul e li e non in anteprima..
Intendo post completi mostrati nei post correlati.. proprio come mostrato nella home page, con link leggi di più.
grazie
attendo la tua risposta..
AdnanAsif
Ciao
grazie per il tuo ottimo post..
Ma c'è un modo per ottenere post per categorie ma non in ul e li e non in anteprima..
Intendo post completi mostrati nei post correlati.. proprio come mostrato nella home page, con link leggi di più.
grazie
attendo la tua risposta..
ibadullah25
Posso avere un CSS per questo per favore
Staff editoriale
Il CSS che abbiamo usato era per il sito di un cliente. Puoi aggiungere il tuo CSS su come vuoi visualizzarlo.
Amministratore
titusmagnet
Grazie.. sto cercando questo tipo di codice
jaffa
Questo è fantastico, proprio quello che stavo cercando. Mi chiedo però, come potrei combinare i due sopra e se non ci sono tag, allora visualizza i post della stessa categoria?
Sto cercando di capirlo ma non sto ottenendo molti risultati finora
nikbanks
Grazie per il codice, ha funzionato ma come lo stilizzo. Vorrei che fossero 4 storie una accanto all'altra come le tue. Sul mio sito sono elencate una sopra l'altra e non come le tue.
Staff editoriale
Quello è CSS. Non stiamo usando questo codice per mostrare storie correlate. In secondo luogo, credo che tu stia parlando di storie in primo piano nella nostra barra laterale. Abbiamo scritto un altro post a riguardo sul nostro sito.
Amministratore
Coolguy
c'è un modo per visualizzare le anteprime nei post correlati senza utilizzare immagini in evidenza o miniature dei post?
ovvero utilizzare qualsiasi immagine utilizzata nel post...
Staff editoriale
Sì, puoi utilizzare le tecniche di fallback condivise da altri sviluppatori che recuperano la prima immagine dal post. Ma ti consigliamo di utilizzare le miniature dei post di WordPress...
Amministratore
Hetal
Grazie per questo articolo. Mi stavo chiedendo se c'è un modo per taggare automaticamente i post senza doverli inserire manualmente.
Staff editoriale
No, devi taggare manualmente ogni post.
Amministratore
Sisko
Ottimo!
Cosa succede se voglio visualizzare i post correlati per categoria senza miniature?
Grazie
Staff editoriale
Just remove the thumbnail code from the code above
Amministratore
Terry
Grazie per aver pubblicato questo tutorial, mi aiuta molto.
Adrian
Ciao... Volevo solo dire che ho costruito il mio sito WordPress da zero e questo codice funziona perfettamente per me usando WP 3.1.... Tutto quello che devo fare ora è stilizzare il CSS e ottenere alcune miniature per i post. Grazie per il tuo aiuto con il codice.
rilascio nuova auto
grazie, cercavo questo hack da tanto tempo e l'hai trovato!
Patricia
Ciao, c'è un modo per escludere le categorie? Ho due categorie principali a cui vengono assegnate tutte le categorie. Le categorie principali hanno sottocategorie e vorrei mostrare solo post correlati dalle sottocategorie.
È possibile, escludendo gli id delle categorie principali?
Grazie per il tuo consiglio!
A proposito... adoro il codice... e funziona benissimo!!!
Staff editoriale
Dovresti essere in grado di usare la categoria non in <<
Amministratore
usman
Stavo cercando plugin per post correlati con miniature, ma il codice che hai incollato sopra ha risolto il mio problema.
John
Solo una domanda, c'è un modo per estrarre tag solo dallo stesso tipo di post? Magari usando qualcosa come 'post_type=videos'?
John
A proposito, ho risolto anche questo:
Basta aggiungerlo all'array:
$args=array(
‘category__in’ => $category_ids,
‘post__not_in’ => array($post->ID),
‘posts_per_page’=> 2, // Numero di post correlati che verranno visualizzati.
‘caller_get_posts’=>1,
‘post_type’=>’videos’
);
marion
Ciao,
Grazie per questo tutorial. Mi chiedo però se ci sia un modo per randomizzare i prodotti correlati? Ho controllato diversi prodotti nella stessa categoria e venivano mostrati gli stessi prodotti correlati.
Grazie
Staff editoriale
Sì, usa il parametro Query_Post per l'ordinamento e puoi randomizzarlo.
Amministratore
Clarence Johnson
Buono a sapersi.
phdean
Ciao,
Anch'io vorrei randomizzare i post che vengono visualizzati per le categorie, altrimenti mostreranno sempre gli stessi 2. Potresti per favore fornirmi il codice per farlo?
Many thanks in advance
John
Lascia perdere, ho risolto. Grazie per il post!
Staff editoriale
qual era il problema?
Amministratore
John
Non avevo altri post con gli stessi tag, cioè nessun post correlato. Errore da principiante.
John
Ho copiato questo codice e l'ho inserito nel mio single.php senza cambiare nulla e non viene visualizzato nulla. C'è qualcosa che non va nel mio codice? pastebin.com/kg0SkrAg
James
Questo non mostra una miniatura - nel codice non c'è nemmeno una chiamata per un'immagine. Non capisco come qualcuno possa far funzionare questo.
Staff editoriale
Il codice per l'immagine è: the_post_thumbnail(); << Questo non è HTML statico dove vedrai il codice src dell'immagine. La funzione chiama nel database per cercare un'immagine in evidenza, alias miniatura, che è allegata a ciascun articolo. Se trovata, visualizzerà l'immagine. Ora, se non hai le miniature dei post abilitate nel tuo tema, devi prima aggiungerle:
https://www.wpbeginner.com/wp-themes/how-to-add-post-thumbnails-in-wordpress/
L'articolo lo affermava chiaramente nella sezione Note:. Dovresti considerare di leggerlo attentamente.
Amministratore
Roberto Silva
Ehi amico, adoro il tuo blog!
Ho una domanda?
Puoi fare lo stesso trucco ma "PER AUTORE"?
mostrare gli ultimi post per autore?
you will save my life
A proposito, grazie per questo sito!
Staff editoriale
Yes we will que the article soon
Amministratore
Roberto Silva
sììì, grazie...
Sarà un ottimo articolo.
perché "ultimi post per autore senza plugin" è difficile da trovare su internet.
sei il migliore.
Quinn
Grazie per questo codice! L'ho provato e funziona in parte.
Riesco a ottenere un elenco degli articoli correlati, un enorme vantaggio.
Ma non riesco a far apparire nessuna immagine.
Gli articoli hanno immagini se questo codice le estrae.
Sono anche entrato e ho creato immagini per ogni post con il tag personalizzato "relatedthumb". Ma ahimè, ancora nessuna immagine.
C'è qualcos'altro che devo fare?
Molte grazie in anticipo!
Quinn
Staff editoriale
Questo trucco utilizza le miniature predefinite di WordPress aggiunte in WP 2.9. Se hai un'immagine allegata come miniatura, allora la estrarrà.
Amministratore
Anthony
È possibile escludere una categoria da questo modulo?
Grazie mille,
Anthony
Staff editoriale
Mostrerà solo post nella categoria in cui risiede l'altro post...
Amministratore
Madhav Tripathi
Ciao, grazie per questo buon tutorial, attualmente sto usando il tema Thesis, quindi vorrei sapere se c'è un modo nel tema Thesis per implementare questo codice .php.
Sophie
Sto cercando di modificare il suo codice per usarlo con le categorie all'interno di un tipo di post personalizzato. Qualcuno può aiutarmi? Sono abbastanza nuovo al php.
Grazie!
rulethenation
ok, sono riuscito a farlo funzionare, c'è un modo per mettere un'immagine predefinita se una miniatura non è disponibile
Staff editoriale
Sì, puoi usare il parametro if per controllare se ci sono plugin... in caso contrario, puoi visualizzare un'immagine predefinita.
Amministratore
rulethenation
come dovrei fare? sono un noob di php lol
Quickbrown
Per utilizzare le immagini predefinite quando non è disponibile alcuna miniatura del post, sostituisci con <?php if (has_post_thumbnail()) {the_post_thumbnail()} else {echo '’;} ?>
Quindi inserisci un file default-image.jpg nella cartella delle immagini del tuo tema.
rulethenation
Non riesco a farlo funzionare, rovina tutto il mio layout vicino ai commenti, mi manca qualcosa? Ho dovuto rimuoverlo dal mio sito
Clarence Johnson
I miei post sono ora arricchiti grazie a te e a questo tutorial.
Heather Hill
CIAO!
Grazie per queste informazioni! È esattamente quello che stavo cercando.
C'è un modo per aggiungere un estratto a questo, insieme alla foto?
Grazie ancora per il tuo aiuto!
Staff editoriale
Sì. Aggiungi semplicemente the_excerpt(); dove vuoi che venga visualizzato l'estratto.
Amministratore
Jez
Grazie per questo, esattamente quello che stavo cercando! Adoro quanto siano diretti i tuoi articoli, nessuna confusione.
Omer Greenwald
Grazie per aver condiviso. Sto usando questo codice da un po' di tempo ma ha un problema: quando si aggiungono tag a un post, WP li ordina alfabeticamente indipendentemente dalla priorità che ho aggiunto. Quindi questo codice visualizza post correlati che corrispondono solo al primo tag, che a volte sono meno pertinenti.
Forse hai un'idea su come prevenire questo ordinamento automatico dei tag da parte di WordPress o qualsiasi altra soluzione?
Staff editoriale
Non sta usando il primo tag. Questo codice utilizza tutti i tag dei post per trovare post correlati.
Amministratore
Clarence Johnson
Sto riscontrando lo stesso problema.
Doug C.
Tutto quel primo codice ha fatto è stato mettere due istanze dello stesso post sulla pagina. Non ha mostrato nulla di correlato.
Staff editoriale
Doug, ti preghiamo di contattarci utilizzando il modulo con un link di esempio attivo, e possiamo aiutarti. Sappiamo che questo codice funziona perché alcuni siti dei nostri clienti lo stanno utilizzando.
Amministratore
Noor
Articolo molto utile, grazie per l'aggiornamento
Liam
Ottimo tutorial. Qualcuno potrebbe mostrarmi un single.php funzionante con questo codice?
Sto ancora imparando il php.
Purtroppo
Errore di analisi: errore di sintassi, T_ENDIF inatteso in C:\xampplite\htdocs\mock\wp-content\themes\scwd\single.php alla riga 76
Staff editoriale
Ecco un esempio funzionante Flowtown Blog.
Nota che questo codice è così funzionerà all'interno del ciclo. Dove stai cercando di pubblicare questo? Se è al di fuori del ciclo, aggiungi semplicemente il codice end if endif; << in questo modo.
Amministratore
Liam
http://pastebin.com/m60c96f5f
Spero che il link funzioni. Grazie.
Staff editoriale
Non so cosa possa andare storto. Dopo la classe clearfloat dovrebbe funzionare bene. È così che l'abbiamo inserito in flowtown e funziona perfettamente.
Liam
Finirò il tema e lo proverò su un sito live invece che su xamp. Ti farò sapere.
Shahab
Bel tutorial!
Al momento sto usando YARPP ma mi piacerebbe provare questo!
Grazie
Suriya Kumar P
State facendo davvero un ottimo lavoro. Grazie mille.
Vivek @ InfoEduTech
Grazie per questo articolo. Sto cercando da molto tempo di mostrare le miniature con i miei articoli e non riesco a farlo. Ho provato molti plugin di WordPress ma non ci sono riuscito. Spero che questo possa aiutarmi.