# 104: Območje gradnje delčkov, 1. del (HTML in CSS) - CSS-triki

Anonim

Zdaj imamo na voljo oblikovanje Photoshopa za domačo stran območja Snippets. Je veliko bolj pregleden kot prej, vendar ohranja mavrični duh, kot ga je imel prej. Zdaj ga lahko dejansko sestavimo v naših predlogah WordPress. Če napišete vse HTML in PHP ter CSS, VEDENJE VEDITE!

Prvi korak se premika po glavi po meri, ki smo jo bili pripravljeni v statični zasnovi. To pomeni, da spremenite malo HTML-ja, da boste imeli pravilne elemente ovojnice. To pomeni tudi, da je zagotovljena pogojna logika v glavi za nalaganje CSS-ja, specifičnega za to področje, da je dobra. Zaradi tega vedno pomislim na pravilo 1, 2 ali 3, ki ga imam za datoteke CSS in datoteke JavaScript na katerem koli spletnem mestu. CSS-Tricks je odličen primer spletnega mesta "2", kjer imamo globalne sloge in CSS za vsak poseben odsek spletnega mesta, kjer je kar nekaj značilnega. Ta postavitev odrezkov je zagotovo edinstvena.

Da bi dobili vse izpise na tej strani, ki jih potrebujemo, ponovno uporabimo kup klicev wp_list_pages (). Govorimo o tem, kako bi to lahko bilo problematično, ker gre za tako intenziven klic in v preteklosti smo že imeli težave z njim, ko smo ustvarjali območje Almanaha. Ker pa smo povečali porabo pomnilnika in uporabljamo predpomnjenje, to ni veliko.

Screencast zaključimo z vsem, kar potrebujemo za izhod na stran, in z zelo osnovno mrežo. Zdaj lahko nadaljujemo z oblikovanjem videza kot naš model in na koncu dodamo interakcije.