Nwlapcug.com


Come progettare un'intestazione di WordPress

Come progettare un'intestazione di WordPress


L'intestazione di WordPress è la parte superiore del tuo blog o sito web dove si trova insieme ad altri componenti, ad esempio la casella di ricerca e menu di navigazione il vostro logo o titolo. Alcuni temi di WordPress sono dotate di opzioni per cambiare il colore e l'immagine della testata e consentono di personalizzare il menu del sito. Se si dispone di un self-hosted blog WordPress, è possibile personalizzare l'intestazione (come altre sezioni del blog) aggiungendo o modificando il codice all'interno del modello di intestazione del vostro tema WordPress.

Istruzioni

1

Creare un mock-up del vostro disegno. È possibile utilizzare un'applicazione grafica come Photoshop o Paint Shop Pro per visualizzare completamente ciò che si vuole tua intestazione per assomigliare.

2

Aprire Blocco note o il vostro editor di testo preferito e digitare nel framework di base dell'intestazione. Ad esempio, un quadro di base per un'intestazione che include la navigazione del sito, descrizione e il nome sito dovrebbe assomigliare a questo:

< div id = "header" >

< h1 >

< a href = "<? php bloginfo('URL');? >" ><? bloginfo('name') php;? >< /a >

< / h1 >

< div class = "description" >

<? php bloginfo('description');? >

< / div >

< ul classe = "nav" >

< li >< un href = "<? php echo get_Option;? >" title = "<? php bloginfo('name');? >" > Home < /a >< / li >

<? php wp_list_pages('title_li=');? >

</UL >

< / div >

Salvare questo codice in un file denominato "header. php".

3

Aggiungere gli stili di intestazione nel file "Styles. css" del vostro tema WordPress. Questo può essere trovato all'interno della cartella del vostro tema. Aggiungere un colore di sfondo, definire i caratteri e impostare il layout per ogni sezione. Ad esempio, un'intestazione con un'immagine di sfondo e i caratteri scritti in corriere avrà il seguente codice CSS:

intestazione () {

Priorità bassa: URL("/images/headerimage.jpg") al centro in basso no-repeat;

font-family: Courier, serif;

font-weight: bold;

}

4

Collegare il foglio di stile al file "header. php" utilizzando il seguente codice:

< link rel = "stylesheet" type = "text/css" media = "tutti" href = "<? php bloginfo ('stylesheet_url');? >" / >

Salvare e caricare il file "header. php" nella cartella del tema WordPress.