# 122: Tworzenie archiwum filmów, część 1 - CSS-Tricks

Anonim

Strona archiwum filmów wideo to część witryny, w której użytkownicy mogą przeglądać wszystkie bezpłatne filmy dostępne do obejrzenia. Służy do przeglądania, musi lubić stronę główną dla fragmentów lub stronę główną dla wersji demonstracyjnych.

Te strony są ich własnym szablonem, który możemy bardzo szybko i łatwo nadać kształt, tak jak robiliśmy to wiele razy wcześniej. Otaczamy rzeczy własnym opakowaniem i używamy naszej struktury siatki, aby nadać jej układ 2/3 1/3.

To, co jest dla mnie bardzo ekscytujące, to fakt, że mamy szansę wyrwać niektóre stare znaczniki brutto i zastąpić je bardziej inteligentnymi i automatycznie generowanymi znacznikami. W przeszłości ręcznie zapisywałem każdy wpis do archiwów wideo jako listę definicji. Po pierwsze, prawdopodobnie nie jest to odpowiedni znacznik semantyczny dla listy filmów, zwłaszcza gdy każdy wpis rozpoczyna nową listę.

Zamiast tego usuwamy wszystkie stare znaczniki i zamiast tego uruchamiamy starannie spreparowane zapytanie, aby pobrać wszystkie potrzebne dane z WordPress. Uruchamiamy pętlę nad tym zapytaniem i wyświetlamy nowe, czystsze znaczniki (tylko elementy div z klasami). Pozwoli nam to zaoszczędzić czas w przyszłości, bez konieczności ręcznego utrzymywania tych stron archiwum.

Pisząc te nowe znaczniki, wzbogacamy je funkcjami WordPress, które wypełniają bity, których potrzebujemy, aby były dynamiczne. Tytuły są the_title(). Linki są the_permalink(). Miniatury to pola niestandardowe. Łatwy kicz.

Elementy div używają nazw klas z naszego systemu grid, więc wszystkie elementy pływające, rozmiary i inne elementy działają automatycznie. Czy nie jesteśmy wydajni? Jednak niektóre CSS muszą być niestandardowe, a piszemy, że jeśli musimy. Na przykład dostosowanie wypełnienia modułów specjalnie w tej sekcji (było za dużo, zmniejszyliśmy). Takie rzeczy są łatwe do zrobienia dzięki dostępnym nam nazwom klas, ponieważ inteligentnie używaliśmy ich już body_class()dawno, kiedy pracowaliśmy nad głową.