Sélectionner une page

J’ai du mal avec l’espace de commentaire d’origine sous DIVI – Je le trouve ingrat… et vraiment pas sexy !

En cherchant une solution, je suis tombé sur cet article « Cleaner comments for your DIVI website » du site DiviSpace. Pour les anglophones, je vous invite fortement à y faire un tour.

Pour obtenir un espace de commentaire similaire à celui de Divi Rocket – Suivez le guide !

Désactivez les avatars

Je ne suis pas un fan des Avatars (la majorité des utilisateurs n’en ont pas), en plus je trouve le résultat sur mobile bien plus esthétique sans.

Pour les désactiver, rendez-vous sur le Back-Office de WordPress :
Réglages → Discussions → Désactivez « Afficher les avatars »

Changez les textes

Les traductions dans l’espace de commentaire de la version FR de DIVI ne sont pas trop à mon goût :

  • « Poster le commentaire »
  • « Réponse »

Pour changer les traductions, suivez ce tutoriel : « Traduire Divi en Français… En vrai Français ! »

Modifiez la balise H1 des commentaires

Lorsque des commentaires sont postés sur un article, un compteur en affiche le nombre suivi de la mention « Commentaire(s) ».

Je ne sais pas exactement pourquoi, mais cette information se trouve être une balise H1… Je suis du genre à aimer un code bien structuré pour le SEO – Il fallait donc supprimer cette abomination.

Copiez-collez le fichier « comments.php » de DIVI sur votre thème enfant et remplacez la ligne 13 <h1 id= »…. »</h1> par le code ci-dessous avec une balise <h2> :

<h2 id="comments" class="page_title"><?php comments_number( esc_html__( '0 Comments', 'Divi' ), esc_html__( '1 Comment', 'Divi' ), '% ' . esc_html__( 'Comments', 'Divi' ) ); ?></h2>

Modifiez le CSS

On peut maintenant passer au lifting !

Copiez-collez le code ci-dessous dans la feuille de style « style.css » de votre Thème Enfant.

NB : Le code est en grande majorité issu de l’article du site DiviSpace – J’y ai ajouté mes modifications pour matcher au mieux avec le « design » de Divi Rocket. À vous de modifier certaines propriétés pour obtenir le résultat qui vous intéresse.

Voici la liste des modifications que ce code va engendrer sur votre espace commentaire d’origine :

  • L’effet cascade est limité à la première réponse – Fini les discussions qui deviennent toutes petites lorsqu’il y a trop de réponses.
  • L’espace de commentaire est condensé – Plus esthétique et prend moins de place.
  • Le design des boutons est changé.
  • Pour les personnes souhaitant garder les avatars : Tous les avatars ont une forme circulaire et s’adaptent au format mobile + Les avatars des réponses sont plus petits par rapport à ceux des commentaires principaux.
/*-------------------------*/
/*--- COMMENTAIRES SEXY ---*/
/*-------------------------*/

/* Avatar de forme ronde */
.comment_avatar img {
    border-radius: 50%;
}

/* Media Query - Non appliqué aux mobiles */
@media (min-width: 768px) { body:not(.logged-in) #comment {max-width: 50%; float: right; margin-top: 14px; height: 159px; font-family: open sans; font-size: 14px;} /* Configuration de la boite message */
    .children .comment.depth-2 { margin-left: 30px;} /* Pour avoir un effet cascade uniquement sur la première réponse */
    .comment .children { margin-left: 0px; } /* Pour avoir un effet cascade uniquement sur la première réponse */
    .comment .children .comment_avatar img { max-width: 60px; } /* Plus petit avatar pour les réponses */
    .comment .children .comment_avatar { margin-left: 20px; } /** Garder les avatars des réponses à gauche **/
}

/* Media Query - Non appliqué aux desktops */
@media (max-width: 767px) {
    .comment-reply-link { bottom: -20px !important; top: auto !important; } /* Évite le chevauchement du bouton avec le texte */
    .comment_area { padding-bottom: 40px; } /* Évite le chevauchement du bouton avec le texte */
    .comment_avatar { max-width:50px } /* Petit avatar sur mobile */
    .comment_postinfo, .comment-content.clearfix { margin-left: -30px; } /* Les avatars restent à gauche */
}

/* Personnalisation des champs du formulaire */
#commentform textarea, #commentform input[type="text"], #commentform input[type="email"], #commentform input[type="url"] { 
    color: #666 !important;
    background-color: #f8f8f8 !important;
    font-size: 14px !important;
    font-family: open sans;
}

/* Réduire le padding au dessus de l'espace de commentaire */
#comment-wrap {
    padding-top: 40px;
}

/* Personnaliser les commentaires */
.comment-body {
    position: relative;
    min-height: 87px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    padding: 30px 190px 30px 30px;/* AVATARS : Changer le padding-left ICI */
}

/* Personnaliser le positionnement du bouton de réponse */
.comment_area .comment-reply-link {
    display: block;
    position: absolute;
    top: 30px;
    right: 30px;
    border-color: black;
    text-transform: uppercase;
}

/* Personnaliser le bouton de réponse */
.comment-reply-link {
    background: #000;
    font-size: 14px;
    color: #ffffff !important;
    letter-spacing: 0px;
    text-transform: uppercase;
    padding: 7px 15px;
    font-weight: bold;
    border-radius: 0px;
}

.comment-reply-link:hover {
    background: #f8f8f8;
    color: #000 !important;
    padding: 7px 15px;
}

/* Personnaliser le bouton de réponse */
.comment #respond {
    margin: -10px 0 20px 0;
}

/* Personnaliser le bouton d'envoi d'un commentaire */
.form-submit input {
    color: black;
    font-size: 16px;
    font-weight: bold;
    border-radius: 0px;
}

Voilà !

N’hésitez pas à me donner votre avis, à partager vos résultats, à m’indiquer si vous trouvez un bug ou une erreur dans cet article :).