Afficher les articles similaires (related post) en grille pour genesis

Dans un autre tuto, je vous ai montré comment afficher les articles similaires sans utiliser de plugin . Aujourd’hui on va apprendre comment Afficher les articles similaires sous forme de grilles (grid ) pour le fameux thème Genesis . Sridhar Katakam a déjà écrit un post sur la façon d’afficher les messages liés avec des thumnails dans Genesis. Dans ce post, j’utiliserai essentiellement le même code pour functions.php avec quelques ajustements pour ajouter la fonction d’affichage de la grille. De plus, je vais ajouter un peu de code CSS pour .

Veuillez noter que nous afficherons trois articles en relation dans cette démonstration. Cependant, vous êtes libre d’afficher un nombre illimité d’articles en relation (related post), à condition qu’ils soient compatibles avec votre thème existant et qu’ils aient un sens pour vos lecteurs.

Articles similaires sans vignettes vs en format de grille

Maintenant voici comment afficher les articles en relation sous forme de grille dans votre thème Genesis:

Ajouter le code suivant dans le fichier function.php de  votre thème enfant (child theme):

//* Populate Related Posts in Genesis based on Category // https://sridharkatakam.com/related-posts-with-thumbnails-in-genesis-reloaded/

add_action( 'genesis_after_entry_content', 'sk_related_posts', 12 );



function sk_related_posts() { global $do_not_duplicate;



if ( ! is_singular ( 'post' ) ) { return; }



$count = 0; $related = ''; $do_not_duplicate = array(); $cats = wp_get_post_categories( get_the_ID() );





// If we have some categories and less than 5 posts, run the cat query.

if ( $cats && $count <= 4 ) { $query = sk_related_cat_query( $cats, $count ); $related .= $query['related']; $count = $query['count'];}



// End here if we don't have any related posts.

if ( ! $related ) { return; }



// Display the related posts section.

echo '
<div class="related-posts">
';

echo '
<h3 class="related-title">Related Posts</h3>

';

echo '
<div class="related-posts-list" data-columns>' . $related . '</div>

';

echo '</div>

';


}


function sk_related_cat_query( $cats, $count ) {



global $do_not_duplicate;



if ( ! $cats ) {

return;

}



$postIDs = array_merge( array( get_the_ID() ), $do_not_duplicate );



$catIDs = array();



foreach ( $cats as $cat ) {

if ( 3 == $cat ) {

continue;

}

$catIDs[] = $cat;

}



$showposts = 3 - $count;



$tax_query = array(

array(

'taxonomy' => 'post_format',

'field' => 'slug',

'terms' => array( 'post-format-link', 'post-format-status', 'post-format-aside', 'post-format-quote' ),

'operator' => 'NOT IN'

)

);

$args = array(

'category__in' => $catIDs, 'post__not_in' => $postIDs, 'showposts' => $showposts, 'ignore_sticky_posts' => 1, 'orderby' => 'rand', 'tax_query' => $tax_query,

);



$related = '';



$cat_query = new WP_Query( $args );



if ( $cat_query->have_posts() ) {

while ( $cat_query->have_posts() ) {

$cat_query->the_post();



$count++;



/*$title = genesis_truncate_phrase( get_the_title(), 35 );*/

$title = get_the_title();



$related .= '
<div class="one-third">
';

$related .= '<a class="related-image" href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to ' . $title . '">' . genesis_get_image( array( 'size' => 'related' ) ) . '</a>';

$related .= '
<div class="one-copy">';

$related .= '<a class="related-post-title" href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to ' . $title . '">' . $title . '</a>';

$related .= '</div>

';

$related .= '</div>

';



}

}



wp_reset_postdata();



$output = array( 'related' => $related, 'count' => $count );



return $output;



}

Ensuite ajoutez le code suivant à votre fichier CSS.

.related-posts {
border-top: 1px solid #ccc;
padding-top: 40px;
}

.related-posts-list .one-third {
border: 1px solid #dde5ea;
border-radius: 5px;
box-sizing: border-box;
box-shadow: 2px 1px 10px 0 rgba(0, 0, 0, .1);
}

.related-posts-list .one-third:first-child {
margin-left: 0;
}

a.related-post-title {
line-height: 27px;
color: #333;
font-size: 18px;
}

.one-copy {
padding: 1.5rem 1.25rem 1.75rem;
}

C’est tout vous pouvez voir le résultat sur votre blog, si vous avez un plugin de cache installé sur votre site n’oublier pas de supprimer le cache.

Notez bien : si vous voulez afficher plus de 3 articles similaire changer le valeur suivante de 3 à un nombre de votre choix:

$showposts=3