Come aggiungere post correlati in WordPress

Quando si pubblica un nuovo articolo su WordPress, è utile fornire ai tuoi lettori contenuti aggiuntivi che possano essere risultare interessanti.

Una delle possibili soluzioni è quella di aggiungere una sezione di post correlati alla fine di ogni articolo, questo può rivelarsi utile anche per cercare di ridurre la frequenza di rimbalzo sul tuo blog.

In questa nuova guida, vedremo come possiamo aggiungere questa funzionalità senza andare ad installare plugin dedicati, ma realizzandone uno da zero.

Prima di iniziare, vediamo come funzionerà il processo:

• Recupero di categorie e tag di appartenenza: come prima cosa sarà necessario recuperare le categorie e i tag assegnati all’articolo corrente. Questi elementi saranno la base per determinare quali post sono correlati all’argomento trattato.
• Utilizzo della funzione get_posts(): dopo aver ottenuto categorie e tag, la funzione get_posts() andrà a restituire gli ID di tutti gli altri post che condividono la stessa categoria o tag di appartenenza dell’articolo corrente.
• Generazione degli articoli correlati: grazie all’utilizzo di un ciclo foreach, tutti gli ID recuperati in precedenza verranno utilizzati per ottenere i dettagli di ogni articolo, come il titolo oppure l’immagine in evidenza.

La funzione che andremo a scrivere, verrà agganciata al filtro the_content, così da mostrare i post correlati alla fine di ogni articolo di WordPress.

Creazione di un nuovo plugin

Come prima cosa, crea una nuova cartella all’interno della directory wp-content/plugins e rinomina questa cartella come preferisci, nel mio caso utilizzerò wip-post-correlati

Al suo interno aggiungi un nuovo file init.php in cui dovrai inserire l’intestazione del nostro plugin.

<?php

/*
Plugin Name: WIP post correlati
Version: 1.0
Plugin URI: https://www.wpinprogress.com/
Description: WIP post correlati
Author: WPinProgress
Text Domain: wpc
Domain Path: /translation
*/

Recupero di categorie e tag di appartenenza

Successivamente dovremo scrivere la funzione che verrà agganciata al filtro the_content()

/**
* Aggiungi post correlati
*/

if (!function_exists('wpc_inserisci_post_correlati')) {

	function wpc_inserisci_post_correlati($content) {
		

Effettua un controllo per attivare il codice solamente quando un utente si trova all’interno di un articolo

if ( 
	is_single()
) :

Ora recupera le categoria e tag di appartenenza dell’articolo

global $post;

$postID = $post->ID;

$catsArray = array();
$tagsArray = array();

foreach (get_the_category($postID) as $cat) {
	$catsArray[] = $cat->term_id;
}

foreach (wp_get_post_tags($postID) as $tag) {
	$tagsArray[] = $tag->term_id;
}

Grazie alla funzione get_posts(), andremo a recuperare gli ID di tutti gli articoli presenti nella stessa categoria o tag di appartenenza del post corrente ottenuti in precedenza.

$args = array(
	'post_type' => 'post',
	'posts_per_page' => 3, /* recupero solo 3 post */
	'post_status' => 'publish',
	'orderby' => 'date', /* se preferisci puoi usare title, per ordinare i post per titolo */
	'order' => 'desc',
	'fields' => 'ids',
	'exclude' => array($postID), /* escludiamo il post corrente dalla lista dei post correlati */
	'tax_query' => array(
		'relation' => 'OR',
		 array(
			'taxonomy' => 'category',
			'field' => 'term_id',
			'terms' => $catsArray,
			'operator' => 'IN'
		 ),
		 array(
			'taxonomy' => 'post_tag',
			'field' => 'term_id',
			'terms' => $tagsArray,
			'operator' => 'IN'
		 )
					 
	)
);

$relatedPosts = get_posts($args);

Verifica il numero di post correlati trovati, se non ce ne sono, restituisci solamente il contenuto dell’articolo, altrimenti aggiungi l’HTML del contenitore ed utilizza la funzione wpc_genera_post_correlati() per generare la struttura di ogni singolo post correlato.

if ( count($relatedPosts) <= 0 ) {
	
	return $content;
	
} else {

	$relatedHTML = '<div class="related-posts">';

		$relatedHTML .= '<h3>';
		$relatedHTML .= esc_html__('Potrebbe anche interessarti', 'wpc');
		$relatedHTML .= '</h3>';

		foreach ( $relatedPosts as $related ) {

			$relatedHTML .= '<section>';
			$relatedHTML .= wpc_genera_post_correlati($related);
			$relatedHTML .= '</section>';

		}

	$relatedHTML .= '</div>';

	return $content . $relatedHTML;

}

Aggiungi l’istruzione else in modo da restituire il contenuto senza alterarlo (ad esempio quando un utente sta visualizzando un qualsiasi contenuto che non sia un articolo di WordPress)

Infine, dopo aver chiuso la condizione if, aggancia la funzione che abbiamo appena creato al filtro the_content

		else :

			return $content;

		endif;
		
	}

	add_filter('the_content', 'wpc_inserisci_post_correlati');

}

Generazione degli articoli correlati

Nel punto precedente è stata aggiunta la funzione wpc_genera_post_correlati(), a cui viene passato l’ID di ogni post correlato, così da generarne l’HTML.

In questo modo possiamo utilizzare le funzioni native di WordPress per ottenere il titolo, il permalink oppure l’immagine in evidenza.

/**
* Visualizza post correlato
*/

if (!function_exists('wpc_genera_post_correlati')) {

	function wpc_genera_post_correlati($postID) {
	
		$excerpt = wp_trim_words(get_the_content($postID), 10 , '...' );
	
		$html = '';
	
		$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($postID), 'large');
	
		$imgBgStyle = (isset($thumb[0])) ? 'style="background-image:url(' . esc_url($thumb[0]) . ')"' : '';
			
		$html .= '<div class="related-post-inner" ' . $imgBgStyle . '>';
	
			$html .= '<a title="' . esc_attr(get_the_title($postID)) . '" class="related-posts-permalink" href="' . esc_url(get_permalink($postID)) . '"></a>';
	
			$html .= '<div class="related-posts-details">';
	
				$html .= '<div class="related-post-inner-details" style="display:block">';
	
					$html .= '<h3>' . esc_html(get_the_title($postID)) . '</h3>';
	
				$html .= '</div>';
	
			$html .= '</div>';
	
		$html .= '</div>';
	
		return $html;
	
	}
	
}

Collega un foglio di stile per personalizzare l’aspetto dei post correlati

Adesso dovrai includere un foglio di stile per personalizzare il layout dei post correlati.

/**
* Includi foglio di stile
*/

if (!function_exists('wpc_wp_enqueue_scripts')) {

	function wpc_wp_enqueue_scripts() {
	
		wp_enqueue_style (
			'wpc_style',
			plugins_url('/css/style.css', 
			__FILE__ ), 
			array(), 
			null
		);
	
	}
	
	add_action('wp_enqueue_scripts', 'wpc_wp_enqueue_scripts' );

}

?>

Personalizza l’aspetto dei post correlati

Crea una nuova cartella css all’interno della directory del plugin ed aggiungi il file style.css, al suo interno incolla il seguente codice:

.related-posts section {
    display: inline-block;
    width: 33%;
    margin-right: 0.5%;
}

.related-posts h3 {
    line-height: 45px;
    margin: 45px 0;
    text-align: center;
}

.related-posts section .related-posts-details {
    -moz-transition: outline 0.5s ease;
    -o-transition: outline 0.5s ease;
    -ms-transition: outline 0.5s ease;
    transition: outline 0.5s ease;
    outline: dotted 1px transparent;
	text-align:center
}

.related-posts section:last-of-type {
    margin-right: 0;
}

.related-posts section .related-posts-permalink:hover + .related-posts-details ,
.related-posts section .related-posts-permalink:focus + .related-posts-details {
    outline: dotted 1px red;
}

.related-post-inner {
	height:280px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.related-post-inner h3 {
	font-size: 19px;
    font-weight: 600;
    line-height: 24px;
    margin: 0 0 9px;
    color: #fff;
    text-align: center;
}

.related-post-inner .related-posts-details {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
	margin:0;
}

.related-post-inner .related-posts-details:before {
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    opacity: .3;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.3) 30%, rgba(143,143,143,0.4) 50%, rgba(0,0,0,0.6) 100%);
    -moz-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}

.related-post-inner .related-post-inner-details {
    position: absolute;
    width: 100%;
    bottom: 15px;
    color: #fff;
    padding: 0 20px;
}

.related-posts-permalink {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
	z-index:999;
}

.related-post-inner .related-posts-permalink:hover + .related-posts-details:before,
.related-post-inner .related-posts-permalink:focus + .related-posts-details:before {
	opacity: 0.5;
	-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity= 50);
	filter: alpha(opacity= 50);
}

Conclusioni

Una volta che avrai completato ed attivato il plugin, dovresti visualizzare un qualcosa di simile alla fine di ogni articolo in cui sono disponibili post correlati.

Se lo desideri, puoi modificare il codice css oppure la struttura HTML dei post correlati per aggiungere altri elementi, come il riassunto del post oppure mostrare la categoria di appartenenza del post correlato.

Plugin WordPress per aggiungere post correlati

Se invece cerchi un plugin già pronto per l’inserimento dei post correlati nel tuo sito WordPress, puoi dare un’occhiata ai due plugin che ho sviluppato.

TIP Related Posts Pro

Questo plugin permette di ottenere un risultato molto simile a questo tutorial, selezionando il layout Hero dalle impostazioni, disponibile anche nella versione gratuita, che puoi scaricare da WordPress.org, oppure direttamente dal seguente link.

Il recupero dei post correlati avviene in base alla categoria di appartenenza dell’articolo corrente, oppure in base al tag di appartenenza, se viene abilitato dalle impostazioni del plugin come motore di ricerca interno.

La versione premium invece, risulta essere molto più completa ed avanzata.

Oltre ad un layout aggiuntivo, alla possibilità di utilizzare un carosello scorrevole oppure di scegliere su quali dispositivi caricare i post correlati.

Grazie alla versione premium potrai utilizzare sistemi più avanzati per recuperare gli articoli correlati, combinando categorie e tag, in base al titolo dell’articolo corrente oppure impostando delle parole chiave ad ogni contenuto, che ti permetteranno un’accuratezza dei suggerimenti più elevata.

Ma sopratutto potrai utilizzare un sistema di intelligenza artificiale (non disponibile nel piano Personal), grazie alle API di OpenAI oppure, per gli utenti avanzati, tramite Ollama (dovrai però esporre pubblicamente la macchina locale, visti i costi estremamente bassi per l’utilizzo dei modelli di embeddings, è preferibile utilizzare direttamente i crediti di OpenAI)

Inoltre è presente un sistema di statistiche opzionale, che terrà traccia di ogni click effettuato dagli utenti sui post correlati aggiunti dal plugin.

Questo ti permetterà di sapere quali sono i post che i tuoi lettori ritengono più interessanti.

Internal Linking of Related Content

Se invece preferisci aggiungere post correlati in linea, ovvero all’interno del contenuto, ti suggerisco il secondo plugin Internal Linking of Related Contents, di cui è disponibile anche una versione gratuita.

Dopo l’installazione, il plugin inserirà automaticamente gli articoli correlati all’interno dei tuoi contenuti, in base alle impostazioni scelte.

A differenza di altri plugin che raggruppano tutti i post correlati alla fine dell’articolo, questo plugin, andrà ad inserire un singolo articolo correlato dopo un numero predefinito di paragrafi, come, ad esempio, dopo ogni secondo paragrafo.

La versione Premium, oltre ad utilizzare l’intelligenza artificiale (non disponibile nel piano Personal) per recuperare i post più pertinenti e ad un sistema di statistiche sui click, permette di vedere quanti link interni sono stati generati dal plugin, direttamente nella lista di articoli

Come ottenere uno sconto del 15%

Per acquistare uno dei due plugin con uno sconto del 15% sul prezzo finale, utilizza il seguente codice coupon BVJN-PTDS-NIZW, valido per entrambi i plugin.

Dovrai aggiungere il coupon durante l’acquisto su ThemeinProgress

Se dovessi cambiare idea, avrai a disposizione 30 giorni per richiedere un rimborso completo dell’acquisto.