Projekt komentarzy może wyglądać bardzo prosto. I to jest! Ale myślę, że proste jest skuteczne w tym przypadku. Komentarze są tak ważną częścią sztuczek CSS, że chcę, aby były bardzo czytelne i wygodne.
Teraz przejdziemy do WordPressa i sprawimy, że ten wątek komentarzy stanie się rzeczywistością. Pierwszą rzeczą, jaką robimy, jest znalezienie szablonu, w którym będziemy wyświetlać komentarze. single.phpjest chyba najważniejszy (pojedyncze wpisy na blogu). W tym szablonie stwierdzamy, że funkcja comments_template()jest wszystkim, co musimy wywołać, aby uzyskać cały obszar komentarzy. Zasadniczo funkcja ta pobiera plik comments.phpi umieszcza go tam. Więc zaczynamy się temu przyglądać.
Kod w tym pliku zaczyna się od . To bardzo właściwe. Komentarze są z pewnością sekcją i powinny mieć identyfikator. Pamiętaj, że nie tworzymy stylizacji na podstawie identyfikatorów, ale umieszczanie komentarzy w elemencie z identyfikatorem komentarzy jest dobre, ponieważ:
- Zawsze możesz użyć skrótu do komentarzy, dodając #comments do adresu URL.
- Osoby, które nienawidzą komentarzy, mogą je ukryć w swoim arkuszu stylów użytkownika za pomocą zgadywalnego identyfikatora.
Kontynuujemy przeglądanie kodu w tym pliku. Usuwamy niektóre rzeczy, których jesteśmy prawie pewni, że nie będziemy ich używać. Zmieniamy niektóre rzeczy, aby pasowały do tego, co zaprojektowaliśmy w Photoshopie.
Następnie natrafiamy na funkcję, wp_list_comments()która jest odpowiedzialna za wyplucie całego wątku komentarza. Następnie wypluwa takie rzeczy, jak formularz komentarza. Przez cały czas istnieje logika pokazująca rzeczy w różnych sytuacjach, na przykład gdy komentarze są zamknięte lub gdy komentarze są otwarte, ale ich nie ma.
Znajdujemy trochę dziwną funkcję o nazwie, na cancel_comment_reply_link()którą patrzymy i widzimy, że obsługuje funkcję przenoszenia formularza komentarza z powrotem na dół w przypadku, gdy kliknięto łącze Odpowiedz i formularz został przesunięty w górę, ale nie chcieliśmy to do.
Następnie zagłębiamy się w HTML, z którego otrzymujemy wp_list_comments(). Nie robiąc nic, otrzymamy HTML z tej funkcji, która jest całkowicie rozsądna. Ale też jest tym, czym jest i nie będzie pasować do każdego możliwego projektu. Osobiście wolę mieć pełną kontrolę nad znacznikami. Więc zamiast po prostu brać to, co nam daje, przejmujemy nad tym kontrolę, używając w naszym functions.phppliku niestandardowej funkcji , która przesłania domyślne znaczniki.
Teraz, gdy mamy kontrolę HTML, możemy wejść w rodzaj „trybu projektowania”, w którym przechodzimy między CSS i HTML, wykonując nasz projekt. Komentarze CSS, podobnie jak każdy inny mały modułowy fragment CSS w tym projekcie, przeniesiemy się do pliku _comments.scss, który możemy dołączyć do pliku global. Idealny przypadek, w którym wyodrębnienie CSS do własnego pliku ma sens. Chociaż powinniśmy używać jak największej liczby globalnych stylów. Na przykład, każdy komentarz to z pewnością a .module, style nagłówków powinny być tutaj idealnie dopasowane do nazw, a typografia ogólnie powinna pochodzić z globalnych stylów typografii.
Używamy nawet naszego systemu siatek w komentarzach, ponieważ każdy komentarz jest zasadniczo siatką dwukolumnową. Inne małe rzeczy są całkowicie niestandardowe w komentarzach, na przykład gdzie i jak pozycjonujemy linki do odpowiedzi.
Pod koniec screencastu stwierdzamy, że nasz projekt Photoshopa ma jedną fatalną wadę. Zagnieżdżone komentarze znajdują się w komentarzu nadrzędnym i bardzo trudno jest sprawić, by nasze zagnieżdżone moduły wyglądały tak, jakby były oddzielne. Być może będziemy musieli pójść na kompromis.