Si vous vous souvenez bien, il y a quelques temps, je vous avais demandé d’intégrer un nouveau template (coomments.php) sans trop vous préoccuper du contenu. Aujourd’hui, on va reprendre ce template et je vais vous expliquer les grandes parties à connaître, et qui vous seront utiles pour la customisation des commentaires. Ici, nous n’aborderons pas le PHP. Ce qui va nous intéresser, c’est repérer les blocs et les différencier pour pouvoir mieux customiser l’ensemble.
Présentation des principaux blocs
La partie réservée pour les commentaires est divisée en 2 grandes parties. En fait, vous allez voir qu’il en existe 2 autres, mais ce n’est que les titres pour annoncer le nombre de commentaires et du formulaire de réponse. Donc je me permets de ne pas les considérer comme un bloc principal. Voici donc le premier découpage des blocs pour les commentaires:
Expliquons un peu plus dans le détail ces différentes parties:
- h3#comments, c’est le titre qui va indiquer le nombre de commentaires déjà rédigés. C’est un titre h3 qui est dans la div id=”comments”,
- ol.commentlist, c’est une liste ordonnée (ol=ordered list) qui va afficher les commentaires,
- h3#respond, c’est le titre pour le formulaire,
- form#commentform, c’est un formulaire qui est inséré à l’intérieur de la div id=”commentform”.
Maintenant, analysons le contenu de chacune de ces parties:
Présentation du bloc “Liste des commentaires”
Dans la liste des commentaires, on va retrouver différents blocs pour l’auteur, les infos métadata, ou encore le contenu même du commentaire. Voici donc comment s’organise un commentaire dans le template comments.php:
En fonction du thème que vous utiliserez, vous aurez des nominations différentes pour chaque partie, mais le “fond” restera généralement le même. Et une fois que vous avez compris la construction des commentaires, vous pourrez les customiser à souhait. Détaillons, ici encore, le contenu du bloc “liste des commentaires”:
- li#comment-ID, c’est la ligne du commentaire. Comme on l’a dit plus haut, les commentaires sont inscrits dans une liste ordonnée. Ici, on donne une ID à chaque commentaire, pour les différencier, comme on le fait pour les articles du blog.
- div.commentmetadata, c’est le bloc pour les informations concernant l’auteur du commentaire, mais aussi la date et l’heure à laquelle le commentaire a été rédigé. Si vous souhaitez customiser différemment le nom de l’auteur des autres informations, il vous faudra “envelopper” séparément l’auteur.
- p, c’est le paragraphe pour le commentaire.
Ici, le formulaire est crée sous formes de paragraphes et non pas sous forme de liste. Certains blogs utilisent des listes ou encore des div pour créer leur formulaire de commentaires. Ici, j’ai choisi l’option “paragraphe” parce que c’est celle fournie par défaut par Wordpress.
- input#author, input#email et input#url sont les blocs qui vont permettre de remplir les différentes informations concernant le commentateur.
- textarea#comment est la zone de rédaction du commentaire.
- input#submit est le bloc pour le bouton qui permet de valider et d’envoyer le commentaire.
Donc, maintenant que vous avez vu les différentes parties du bloc “commentaires”, vous allez pouvoir le customiser comme vous le souhaitez. Quoi qu’il en soit, je vous laisse quelques lignes de customisation en CSS. Ce n’est qu’un exemple, et vous pourrez le modifier comme vous le souhaitez. C’est à vous de trouver ce qui vous plaît le plus ! Voici donc un exemple de CSS pour les commentaires:
.comments-template{
margin: 10px 0 0 0;
}
.comments-template ol{
margin: 10px;
padding: 0 0 0 15px;
list-style: none;
}
.comments-template ol p{
font-family: Trebuchet MS, Arial, Hevletica, Sans-serif;
font-size: 0.9em;
}
.comments-template ol li{
margin: 10px 0 0 0;
line-height: 15px;
padding: 0 0 10px;
}
.comments-template h2, .comments-template h3{
font-size: 1.2em;
}
.commentmetadata{
font-size: 0.9em;
}
.comments-template p.nocomments{
padding: 0;
}
.comments-template textarea{
font-family: Trebuchet MS, Arial, Hevletica, Sans-serif;
font-size: 0.9em;
}
.cadre_commentaires {
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
Reprenez chaque bloc et regardez les modifications que j’ai apporté. Ca pourra aider les moins avancés en CSS à mettre les mains dans le cambouis !!!
Enfin, j’ai pris le temps de franciser le template comments.php, vous pouvez donc le récupérer par ici !
N’hésitez pas à laisser un commentaire si vous avez une question, remarque ou problème !! Le prochain tuto sera sur les liens et ce sera le dernier pour la partie technique. Ensuite, on commencera la partie créative !!!!!
Tutoriel n°23: “CSS: les liens”
Francis
![[]](http://m3.moostik.net/img/?pseudo=fran6art&option=invisible)
super tutorial, comme d’habitude !
j’ai appris plein de trucs…et je sens que je vais m’amuser comme un petit fou à retravailler mon design qui était obscur à cause de Brian’s threaded Comments !
merci Fran6 !
Kikoo ! j’ai un soucis avec les commentaires, la sidebar n’est pas bien placée, elle se met en dessous
du genre :
article - commentaires publiés
qui revient en dessous
formulaire pour commenter
sidebar
Si la sidebar vient se mettre en dessous, c’est soi un problème de CSS, soit un souci de balise mal fermée… Si ton blog a passé la validation, c’est qu’il n’y a pas de problèmes de balises. Vérifies donc bien ton fichier CSS
j’ai le même probleme que Inno mais je ne vois pas d’où cela peut venir
Cher Francis,
Je vous ecrit pour vous annoncez que grace à vous j’ai compris comment fonctionnait les bases de WORDPRESS
Je vous remercie d’avoir été présent et Bon ca va j’arrete
J’ai encore une question.
Si par exemple je voudrai renommé mon fichier commentaire en fichier COMMENTS_FRENCH.PHP est ce que le code doit se transforme en :
ou alors je me trompe ?
Merci
Bonjour Fran6 et merci pour ces tutoriaux très intéressants qui me permettront de ma lancer dans la création de design pour Wordpress (depuis le temps que je le souhaitais).
Je voulais juste signaler que le lien vers le fichier comments.txt arrive vers la version en anglais et non celle en français comme c’est annoncé.
Voilà , et bravo pour ce blog riche en informations. On peut dire que c’est une référence dans le milieu.
Merci Paeleben pour les compliments !
Pour fichier Comments, j’ai mis la version FR dans le zip du tuto 23 ! 
Pour ton information: il y a quelques trucs pas traduits en français dans ton code.. “Said”, “edit comment” et “logged in as” sont toujours en anglais dans ta version française!!
@fran6 : si ca t’interesse j’ai modifier les quelques mots de d’anglais qui restaient.
antoine > T’as regardé dans le tuto 23, je donne l’ensemble des templates au téléchargement, et il me semble que j’avais modifié quelques mots anglais qui traînaient, mais je ne sais plus où exactement…
@fran6 : hum non pas vérifier…j’aime pô trop DL tous les fichier apres un tuto parce que j’aurais tendance a ne pas essayer de comprendre le code
Salut où doit-on modifier le chemin du fichier CSS, car si je suis ton tuto et que me dossier ne s’appelle pas “Creation Theme” rien ne marche. Pourquoi?
tatam > dans le header.php !
Super tuto, mais bon les banners de sites lesbians & bi, ça fait un peu désordre sur l’imprimante au boulot. J’ai rien contre mais dans un autre contexte…
Bon boulot anyway!!!
jcollin > héhé !! Désolé !! Vive Adsense !!