# 122: Opbygning af videoarkivet, del 1 - CSS-tricks

Anonim

Videoarkivsiden er den del af webstedet, hvor folk kan gennemse alle de gratis videoer, der er tilgængelige for at se. Det er til browsing, skal lide startsiden for uddrag eller hjemmesiden for demoer.

Disse sider er deres egen skabelon, som vi meget hurtigt og nemt kan piske op i form, som vi har gjort mange gange før. Vi lægger vores egen indpakning omkring tingene og bruger vores gitterstruktur til at give det et 2/3 1/3 layout.

Hvad der er meget spændende for mig her er, at vi får en chance for at rive nogle gamle bruttomarkeringer ud og erstatte det med mere intellegent og automatisk genereret markup. Tidligere håndskrev jeg hver post i videoarkiverne som en definitionsliste. For det første er det sandsynligvis ikke den rigtige semantiske markering for en liste over videoer, især når hver post starter en ny liste.

I stedet riper vi al den gamle markering ud og kører i stedet en omhyggeligt udformet forespørgsel for at fange alle de data, vi har brug for fra WordPress. Vi kører en løkke over den forespørgsel og udsender en ny markering, der er renere (deles bare med klasser). Dette vil spare os tid i fremtiden og ikke behøver at vedligeholde disse arkivsider i hånden.

Mens vi skriver denne nye markering, krydrer vi den med WordPress-funktioner, der udfylder de bits, som vi har brug for for at være dynamiske. Titlerne er the_title(). Links er the_permalink(). Miniaturerne er brugerdefinerede felter. Let cheezy.

Divs bruger klassenavne fra vores gittersystem, så alle de flydende og størrelsesbestemte ting og ting automatisk fungerer. Er vi ikke effektive? Noget CSS skal dog være tilpasset, og vi skriver det, hvis vi har brug for det. For eksempel justering af polstring til moduler specifikt i dette afsnit (det var for meget, vi reducerede det). Denne form for ting er let at gøre via klassenavne, der er tilgængelige for os, da vi intelligent brugte body_class()langt tilbage, da vi arbejdede på hovedet.