Integrering av enkla CSS-gridlayouts i WordPress

Att få en konsekvent, solid nätverkslayout i WordPress kan vara en smärtfri process om du använder rätt verktyg. I den här handledningen lär du dig steg för steg hur du snabbt skapar ett nätverkssystem i WordPress som är väldigt lätt och enkelt att ändra. Vi kommer att hålla designen enkel så att vi kan fokusera på att använda rätt verktyg för att ställa in ditt rutnät, men kom ihåg att du kan ställa in rutnätet själv om det behövs.

Jag kommer att använda en standard pool tema i WordPress för denna handledning bara för att visa dig en "start från grunden" tillvägagångssätt för att få nätet precis rätt.

Steg 1: Bestäm din nätbredd

Innan du börjar, måste du bestämma hur stort ditt nät måste vara. För min WordPress-sida kan jag se att bredden på min huvudkolumn är 450px genom att använda Google Chromes "Inspect Element" -funktion när du högerklickar på ett objekt. Detta är det snabbaste sättet jag har hittat som snabbt kan bestämma bredden och höjden på ett objekt på en webbsida.

Steg 2: Grid Designer

I stället för att bygga ett galler, som du kan göra om du vill, föreslår jag att du går med ett av många tillgängliga verktyg för gridgenerator. För denna handledning kommer jag att använda gridgenerator av MindPlay. Det är en mycket enkel och lätt grid generator.

Jag vill ha en visning med tre kolumner och jag måste se till att mina pixlar är 450. Justera därefter och hoppa till fliken "Exportera". Vi kommer inte att gå över *typografi funktioner i denna handledning, även om det här verkligen är värt att utforska på egen hand.

På fliken Exportera använd den högsta "Style Sheet" -ramen och rulla ner tills du ser "Grid" -kommentaren. Du kommer att kopiera allt från kommentaren till botten av den här ramen. Det borde bara vara ca 30 linjer

Steg 3: Uppdatera ditt WordPress Stylesheet

Logga in på din WordPress-webbplats och gå till Utseende> Redaktör.

Nederst till höger på redigeringspanelen ser du en styles.css fil (eller något liknande, beroende på ditt tema). Klicka här för att öppna den.

Bläddra till botten av arket och klistra in din pre från MindPlay.dk:

Steg 4: Implementering av nätet

För att använda nätet skapar du helt enkelt en

med klassen "rutnät". Varje område i rutnätet definieras i CSS. Öppna en ny sida eller posta. Gå till HTML-fliken för att börja bygga ditt nät.

Här är några exempel som du kan klistra in på plats för att komma igång:

   Vänster kolumn
  Mellanskolumn
  Höger kolumn

Så här ser det ut i WordPress:

Spara / uppdatera sidan och titta på resultaten. I mitt fall är detta hemsidan för webbplatsen:

Som du kan se från ovanstående skärmdump har vi våra tre kolumner och allt är rätt där vi förväntar oss att det ska vara. Du kan lägga till så många rader som du vill genom att helt enkelt börja med följande

    Vänster kolumn
  Mellanskolumn
  Höger kolumn
    Vänster rad # 2
  Mellanrad # 2
  Höger rad # 2

Så här ser det ut så långt:

Nu kan du lägga till bilder eller text, och stila varje rad exakt som du vill.

Tips för Tweaking

Det kan hända att du har problem i vissa webbläsare när du har mer än en rad. För att komma runt denna fråga måste du göra marginalen längst till höger (.grid-m4, i vårt fall) till den höjd du vill att varje rad ska vara. Om du använder bilder som är 250px med 250px, gör sedan radhöjden i .grid-m4 att vara 250px:

.grid-m4 float: left; bredd: 20px; höjd: 250px;

Detta kommer att se till att din .grid-m1 på vänster sida av nästa rad flyter inte upp till raden ovanför den.

Om du vill ställa bakgrunden till hela nätet måste du justera höjden på .rutnät klass. Så låt oss säga att du har fyra rader på ditt rutnät, var och en 250px. Du kommer att vilja lägga till höjd till .grid-klassen på 1000px så att alla stylingelement du lägger till kommer att täcka hela nätdesignen.

.rutnät width: 450px; höjd: 1000px; marginal: auto;

Beroende på vilken version av MindPlay.dk-nätgenerator du använder kan webbplatsen inte generera ".grid-m4" och istället behöver du använda .grid-m1 efter .grid-c3 för att säkerställa att ditt nät sträcker sig till rätt plats:

  Vänster kolumn
  Mellanskolumn
  Höger kolumn

Slutliga resultat

Så här ser mina slutresultat ut med två rader och lite enkel grafik:

Ha kul att designa och kom ihåg att du kan ställa ditt rutnät på något sätt du vill.

Redaktörens anteckning: Det här inlägget är skrivet av Tara Hornor för Hongkiat.com. Tara har en examen på engelska och skriver om marknadsföring, reklam, branding, grafisk design och desktop publishing. Förutom sin skriftliga karriär, njuter Tara också av sin man och två barn.