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.
Se invece desideri maggiore flessibilità e la possibilità di inserire post correlati all’interno del contenuto dei tuoi articoli, puoi dare un’occhiata al plugin che ho sviluppato 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.
Inoltre, utilizzando il seguente coupon WIP-20, riceverai uno sconto del 20% su tutti i e 3 i piani disponibili (Valido fino al 31 Gennaio)