Warning: Undefined array key "tbm_guide_level" in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Trying to access array offset on value of type null in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Undefined array key "tbm_guide_level" in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Trying to access array offset on value of type null in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113
Articoli correlati in WordPress senza plugin | HTML.it
Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
Aree
learn
About

Articoli correlati in WordPress senza plugin

Inseriamo una lista di post correlati nei nostri articoli WordPress senza usare plugin
Inseriamo una lista di post correlati nei nostri articoli WordPress senza usare plugin
Valentina Bossini
Pubblicato il 18 lug 2012
Link copiato negli appunti

Come abbiamo visto su "Articoli correlati in WordPress: i migliori plugin", mostrare gli articoli correlati all'interno di un post è una funzione interessante e utile anche per tenere i visitatori nel proprio sito. Per esempio una persona che arriva nel sito cercando una ricetta fatta con il pollo molto probabilmente sarà interessata a leggere anche altre ricette con gli stessi ingredienti. WordPress non presenta in modo nativo una funzionalità del genere, ma esistono molte soluzioni diverse per questo tipo di esigenze.

Nel caso in cui non volessimo utilizzare plugin, per fortuna con poche righe di codice e anche senza conoscenze di PHP possiamo inserire una lista di articoli correlati utilizzando delle semplici funzioni.

Inserire articoli correlati senza l'uso di plugin

Per fare questo dobbiamo andare ad aprire il file ../wp-content/themes/$TEMA_UTILIZZATO/single.php del tema che stiamo utilizzando e inserire, in una parte a piacere, questo pezzo di codice:

Funzione PHP per gli articoli correlati in WordPress

Articoli correlati

Il valore di posts_per_page indica il numero di post da inserire nella lista, in questo caso abbiamo 3.

Personalizzazione degli articoli correlati usando il CSS

È possibile anche dare ai nostri articoli correlati una formattazione CSS diversa da quella di default e per farlo dobbiamo modificare il file ../wp-content/themes/$TEMA_UTILIZZATO/style.css del tema WordPress utilizzato, per esempio in questo modo:

Modifica dell'estetica dei post correlati tramite CSS

#articoli-correlati{margin:10px 0px;padding:10px;border:1px solid #E5E5E5}
#articoli-correlati h3{font-size:13px;font-weight:bold}
#articoli-correlati ul li{list-style-type:none;font-size:13px}
#articoli-correlati a:link{color:#595959}
#articoli-correlati a:hover{color:#8F8F8F}

Salvate le modifiche ai file avremo un risultato come quello in figura.

Figura 1. Post correlati in WordPress senza l'utilizzo di plugin
Post correlati senza l'utilizzo di plugin

Personalizzare l'ordinamento degli articoli correlati

È possibile inoltre ordinare la lista dei post aggiungendo "orderby" nell'array degli argomenti:

Utilizzo di "orderby" per l'ordinamento degli articoli

$args = array(
        'tag__in' => $tag_ids, 
        'post__not_in' => array($post->ID), 
        'orderby'=> 'rand', 
        'posts_per_page'=>3)
    );

Orderby può assumere dei valori diversi:

  • rand: ordine randomico;
  • date: ordine dei post per data;
  • modified: ordine secondo la data di modifica;
  • author: ordine dei post per autore;
  • title: ordine per titolo;
  • ID: ordine secondo l'ID;

    • Se questo parametro non viene specificato l'ordinamento di default è quello per data. In ogni caso è un ordine ascendente.

    Correlazione degli articoli in WordPress per categoria

    Se vogliamo creare in WordPress una lista dei post correlati per categorie comuni, dobbiamo cambiare il codice visto prima nel seguente modo:

    Funzione PHP per la correlazione di articoli in base alla categoria

    Articoli correlati:

      '; while ($query->have_posts()) { $query->the_post(); ?>
'; } } wp_reset_query(); ?>

Come possiamo ben notare il codice assomiglia molto al caso precedente. Nella pratica viene controllato se l'articolo appartiene a una o a più categorie, viene definito l'array degli argomenti che viene passato alla classe WP_Query (che è definita dentro il file ../wp-includes/query.php) e infine viene costruita la lista.

Personalizzare il box degli articoli correlati con il CSS

Supponiamo adesso di cambiare lo stile del nostro box contenente gli articoli correlati. Modifichiamo il codice nel punto dove viene inserito il titolo, in questo modo:

Inserimento della nuova classe CSS

Articoli correlati:

Mentre aggiungiamo nel file style.css questi stili:

Stili CSS per il box degli articoli correlati in WordPress

.related {
    width:400px;
	height:auto;
	margin:0;
	padding:1px;
	border-color:#336699;
	border-style:solid;
	border-width:2px;

}
.related li{
	list-style-image: url(pallino_azzurro.gif);
    padding:0 0 5px 0;
}

#ArtCorr {
width:400px;
height:50px;
margin:0;
padding:0;
background-image:url(img.jpg);
background-position:top;
background-repeat:no-repeat;
}

#ArtCorr h3 {
margin:0;
padding:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
font-style:italic;
color:#336699;
}

Se proviamo otterremo un risultato come in figura.

Figura 2. Articoli correlati per categoria con nuovo CSS
Articoli correlati per categoria con nuovo CSS WordPress

Aggiungiamo le immagini e l'autore nella lista

Se invece vogliamo inserire nella lista delle thumbnail, dobbiamo aggiungere, sempre nel file single.php, questo pezzo di codice all'interno del tag "li" della lista dei post:

Visualizzazione delle thumbnail nella lista

In questo modo saranno visualizzate le thumbnail con dimensione 50x50. Se non sono installati plugin di gestione delle thumbnail per WordPress saranno aggiunte, se ci sono, le immagini che sono inserite come "in evidenza" nell'articolo.Per aggiungere la nostra immagine dobbiamo aprire l'articolo che ci interessa, cliccare sulla voce "Imposta immagine in evidenza" e sceglierne una presente tra i media oppure caricarla dal nostro computer.

Dopo aver aggiunto quel codice, supponiamo di utilizzare questo CSS (da inserire nel file style.css del nostro template):

CSS per la gestione delle immagini nella lista dei post correlati

.related li{
	list-style-image: url(pallino_azzurro.gif);
    padding:0 0 5px 0;
	height: 55px;
}

.related img{
	height: 50px;
	width: 50px;
	margin: -2.5% 10px;
float:left;
}

.related h3{
	height: 50px;
	width: auto;
font-size:24px;
}

Il risultato che otteniamo è come quello in figura.

Figura 3. Aggiunta delle immagini nella lista dei post correlati
Aggiunta delle immagini nella lista dei post correlati

Infine vediamo cosa dobbiamo inserire per visualizzare anche il nome dell'autore. Anche questa è un'operazione semplice: basta aggiungere dentro il tag "li" qualcosa come:

Aggiunta dell'autore degli articoli correlati

(autore: )

Avremo così tra parentesi il nome dell'autore dell'articolo, come in figura.

Figura 4. Lista degli articoli correlati con immagine e autore
Lista degli articoli correlati in WordPress con immagine e autore
Indice lezioni

Ti consigliamo anche

CMS

I migliori CMS per e-commerce a confronto
CMS

Ottimizzare il database di WordPress, guida pratica
CMS

WordPress: pagina Contatti personalizzata con Elementor
CMS

Un footer personalizzato con WordPress ed Elementor