# 122: Construirea Arhivei Videoclipurilor, Partea 1 - CSS-Tricks

Anonim

Pagina de arhivare a videoclipurilor este partea site-ului unde oamenii pot răsfoi toate videoclipurile gratuite disponibile pentru a le viziona. Este pentru navigare, trebuie să-i placă pagina de pornire pentru fragmente sau pagina de pornire pentru demonstrații.

Aceste pagini sunt propriul șablon, pe care îl putem transforma foarte repede și ușor în formă, așa cum am făcut de mai multe ori înainte. Ne punem propriul înveliș în jurul lucrurilor și folosim structura rețelei pentru a-i oferi un aspect 2/3 1/3.

Ceea ce este foarte interesant pentru mine aici este că avem ocazia să smulgem o marjă brută veche și să o înlocuim cu o marjă mai inteligentă și generată automat. În trecut, am scris manual fiecare intrare în arhivele video ca listă de definiții. Pentru început, probabil că acesta nu este marcajul semantic potrivit pentru o listă de videoclipuri, mai ales atunci când fiecare intrare începe o nouă listă.

În schimb, eliminăm toate acele vechi marcaje și, în schimb, executăm o interogare atent elaborată pentru a captura toate datele de care avem nevoie de la WordPress. Executăm o buclă peste acea interogare și scoatem un nou markup care este mai curat (doar divs cu clase). Acest lucru ne va economisi timp în viitor, nefiind nevoie să întreținem manual aceste pagini de arhivă.

În timp ce scriem acest nou markup, îl îmbibăm cu funcții WordPress care completează biții de care trebuie să fim dinamici. Titlurile sunt the_title(). Link-urile sunt the_permalink(). Miniaturile sunt câmpuri personalizate. Ușor de obraznic.

Divizorii folosesc nume de clase din sistemul nostru de rețea, astfel încât toate elementele flotante, de dimensionare și alte lucruri să funcționeze automat. Nu suntem eficienti? Unele CSS trebuie însă să fie personalizate, iar noi le scriem acolo unde trebuie. De exemplu, ajustarea căptușelii pentru module în mod specific în această secțiune (a fost prea mult, am redus-o). Acest lucru este ușor de realizat prin intermediul numelor de clasă disponibile, deoarece am folosit în body_class()mod inteligent drumul înapoi când lucram la cap.