# 122: Bygg videoarkivet, del 1 - CSS-triks

Anonim

Videoarkivsiden er den delen av nettstedet der folk kan bla gjennom alle gratis videoer som er tilgjengelige for å se. Det er for surfing, må like hjemmesiden for utdragene eller hjemmesiden for demoer.

Disse sidene er deres egen mal, som vi raskt og enkelt kan piske opp i form som vi har gjort mange ganger før. Vi legger vår egen innpakning rundt ting og bruker vår rutenettstruktur for å gi den en 2/3 1/3 layout.

Det som er veldig spennende for meg her er at vi får sjansen til å rive ut noen gamle bruttomarkeringer og erstatte den med mer intellegent og automatisk generert markering. Tidligere har jeg håndskrevet hver oppføring i videoarkivene som en definisjonsliste. For det første er det sannsynligvis ikke den rette semantiske markeringen for en liste over videoer, spesielt når hver oppføring starter en ny liste.

I stedet riper vi ut all den gamle markeringen og i stedet kjører en nøye utformet spørring for å fange opp alle dataene vi trenger fra WordPress. Vi kjører en løkke over spørringen og sender ut ny markering som er renere (bare deler med klasser). Dette vil spare oss tid i fremtiden, uten å måtte håndtere disse arkivsidene.

Mens vi skriver denne nye markeringen, fyller vi den med WordPress-funksjoner som fyller ut bitene vi trenger for å være dynamiske. Titlene er the_title(). Koblingene er the_permalink(). Miniatyrbildene er egendefinerte felt. Lett cheezy.

Divisjonene bruker klassenavn fra rutenettet vårt, slik at alt flytende og dimensjonering og ting fungerer automatisk. Er vi ikke effektive? Noen CSS må være tilpassede skjønt, og vi skriver det vi måtte. For eksempel justere polstringen for moduler spesielt i denne delen (det var for mye, vi reduserte det). Denne typen ting er lett å gjøre via klassenavn som er tilgjengelig for oss siden vi intelligent brukte body_class()tilbake da vi jobbet på hodet.