Articoli correlati su Twenty twenty-one tema (WordPress)

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.