Comment styliser la mise en page de vos commentaires WordPress

Récemment, nous vous avons montré comment styliser le formulaire de commentaires WordPress, et nous avons pensé qu'il serait incomplet de ne pas écrire sur la stylisation de la mise en page des commentaires WordPress. Par le passé, nous avons discuté du fait qu'il existe des classes et identifiants CSS générés par défaut par WordPress pour aider les concepteurs de thèmes à styliser leurs modèles. Dans cet article, nous utiliserons ces classes par défaut pour vous montrer comment styliser la mise en page de vos commentaires WordPress et certaines des choses intéressantes que vous pouvez en faire.

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

Classes CSS par défaut pour les commentaires 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 que vous devez modifier

Avant de passer à la mise en forme de la disposition des commentaires WordPress, une petite astuce pour nos nouveaux utilisateurs. Les navigateurs Web Google Chrome et Mozilla Firefox sont dotés d'un outil pratique que vous pouvez utiliser pour améliorer vos compétences en développement de thèmes WordPress. L'outil s'appelle Inspecter l'élément. Placez simplement votre souris sur un élément d'une page Web, faites un clic droit et choisissez 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. Également dans la fenêtre inférieure, vous pourrez voir les éléments CSS et comment ils sont stylisés. Vous pouvez même modifier le CSS là-bas à des fins de test. Il est important de se rappeler que tout ce que vous modifiez en utilisant Inspecter l'élément n'est visible que par vous. Au moment où vous actualisez la page, ces modifications disparaîtront. 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 de fond impaires et paires pour les commentaires

Avoir une couleur de fond différente pour les commentaires impairs et pairs est une tendance de conception qui existe depuis quelques années maintenant. Cela améliore la lisibilité, surtout si vous avez beaucoup de commentaires. Cela a également un très bon rendu 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 respectivement une classe impaire et paire à chaque commentaire.

Vous pouvez facilement ajouter le style impair/pair pour les commentaires dans le fichier 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 :

Mise en forme des informations sur l'auteur et les métadonnées des commentaires

WordPress ajoute également des classes aux éléments affichés dans l'en-tête de chaque commentaire. Cela permet aux concepteurs de thèmes de personnaliser l'affichage des informations sur l'auteur et d'autres métadonnées de commentaires telles 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 différemment ces éléments. Dans cet exemple, nous avons ajouté une couleur de fond aux métadonnées du commentaire ainsi qu'un 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 :

Mise en forme différente des commentaires de l'auteur de l'article

Souvent, vous pouvez voir que les commentaires de l'auteur de l'article sont mis en évidence, soit par une couleur de fond différente, soit par un badge supplémentaire. WordPress ajoute une classe par défaut bypostauthor à tous les commentaires faits par l'auteur de l'article. Les concepteurs de thèmes WordPress peuvent utiliser cette classe pour styliser différemment les commentaires de l'auteur de l'article.

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 de l'auteur 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étadonnées du commentaire. Selon la manière dont votre thème WordPress gère les commentaires de l'auteur de l'article, vous pouvez modifier cela comme vous le souhaitez.

Si vous utilisez un thème différent de Twenty Twelve, vous devez découvrir 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 dans 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 dans le fichier functions.php de votre thème.

Dans cet exemple, nous allons modifier cette fonction pour afficher Éditeur au lieu d'Auteur de l'article. Pour ce faire, nous avons modifié la fonction de rappel de commentaire 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 ceci dans le fichier style.css de votre thème comme suit :

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 :

Mise en forme du lien de réponse aux commentaires dans WordPress

La plupart des thèmes WordPress ont un lien de réponse sous chaque commentaire. Cette fonctionnalité n'est affichée que si vous avez activé les commentaires imbriqués. Pour activer les commentaires imbriqués, rendez-vous dans votre administration WordPress (Paramètres » Discussion). Regardez la section où il est indiqué autres paramètres de commentaires, et cochez la case pour activer les commentaires imbriqués (en cascade).

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 utiliserons 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 :

Mise en forme du bouton d'édition de commentaire

Dans la plupart des thèmes WordPress, les utilisateurs connectés ayant la capacité d'éditer 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 :

Mise en forme du lien d'annulation de réponse de commentaire

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 réponse de 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 :

Mise en forme du formulaire de commentaire WordPress

Des formulaires de commentaires utilisables, esthétiques et élégants encouragent les utilisateurs à laisser un commentaire sur votre blog. Auparavant, nous avons écrit un article détaillé sur comment styliser le formulaire de commentaire WordPress. Nous vous recommandons vivement d'aller le consulter pour voir comment vous pouvez faire passer votre formulaire de commentaire WordPress au niveau supérieur.

Nous espérons que cet article vous aidera à styliser la mise en page de vos commentaires WordPress. Si vous avez des questions ou des suggestions, n'hésitez pas à nous en faire part en laissant un commentaire ci-dessous.