Hvordan Design en Wordpress tema med et rutenett

March 23

Mange Wordpress temaer bruke et standard format, med en lang horisontal header på toppen, og under den et innholdsområde med en eller flere sidefelt. Men dette betyr ikke å være tilfelle, og Wordpress maler kan ta noen form eller størrelse. Hvorfor ikke bruke et rutenett tema å legge til variasjon til nettstedet ditt, og skiller den fra resten? Hver del av rutenettet kan være hjemme til en annen funksjon i området, organisert ved hjelp av HTML og CSS-kode.

Bruksanvisning

1 Gå til starkerstheme.com og laste ned ZIP-filen. Når nedlastingen er fullført, pakke ut filen til datamaskinen. Dette er en blank "Developer" tema som du kan bruke til å designe dine egne temaer.

2 Open "style.css" og legg til følgende kode på en ny linje:

gridrow {display: block; width: 100%} gittercelle {width: 33%; float: left; border: solid 1px;}

3 Kopier og lim inn koden nedenfor i "404.php", "archive.php", "category.php", "index.php", "search.php", "single.php", "tag.php," og "page.php" filer, like under "get_header ();>?" linje:

<Div id = "gittercelle"> rad en celle 1 </ div>

<Div id = "gittercelle"> rad en celle 2 </ div>

<Div id = "gittercelle"> rad en celle 3 </ div>

</ Div>

<Div id = "gittercelle"> rad to celle 1 </ div>

<Div id = "gittercelle"> rad 2 celle 2 </ div>

<Div id = "gittercelle"> rad to celle 3 </ div>

</ Div>

<Div id = "gittercelle"> rad 3 cellers en </ div>

<Div id = "gittercelle"> rad 3 celle 2 </ div>

<Div id = "gittercelle"> rad 3 cellers 3 </ div>

</ Div>

Dette skaper en tre-by-tre rutenettet, med hver celle merket slik at du kan finne den lett i koden. Lagre disse filene, men holde dem åpne.

4 Bytt celle etiketter med den informasjonen du ønsker i hver celle. For eksempel kan du vil at nettstedet logoen øverst til venstre, noen navigasjonsknapper i toppen midten, og opphavsretten din informasjon på nederste rad.

5 Plasser hovedinnholdet i bloggen i rutenettet cellen du vil. For å oppnå dette, må du skifte cellen merket med "loop" i hver av filene du har åpne. Sløyfen er alt mellom og med linjen starter med og slutter med "<? Php if (have_posts ()?" "<? Php EndWhile;?". Lagre alle filene når du er ferdig.

6 Legg noen annen styling du ønsker ved å legge til CSS-koden til "style.css" fil. Du kan også endre størrelsen på gittercellene ved å endre "height" og "width" attributtene til "#gridcell" linje.

Hint

Hvis du øker størrelsen grensen av cellene eller legge polstring, vil de ikke lenger passer på skjermen horisontalt. For å fikse dette, redusere "width" av "#gridcell" linje i "style.css" med 1 prosent. Hvis problemet vedvarer, redusere med en annen en prosent og gjenta til rutenettet vises riktig.