Het ontwerp voor opmerkingen ziet er misschien heel eenvoudig uit. En het is! Maar ik denk dat simpel in dit geval effectief is. Opmerkingen zijn zo'n belangrijk onderdeel van CSS-Tricks, ik wil dat ze zeer leesbaar en comfortabel zijn.
Nu gaan we naar WordPress springen en deze commentaarthread werkelijkheid maken. Het eerste dat we doen, is een sjabloon zoeken waarin we opmerkingen zullen weergeven. single.phpis waarschijnlijk de belangrijkste (individuele blogposts). We vinden in die sjabloon dat de functie comments_template()alles is wat we nodig hebben om het hele opmerkingengebied te krijgen. Wat die functie in wezen doet, is het bestand comments.phpophalen en het erin plaatsen. Dus daar gaan we naar kijken.
De code in dat bestand begint met . Dat is heel toepasselijk. De commentaren zijn zeker een sectie en zouden een identifier moeten hebben. Onthoud dat we geen styling doen op basis van ID's, maar uw opmerkingen in een element met een ID van opmerkingen hebben, is goed omdat:
- Je kunt altijd hash-linken naar opmerkingen door #comments aan de URL toe te voegen.
- Mensen die een hekel hebben aan opmerkingen, kunnen deze verbergen in hun gebruikersstijlblad met een te raden ID.
We blijven de code in dit bestand doornemen. We verwijderen een aantal dingen waarvan we redelijk zeker weten dat we ze niet zullen gebruiken. We veranderen een aantal dingen zodat ze passen bij wat we in Photoshop hebben ontworpen.
We komen dan de functie tegen wp_list_comments()die de functie is die verantwoordelijk is voor het uitspugen van de hele commentaarthread. Vervolgens spuugt het de dingen uit zoals het reactieformulier. Al die tijd is er logica om dingen in verschillende situaties weer te geven, zoals wanneer reacties gesloten zijn of wanneer reacties open zijn maar er zijn er geen.
We vinden een kleine rare functie genaamd cancel_comment_reply_link()die we bekijken en zien die de functionaliteit afhandelt om het commentaarformulier weer naar beneden te verplaatsen in het geval dat er op een antwoordlink is geklikt en het formulier naar boven is verplaatst, maar we wilden niet het aan.
Vervolgens graven we in de HTML waaruit we halen wp_list_comments(). Zonder iets te doen, krijgen we HTML van deze functie die volkomen redelijk is. Maar het is ook wat het is en past niet bij elk mogelijk ontwerp. Persoonlijk heb ik liever volledige controle over markup. Dus in plaats van gewoon te nemen wat het ons geeft, nemen we de controle erover door een aangepaste functie in ons functions.phpbestand te gebruiken die de standaardopmaak overschrijft.
Nu we HTML-controle hebben, kunnen we in een soort "ontwerpmodus" komen waarin we heen en weer springen tussen CSS en HTML om ons ontwerp af te maken. Opmerkingen CSS, zoals elk ander klein modulair stukje CSS in dit project, zullen we degraderen naar een _comments.scss-bestand dat we kunnen opnemen in het global. Perfect geval waarin het zinvol is om CSS in zijn eigen bestand te scheiden. Hoewel we zoveel mogelijk globale stijlen zouden moeten gebruiken. Elke opmerking is bijvoorbeeld zeker een .module, de koptekststijlen zouden hier perfect in orde moeten zijn voor namen, en typografie in het algemeen zou gewoon afkomstig moeten zijn van de algemene typografiestijlen.
We gebruiken zelfs ons rastersysteem binnen de opmerkingen, aangezien elke opmerking in wezen een raster met twee kolommen is. Andere kleine dingen zijn volledig aangepast aan opmerkingen, zoals waar en hoe we de antwoordlinks plaatsen.
Aan het einde van de screencast komen we erachter dat ons Photoshop-ontwerp een fatale fout heeft. Geneste opmerkingen leven binnen een bovenliggende opmerking en het is vrij moeilijk om onze geneste modules eruit te laten zien alsof ze gescheiden zijn. Misschien moeten we hier een paar compromissen sluiten.