Comment styliser la mise en page de vos commentaires WordPress

Récemment, nous vous avons affiché comment styliser le formulaire de commentaires WordPress, et nous avons pensé qu’il serait incomplet si nous n’écrivions pas sur le stylisme de la mise en page des commentaires WordPress. Dans le passé, nous avons discuté du fait qu’il existe des classes CSS générées par WordPress par défaut et des ID pour aider les concepteurs de thèmes à styliser plus facilement leurs modèles. Dans cet article, nous allons utiliser ces classes par défaut pour vous afficher comment styliser la mise en page des commentaires de WordPress et quelques unes des choses sympas que vous pouvez faire avec.

Pour les besoins de cet exemple, nous modifierons le thème par défaut Twenty Twelve WordPress dans cet article. Note : Cet article s’adresse aux concepteurs de thèmes débutants et aux utilisateurs/utilisatrices qui ont une bonne compréhension du HTML et du CSS.

Classes de commentaires par défaut de WordPress

Par défaut, WordPress génère ces classes pour les éléments du Modèle de commentaires :

/*Comment Output*/

.commentlist .reply {}
.commentlist .reply a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {} 
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}
#cancel-comment-reply a {}

Comment trouver les classes CSS à modifier ?

Avant de passer à la mise en page des commentaires WordPress, une petite astuce pour nos utilisateurs/utilisatrices nouveaux. Les navigateurs Google Chrome et Mozilla Firefox disposent d’un outil pratique que vous pouvez utiliser pour améliorer vos compétences en matière de développement de thèmes WordPress. Cet outil s’appelle Inspecter l’élément. Il vous suffit de placer votre souris sur un élément d’une page web, de cliquer avec le bouton droit de la souris et de choisir Inspecter l’élément. La fenêtre de votre navigateur se divisera en deux lignes et dans la fenêtre inférieure, vous verrez le code source de cet élément. Dans la fenêtre inférieure, vous pourrez également voir les éléments CSS et la façon dont ils sont stylisés. Vous pouvez même modifier le CSS dans cette fenêtre à des fins de test. Il est important de se rappeler que tout ce que vous modifiez à l’aide de l’outil d’inspection est uniquement visible pour vous. Dès que vous actualisez la page, ces modifications disparaissent. Pour rendre les modifications permanentes, vous devez utiliser votre fichier style.css ou d’autres fichiers appropriés dans vos thèmes.

Ajout de couleurs d’arrière-plan paires et impaires pour les commentaires

Avoir une couleur d’arrière-plan différente pour les commentaires pairs et impairs est une tendance de conception qui existe depuis quelques années maintenant. Cela aide à la lisibilité, en particulier si vous avez beaucoup de commentaires. Elle s’accorde également très bien avec certaines couleurs de thème, c’est pourquoi de nombreux concepteurs souhaitent utiliser cette fonctionnalité. Pour aider les concepteurs à atteindre cet objectif, WordPress ajoute une classe paire et une classe impaire à chaque commentaire.

Vous pouvez facilement ajouter le style pair/impair pour les commentaires dans le style.css de votre thème en collant le code suivant.

.commentlist .even .comment { 
background-color:#ccddf2; 
} 
.commentlist .odd .comment {
background-color:#CCCCCC;
}

Le résultat ressemblerait à ceci :

Stylisation de l’auteur/autrice du commentaire et des méta-informations

WordPress ajoute également des classes aux éléments affichés dans chaque en-tête de commentaire. Cela permet aux auteurs/autrices de personnaliser l’affichage des informations sur l’auteur/autrice et d’autres méta-commentaires tels que la date et l’heure du commentaire. Voici un exemple de code à coller dans le fichier style.css de votre thème pour styliser ces éléments différemment. Dans cet exemple, nous avons ajouté une couleur d’arrière-plan aux méta-commentaires ainsi qu’un certain espacement.

.comments-area article header {
	margin: 0 0 48px;
	overflow: hidden;
	position: relative;
	background-color:#55737D;
	color:#FFFFFF;
	padding: 10px;
}

Voici à quoi cela devrait ressembler :

Styliser différemment les auteurs/autrices des commentaires de publication

Il arrive souvent que les commentaires des auteurs/autrices de publications soient mis en valeur par une couleur d’arrière-plan différente ou par un badge supplémentaire. WordPress ajoute une classe par défaut bypostauthor à tous les commentaires faits par l’auteur/autrice de la publication. Les auteurs/autrices de thèmes WordPress peuvent utiliser cette classe pour styliser différemment les commentaires des auteurs/autrices de publications.

Certains thèmes utilisent leur propre fonction de rappel pour afficher les commentaires. En utilisant la fonction de rappel, ces thèmes peuvent ajouter des informations supplémentaires à un commentaire par auteur/autrice de l’article. Par exemple, Twenty Twelve utilise la ligne suivante dans la fonction de rappel des commentaires twentytwelve_comment() (située dans le fichier functions.php du thème).

// If current post author is also comment author, make it known visually.

( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Post author', 'twentytwelve' ) . '</span>' : '' );

Ce code ajoute <span>Post Author</span> aux méta-informations du commentaire. Selon la façon dont votre thème WordPress commente les auteurs/autrices des publications, vous pouvez modifier ce code à votre guise.

Si vous utilisez un thème différent de Twenty Twelve, vous devez trouver comment votre thème gère les commentaires. Ouvrez simplement le fichier comments.php de votre thème. Si votre thème utilise sa propre fonction de rappel, vous la verrez à l’intérieur de la fonction wp_list_comments, comme ceci :

<?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?>

Dans l’exemple ci-dessus, vous pouvez voir que le thème utilise twentytwelve_comment comme fonction de rappel. Si une fonction de rappel est spécifiée, l’Emplacement le plus probable pour trouver cette fonction est le fichier functions.php de votre thème.

Dans cet exemple, nous modifions cette fonction pour qu’elle affiche l’éditeur au lieu de l’auteur/autrice de la publication. Pour ce faire, nous avons modifié la fonction de rappel des commentaires comme suit :

// If current post author is also comment author, make it known visually.

( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Editor', 'twentytwelve' ) . '</span>' : '');

Nous allons également modifier son apparence en ajoutant ce qui suit dans le fichier style.css de notre thème comme ceci :

li.bypostauthor cite span {
	color: #21759b;
	background-color: #f8f0cb;
	background-image: none;
	border: 1px solid #f8f0cb;
	border-radius: 3px;
	box-shadow: none;
	padding: 3px;
	font-weight:bold;
}

Voici à quoi cela ressemblerait :

Modifier le lien de réponse des commentaires dans les commentaires WordPress

La plupart des thèmes WordPress proposent un lien de réponse sous chaque commentaire. Cette fonctionnalité est uniquement affichée si vous avez activé les commentaires en filigrane. Pour activer le fil de commentaires, allez dans l’administration de WordPress(Réglages  » Discussion). Regardez la section définissant d’autres paramètres de commentaires, et cochez la case permettant d’activer le fil de discussion (commentaires imbriqués).

Les classes CSS par défaut générées par WordPress pour le lien de réponse sont reply et comment-reply-link. Nous allons utiliser ces classes pour modifier le lien de réponse et le transformer en bouton CSS.

.reply { 
	float:right;
	margin:0 10px 10px 0;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}

.comment article {
	padding-bottom:2.79rem;
}

a.comment-reply-link,
a.comment-edit-link {
	color: #FFFFFF;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	text-decoration:none;
}

a.comment-reply-link:hover,
a.comment-edit-link:hover {
	color: #f6e7d7;
}

Voici à quoi cela ressemblerait :

Stylisation du bouton Modifier le commentaire

Dans la plupart des thèmes WordPress, les utilisateurs connectés ayant la permissions de modifier les commentaires peuvent voir un lien d’édition de commentaire sous chaque commentaire. Voici un petit CSS qui utilise la classe par défaut comment-edit-link pour modifier l’apparence du lien.

a.comment-edit-link {
	float:left;
	margin:0 0 10px 10px;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}

Voici à quoi cela ressemblerait :

Style Annuler le commentaire Répondre au lien Link

Dans la plupart des bons thèmes WordPress, cliquer sur le lien Répondre ouvre le formulaire de commentaire juste en dessous du commentaire auquel vous répondez avec un lien pour annuler la réponse au commentaire. Modifions ce lien d’annulation de la réponse au commentaire en utilisant l’ID CSS par défaut cancel-comment-reply.

#cancel-comment-reply-link  { 
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	color:#FFFFFF;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
	text-decoration:none;
}

Voici à quoi cela ressemblerait :

Le formulaire de commentaire de WordPress : un style à part entière

Des formulaires de commentaires utilisables, esthétiquement agréables et stylés encouragent les utilisateurs/utilisatrices à laisser un commentaire sur votre blog. Précédemment, nous avons écrit un article détaillé sur la façon de styliser le formulaire de commentaire WordPress. Nous vous recommandons vivement d’y jeter un coup d’œil pour voir comment vous pouvez améliorer votre formulaire de commentaires WordPress.

Nous espérons que cet article vous aidera à mettre en forme votre formulaire de commentaires WordPress. Si vous avez des questions ou des suggestions, alors n’hésitez pas à nous en faire part en laissant un commentaire ci-dessous.