Integrere Simple CSS Grid Layouts i WordPress

Å få et konsekvent, solidt gridoppsett i WordPress kan være en smertefri prosess hvis du bruker de riktige verktøyene. I denne opplæringen lærer du trinnvis hvordan du raskt kan sette opp et rutenett i WordPress som er veldig lett og lett å endre. Vi vil holde designen enkel slik at vi kan fokusere på å bruke de riktige verktøyene for å sette opp rutenettet, men husk at du kan stille rutenettet selv om det trengs.

Jeg vil bruke et standard basseng tema i WordPress for denne opplæringen bare for å vise deg en "start fra bunnen" tilnærming til å få nettene akkurat.

Trinn 1: Bestem gridbredden

Før du begynner, må du avgjøre hvor stort nettverket ditt må være. For min WordPress-side kan jeg se at bredden på min hovedkolonne er 450px ved å bruke Google Chromes "Inspekter element" -funksjon når du høyreklikker på et objekt. Dette er den raskeste måten jeg har funnet som raskt kan bestemme bredden og høyden til et objekt på en nettside.

Trinn 2: Grid Designer

I stedet for å bygge et rutenett, som du kan gjøre hvis du vil, foreslår jeg at du går med en av mange tilgjengelige nettverksgeneratorverktøy. For denne opplæringen vil jeg bruke gridgeneratoren av MindPlay. Det er en veldig enkel og lysnettet generator.

Jeg vil ha en tre-kolonne-skjerm, og jeg må sørge for at pikslene mine er på 450. Så juster deretter og hopp til "Export" -fanen. Vi kommer ikke til å gå over * typografi funksjoner i denne opplæringen, selv om dette er absolutt verdt å utforske på egen hånd.

På fanen Eksporter bruker du den øverste stilarken og ruller ned til du ser "Grid" -kommentaren. Du vil kopiere alt fra kommentaren til bunnen av denne rammen. Det skal bare være omtrent 30 linjer

.
 
 
 
Trinn 3: Oppdaterer WordPress Stylesheet
 
Logg inn på WordPress-siden din og gå til Utseende> Editor.
 
 
 
Nederst til høyre på redigeringspanelet ser du en styles.css fil (eller noe lignende, avhengig av temaet ditt). Klikk på denne for å åpne den opp.
 
 
 
Rull til bunnen av arket og lim inn pre-laget ditt fra MindPlay.dk:
 
 
 
Trinn 4: Implementere gridet
 
For å bruke nettet, oppretter du bare en 
 med klassen "grid". Hvert område av rutenett er definert i CSS. Åpne en ny side eller post. Gå til HTML-fanen for å begynne å bygge nettverket ditt.
 
 
 
Her er noen eksempler som du kan lime inn på plass for å komme i gang:
 
 
  
Venstre kolonne
  
Mellom kolonne
  
Høyre kolonne
  
 
 
Slik ser det ut i WordPress:
 
 
 
Lagre / Oppdater siden og se på resultatene. I mitt tilfelle er dette hjemmesiden til nettstedet:
 
 
 
Som du kan se fra ovenstående skjermbilde, har vi våre tre kolonner, og alt er riktig der vi forventer at det skal være. Du kan legge til så mange rader som du vil, ved å starte med følgende 
:
 
 
   
Venstre kolonne
  
Mellom kolonne
  
Høyre kolonne
    
Venstre rad # 2
  
Middle Row # 2
  
Høyre rad # 2
  
 
Slik ser det så langt ut:
 
 
 
Nå kan du legge til bilder eller tekst, og stil hver rad nøyaktig slik du vil.
 
Tips for tweaking
 
Du kan ha problemer med noen nettlesere når du har flere enn én rad. For å omgå dette problemet må du gjøre marginen til høyre (.gitter-m4, i vårt tilfelle) til høyden du vil ha hver rad. Hvis du bruker bilder som er 250px ved 250px, gjør du radhøyden i .gitter-m4 å være 250px:
 
.grid-m4 float: left; bredde: 20px; høyde: 250px; 
 
Dette vil sørge for at .gitter-m1 På venstre side av neste rad svømmer ikke opp til raden over den.
 
Hvis du vil stile bakgrunnen til hele nettverket, må du justere høyden på .Nett klasse. Så la oss si at du har fire rader på rutenettet, hver på 250px. Du vil legge til høyde til .grid-klassen på 1000px, slik at alle stilelementer du legger til, vil dekke hele griddesignen.
 
.rutenett bredde: 450px; høyde: 1000px; margin: auto; 
 
Avhengig av hvilken versjon av MindPlay.dk-nettgeneratoren du bruker, kan nettstedet ikke generere ".grid-m4" og i stedet må du bruke .gitter-m1 etter .gitter-c3 for å sikre at rutenettet strekker seg til riktig sted:
 
  
Venstre kolonne
  
Mellom kolonne
  
Høyre kolonne
  
 
Endelige resultater 
 
Her ser du mine endelige resultater med to rader og noen enkle grafikk:
 
 
 
Ha det gøy å designe og husk at du kan stile rutenettet på en måte du ønsker.
 
Redaktørens notat: Dette innlegget er skrevet av Tara Hornor for Hongkiat.com. Tara har en grad på engelsk og skriver om markedsføring, reklame, merkevarebygging, grafisk design og desktop publishing. I tillegg til sin skriftlige karriere, liker Tara også å ha tid med sin mann og to barn.