Come in molti siti web, a fine articoli si trovano una lista di articoli correlati.
Se si vuole un metodo veloce ci sono vari plugin disponibili (Articolo di wpbeginner.com), in questo caso ho voluto provare a implementarlo via codice.
Codice
Partendo dall’implementazione di un child-theme del tema twenty twenty-one, ho aggiunto, copiando il file nel child theme, il file: template-parts/content/content.single.php alla riga 39, dopo il tag </footer>, il seguente codice:
<div class="default-max-width">
<?php do_action( 'wp_personalHook_CorrelateArticle', get_the_ID()); ?>
</div>
In questo modo aggiungo soltanto poche righe far aggiungere la lista di articoli correlati.
In function.php del tema, ho aggiunto il seguente codice:
<?php
function correlateArticleHTML($recent_posts)
{
if($recent_posts->found_posts>0)
{
//To control if there aren't any of relative post
?>
<div class="CorrelateArticle">
<div class="Title">
Articoli correlati:
</div>
<?php
?>
<div class="link">
<?php
while ( $recent_posts->have_posts() ) {
$recent_posts->the_post();
echo '<li class="notShowDotOfLi"><a href="'.post_permalink().'">' . get_the_title() . '</a></li>';
}
wp_reset_postdata();
?>
</div>
</div>
<?php
}
}
function functionWp_personalHook_CorrelateArticle($Id)
{
$posttags = get_the_tags($Id);
$categories = get_the_category($Id);
if ($posttags || $categories) {
//To show only if there are some tag or category
$tag_ids = array();
foreach( $posttags as $tag ) {
$tag_ids[] = $tag->term_id;
}
$cat_ids = array();
foreach( $categories as $cat ) {
$cat_ids[] = $cat->term_id;
}
$recent_posts = new WP_Query(
array(
'tag__in' => $tag_ids,
'orderby' => 'rand',
'posts_per_page' => 3,
'post__not_in' => array ($Id),
'category__in' => $cat_ids
)
);
correlateArticleHTML($recent_posts);
}
}
add_action('wp_personalHook_CorrelateArticle', 'functionWp_personalHook_CorrelateArticle',10,1);
La funzione correlateArticleHTML serve a mostrare l’output generato dalla funzione functionWp_personalHook_CorrelateArticle, che prende l’id dell’articolo che è mostrato e produce, attraverso i tag e le categorie qualche post correlato.
Grafica
Per migliorare la grafica, almeno per evidenziare meglio il box, ho aggiunto il seguente CSS:
.notShowDotOfLi
{
list-style-type:none;
}
.CorrelateArticle
{
background-color: rgba(255, 255, 255, 0.4);
padding: 10px;
border-radius: 10px;
}
.CorrelateArticle .Title
{
font-weight: bold;
}
.CorrelateArticle .link
{
padding-left: 20px;
}
Conclusione
Questo è un semplice esempio, non è possibile usarlo senza modificare il tema, ma altre soluzioni che ho trovato implicavano l’uso dell’hook del the_content, efficace per qualsiasi tema in generale senza conoscere la struttura.