• Passer à la navigation principale
  • Passer au contenu principal
  • Passer à la barre latérale principale
Wpcours

Wpcours

Des tuto, thèmes et plugins pour Wordpress

  • WORDPRESS
  • TUTORIELS
  • PLUGINS
  • WP-SEO
  • THEMES
  • Blogger
  • Contact
Accueil » Tutoriels » Ajouter « related post » à Genesis thème enfant sans plugin

Ajouter « related post » à Genesis thème enfant sans plugin

Màj le 3 novembre 2018

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 :

related post

/** 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.


Plus de cours et exercices corrigés :

  • Optimiser Fontawesome en supprimant les icônes inutiles
  • Ajouter ads.txt à votre site pour augmenter vos revenus Adsense
  • Comment corriger l’erreur «Failed To Load Resource» dans WordPress
  • Comment ajouter une pagination à vos commentaires Wordpress
  • Créer un bloc réutilisable dans WordPress Block éditeur (Gutenberg)

Interactions du lecteur

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Barre latérale principale

Ne manquez plus rien
Abonnez-vous

Abonnez-vous dès maintenant à la Newsletters de Wpcours et recevez des cours et exercices corrigés Gratuitement.

Articles récents

  • Limiter la longueur minimale et maximale ‎de vos commentaires sous Wordpress
  • Antispam Bee : meilleure configuration à faire
  • 7 outils numériques pour organiser votre travail
  • Top 4 meilleurs plugins RSVP gratuits pour WordPress
  • Comment utiliser des images WebP sur WordPress pour accélérer votre site

© 2022 ·Wpcours.com · Mentions · Contact