# 104: Katkelmien rakentaminen, osa 1 (HTML & CSS) - CSS-temppuja

Anonim

Meillä on nyt Photoshop-suunnittelu, josta voimme työskennellä Snippets-alueen kotisivulle. Se on paljon selattavampi kuin aikaisemmin, mutta pitää sateenkaaren hengen, joka sillä oli ennen. Nyt voimme siirtyä sen rakentamiseen WordPress-malleissamme. Kirjoittamalla kaikki HTML, PHP ja CSS ja tiedät poran!

Vaihe yksi siirtyy mukautetun otsikon yli, johon olimme valmiita siirtymään staattisessa suunnittelussamme. Tämä tarkoittaa, että vaihdat pienen HTML-koodin ympärille oikeat kääreelementit. Se tarkoittaa myös sen varmistamista, että otsikossa oleva ehdollinen logiikka on paikallaan tälle alueelle ominaisen CSS: n lataamiseksi on hyvä. Tämä saa minut ajattelemaan aina 1, 2 tai 3 sääntöä, joka minulla on CSS-tiedostoille ja JavaScript-tiedostoille millä tahansa verkkosivustolla. CSS-Tricks on täydellinen esimerkki “2” -sivustosta, jossa meillä on maailmanlaajuiset tyylit ja CSS jokaiselle sivuston erityisosastolle, jossa sillä on melko vähän ainutlaatuista tyyliä. Tämä katkelmien asettelu on varmasti ainutlaatuinen.

Saadaksemme kaiken tarvitsemamme tämän sivun tuotoksen käytämme uudelleen joukko wp_list_pages () -kutsuja. Puhumme siitä, kuinka tämä voi olla ongelmallista, koska se on niin intensiivinen puhelu, ja meillä on ollut ongelmia sen kanssa aiemmin, kun loimme Almanac-alueen. Koska olemme kuitenkin lisänneet muistin käyttöä ja käytämme välimuistia, se ei ole iso juttu.

Lopetamme kuvaruudun kaikella, mitä tarvitsemme tulostettavaksi sivulle, ja perustetaan erittäin yksinkertainen ruudukko. Nyt voimme siirtyä tekemään siitä näyttävän mockupilta ja lopulta lisätä vuorovaikutukset.