Francis Chouquet Graphiste Lettering

Création Thème WordPress | Tutoriel #22: CSS: customisation des commentaires

0

Ce tutoriel est le vingt-deuxième d’une série d’articles sur la création d’un thème pour WordPress de A à Z. Si vous prenez le train en cours et si vous souhaitez créer votre propre thème de A à Z, je vous conseille fortement de commencer par le premier tutoriel de la série.

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:

Blocs-Commentaires-Wp

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 ».
On a déjà un aperçu de ce que sont ces différents blocs et vous pourrez déjà travailler sur ces mêmes blocs pour customiser vos commentaires. Par exemple, vous pouvez donner un background au formulaire de commentaire, que ce soit par une couleur ou par une image réalisée préalablement sous Photoshop.

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:

Lignes-Commentaires

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.
Présentation du bloc « Formulaire des commentaires »

Nous allons maintenant détailler le contenu du formulaire destiné à rédiger un commentaire:

Form-Commentaires

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 
.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 »

Et si ça vous intéresse, avec des amis, on a créé notre boutique de ventes de thèmes WordPress, Peaxl. Venez jetez un oeil ! 😉

Francis

38 Commentaires

  • 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 !

  • Inno

    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

  • Manon

    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 ! 😉

  • Jb

    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 ! 😉

  • jcollin

    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 !!

  • y a encore un petit oubli dans le fichier comments.php
    un « said » s’est glissé ligne 32….

  • Main > Merci pour l’info ! 😉

  • Hello,

    tu peux aussi rajouter un exemple pour la classe « alt » qui permet d’alterner la couleur de fond des commentaires 😉

  • catherine

    bonjour,
    je souhaite mettre pour chaque billet de mon site :
    mon nom, la date, le lien vers les commentaires en fin d’article et non pas au début.
    Comment est ce possible ?
    Merci de votre réponse.

  • Bonsoir, je suis avec engoument chaque tuto

    je vous tire mon chapeau, nondidjou il sont bien fais 🙂

    une question:

    je bosse sur un fond sombre, je n’arrive pas a regler la couleurs des zone text du formulaire, j’ai reussi avec la zone textarea mais pas av les champ url,author,email

    quelqu’un aurais une idee?

    un grand merci pour cet mine d’or!

  • Quentin, un petit belge apparemment ^^

    De ou ?? si tu veux discuter entre développeur belge hésite pas, sur skype c’est mon pseudo 😉

    Amicalement

  • super tuto, merci !

  • J’ai suivi l’intégralité de tes tutos sur la création d’un blog et je trouves cela super. J’avais déjà pratiquement fini la personnalisations mais j’ai su peaufiner et surtout comprendre pas mal de choses grâce à toi !

    Mon blog n’est pas encore lié à mon site ^^, je dois débugé tout ce qui tourne autour d’explorer mais ça va arriver !

    Merci et bonne continuation.

  • Feena

    Bonsoir,

    J’ai le même problème que quelques personnes plus haut, sur la page de mes commentaires, la sidebar se met toujours en dessous. J’ai vérifié chaque ligne avec la feuille CSS qu’on peux télécharger, et tout est correct. Le blog a passé la validation, ca vient forcément du CSS, mais OÙ ??!! Je ne comprend pas 🙁

  • stefg

    j’ai le même problème que toi, Feena, mais le 20 mai… bizarre cette coincidence de dates… 😉

  • Bonjour fran6,

    Tout d’abord merci pour cette serie de tutos géniale, qui m’a permis de développer tout le thème pour ce blog que l’on m’avait demandé de mettre en place. Le html et les CSS ca va, mais le php et loop wordpress, c’était du chinois pour moi avant que tu passses par là ^^

    Cela dit, il me reste une toute petite question à poser. Comme c’est le cas sur ton blog, et comme c’est aussi le cas sur celui que j’ai développé en utilisant ton tuto, sous safari mac la textarea des commentaires est étirable. Or, chez moi, cela fait passer ce cadre blanc sous ma sidebar pour continuer après, et le rendu est très peu esthétique si quelqu’un s’amuse à changer la taille du cadre. Y aurait-il un moyen de bloquer cela? J’ai tout essayé en passant les CSS, mettre une width fixe la largeur minimale mais ne fait rien pour la largeur maximale. max-width n’a quant à lui aucun effet. A l’aide!

  • Bonjour,

    Je voudrais savoir comment modifier les dimensions de la fenêtre dans laquelle j’écris ce texte à l’instant. Je la trouve beaucoup trop encombrante.

    Merci

    Bruno

  • Good afternoon! it for you: ssbbw free porn delete porn or xxx porn videos uk porn star and free amateur submitted porn mp4 porn download or free lesbian dating adult dating in ada wisconsin . See you later!

  • Salut Fran6 et merci pour ton site;

    j’ai une question à propos des commentaires par rapport à une page Article globale.
    Je m’explique:
    J’ai une page qui regroupe tous les articles de mon site. J’aimerai pour cette page sans passer par la page de l’article seul, voir directement les 3 derniers commentaires de chaque articles publiés toujours sur la page globale.

    si tu peux m’eclairer là dessus c’est cool
    thks

  • Bonjour, merci beaucoup pour ces tutos vraiment détaillés et très très formateurs !

    Question : dans le CSS pour mettre en forme les commentaires tu fais référence à la class « comments-template » or je ne la vois pas dans le fichier comments.php ? Faut-il bien la remplacer par la class « cadre_commentaire » ?

    Merci d’avance et très bonne journée.
    Jérôme.

  • Je suis justement en train de personnaliser les commentaires pour mon futur blog, je dois avouer que pour le moment c’est vraiment la partie la plus ch**nte de la mise en page.

    Pour info je crois qu’il y a une petite erreur dans les schémas :
    il y a une div cadre_commentaires qui encadre h3#comments et ol.commentlist

    @Jérôme : la class “comments-template” n’est pas dans le fichier comments.php elle est dans le fichier single, elle encadre la fonction qui appelle le fichier comments.php

    Merci Fran6 pour ces tutos 😉

  • Marion

    Bonjour Francis,
    J’ai une question toute bête…
    J’ai bien compris l’utilité de construire un blog sous WordPresse, et même en y faisant mes premiers pas, j’en perçois les possibilités graphiques…
    Mais si je ne souhaite pas obtenir le graphisme d’un blog, mais celui d’un site principalement construit à base d’images, comme celui que j’ai conçu ici :
    http://livres.ouverts.free.fr/index.htm
    et si, malgré tous, je souhaite y intégrer une fenêtre de commentaires à la fin d’un article comme celui-là :
    http://livres.ouverts.free.fr/lectures/sf.htm
    Quelle serait la marche à suivre ?…
    Je sais que cette question déborde un peu le cadre du sujet présent mais je te remercie d’avance du temps que tu consacreras à me répondre… 😉

  • Bonsoir
    Merci pour ton site qui m’a permis de personnaliser entièrement mon blog

    Par contre j’ai un petit soucis et je ne vois pas d’où ça vient, je voudrai un bouton répondre pour répondre aux commentaires et que la réponse s’imbrique en décalage sous le commentaire

    Comment on fait ? merci

Success, your comment is awaiting moderation.