Il est très important de montrer à vos visiteurs d’autres article en relation » related posts » à lire ou à explorer afin de diminuer le taux de rebond de votre site d’un cote et de l’autre cote pour faire des liens interne ce qui est bon pour le seo. Dans ce petit tutoriel on va savoir comment ajouter des liens vers des articles en relation avec la catégorie de l’article en cours.
Pour faire ajouter à la fin du fichier fonction.php de votre thème enfant :
/** Display related posts in Genesis based on Category */
function related_posts_categories() {
if ( is_single ( ) ) {
global $post;
$count = 0;
$postIDs = array( $post->ID );
$related = '';
$cats = wp_get_post_categories( $post->ID );
$catIDs = array( );{
foreach ( $cats as $cat ) {
$catIDs[] = $cat;
}
$args = array(
'category__in' => $catIDs,
'post__not_in' => $postIDs,
'showposts' => 10,
'ignore_sticky_posts' => 1,
'orderby' => 'rand',
'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'
)
)
);
$cat_query = new WP_Query( $args );
if ( $cat_query->have_posts() ) {
while ( $cat_query->have_posts() ) {
$cat_query->the_post();
$related .= '
<li><a href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to' . get_the_title() . '">' . get_the_title() . '</a></li>
';
}
}
}
if ( $related ) {
printf( '
<div class="related-posts">
<h3 class="related-title">Cela devrait aussi vous intéresser :</h3>
<ul class="related-list">%s</ul>
</div>
', $related );
}
wp_reset_query();
}
}
add_action( 'genesis_after_entry_content', 'related_posts_categories' );
Ce code va afficher des article en relation basés sur le catégorie.
Ensuite dans votre fichier style.css du thème enfant ajouter ce code :
/* - related post -*/
.related-list li {
list-style-type: circle;margin-left: 15px;
}
.related-posts {
margin: 40px 0;
}
.related-posts h3 {
color: #d64937;
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
background-color: #fdfdfd;
padding: 10PX;
BORDER-left: 2PX SOLID;
margin-right: -30PX;
margin-left: -30px; margin-top: -40px;
}
.related-posts ul {
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
background-color: #fdfdfd;
padding: 30px;
border-left: 2px solid #34678a;
margin-right: -30PX;
margin-left: -30PX;
}
.related-posts ul li {
padding: 2px 0;
border-bottom: 1px dashed #ccc;
}
.related-posts ul li a{
font-size:16px;
}
.related-posts ul li a:hover{
color: #FF0000;
}
}
C’est tout, vider le cache de votre site pour voir le résultat final.
