Mamy teraz projekt Photoshopa do pracy na stronie głównej obszaru Snippets. Jest dużo łatwiejsze do przeglądania niż wcześniej, ale zachowuje ducha tęczy, który miał wcześniej. Teraz możemy przejść do budowania go w naszych szablonach WordPress. Piszesz cały HTML, PHP i CSS, a WIESZ PRAWIDŁOWY!
Krok pierwszy to przejście do naszego niestandardowego nagłówka, który przygotowaliśmy w naszym statycznym projekcie. Oznacza to zmianę małego kodu HTML, aby mieć prawidłowe elementy opakowania. Oznacza to również upewnienie się, że logika warunkowa w nagłówku jest na miejscu, aby załadować CSS specyficzny dla tego obszaru, jest dobry. To zawsze przywodzi mi na myśl regułę 1, 2 lub 3, którą mam dla plików CSS i plików JavaScript w dowolnej witrynie. CSS-Tricks to doskonały przykład witryny „2”, w której mamy globalne style i CSS dla każdej specjalnej sekcji witryny, w której ma sporo unikalnych stylów. Ten układ fragmentów jest z pewnością wyjątkowy.
Aby uzyskać wszystkie potrzebne dane wyjściowe z tej strony, ponownie używamy kilku wywołań wp_list_pages (). Mówimy o tym, jak może to być problematyczne, ponieważ jest to bardzo intensywna rozmowa i mieliśmy z tym problemy w przeszłości, kiedy tworzyliśmy obszar Almanachu. Jednak ponieważ zwiększyliśmy zużycie pamięci i używamy buforowania, nie jest to wielka sprawa.
Kończymy zrzut ekranu, przedstawiając wszystko, czego potrzebujemy, na stronie i bardzo podstawową konfigurację siatki. Teraz możemy przejść do nadania mu wyglądu naszej makiety i ostatecznie dodać interakcje.