Molti temi Wordpress utilizzano un formato standard, con una lunga intestazione orizzontale nella parte superiore, e sotto un area di contenuto con una o più barre laterali. Tuttavia, questo non deve essere il caso e modelli di Wordpress può assumere qualsiasi forma o dimensione. Perché non utilizzare un tema griglia per aggiungere varietà al tuo sito e impostare lo distingue dal resto? Ogni sezione della griglia può essere sede di una caratteristica diversa del sito, organizzato utilizzando codice HTML e CSS.

istruzione

1 Vai a starkerstheme.com e scaricare il file .zip. Quando il download è completo, estrarre il file sul computer. Questo è un tema vuoto "Sviluppatore" che è possibile utilizzare per progettare i propri temi.

2 Apri "style.css" e aggiungere il seguente codice in una nuova riga:

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

3 Copia e incolla il codice qui sotto nella "404.php," "archive.php," "category.php", "index.php", "search.php," "single.php," "tag.php," e file "page.php", appena sotto il "get_header ();>?" linea:

<Div id = "gridrow">

<Div id = "gridcell"> riga 1 cella 1 </ div>

<Div id = "gridcell"> riga 1 cella 2 </ div>

<Div id = "gridcell"> riga 1 cella 3 </ div>

</ Div>

<Div id = "gridrow">

<Div id = "gridcell"> riga 2 cella 1 </ div>

<Div id = "gridcell"> fila 2 delle cellule 2 </ div>

<Div id = "gridcell"> riga 2 cella 3 </ div>

</ Div>

<Div id = "gridrow">

<Div id = "gridcell"> riga 3 celle 1 </ div>

<Div id = "gridcell"> fila 3 celle 2 </ div>

<Div id = "gridcell"> fila 3 celle 3 </ div>

</ Div>

Questo crea un layout di griglia tre per tre, con ogni cella con etichetta in modo da poter trovare facilmente nel codice. Salvare questi file, ma tenerli aperti.

4 Sostituire le etichette delle celle con le informazioni desiderate in ogni cella. Per esempio, si potrebbe desiderare il tuo logo sito web in alto a sinistra, alcuni pulsanti di navigazione in alto al centro, e le informazioni di copyright sulla riga in basso.

5 Posizionare il contenuto principale del blog nella cella della griglia che si desidera. Per fare questo, sostituire l'etichetta cella con il "loop" all'interno di ciascuno dei file che avete aperto. Il ciclo è tutto tra, compresa la riga che inizia con e termina con "<? Php if (have_posts ()?" "<? Php endwhile;?". Salvare tutti i file quando fatto.

6 Aggiungere qualsiasi altro stile che si desidera con l'aggiunta di codice CSS nel file "style.css". È inoltre possibile modificare la dimensione delle celle della griglia alterando la "altezza" e gli attributi "width" della linea "#gridcell".

Consigli e avvertenze

• Se si aumenta la dimensione del bordo delle celle o si aggiunge imbottitura, non sarà più in forma sullo schermo in senso orizzontale. Per risolvere questo problema, ridurre la "larghezza" della linea "#gridcell" in "style.css" di 1 per cento. Se il problema persiste, ridurre di un altro 1 per cento e ripetere fino a quando la griglia visualizza correttamente.