Come progettare una intestazione WordPress

February 17

Come progettare una intestazione WordPress


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

istruzione

1 Creazione di un mock-up del vostro disegno. È possibile utilizzare un'applicazione grafica come Photoshop o PaintShop Pro di visualizzare appieno ciò che si desidera che il colpo di testa per assomigliare.

2 Aprire Blocco note o un editor di testo preferito e digitare la struttura di base della vostra testata. Ad esempio, un quadro di base per un colpo di testa che comprende il nome del sito, la descrizione e la navigazione del sito dovrebbe essere simile a questo:

<Div id = "header">

<H1>

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

</ H1>

<Div class = "description">

<? Php bloginfo ( 'descrizione'); ?>

</ Div>

<Ul class = "nav">

<Li> "title =" <a href="<?php eco get_option('home'); ?> <? Php bloginfo ( 'name');?> "> Home page </a> </ li>

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

</ Ul>

</ Div>

Salvare questo codice in un file chiamato "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 i layout per ogni sezione. Ad esempio, un colpo di testa un'immagine di sfondo e caratteri scritti in Courier con avrà il seguente codice CSS:

intestazione {

fondo: URL ( "/ images / headerimage.jpg") no-repeat centro in basso;

font-family: Courier, serif;

font-weight: bold;

}

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

<Link rel = "stylesheet" type = "text / css" media = "all" href = "<? Php bloginfo ( 'stylesheet_url');?>" />

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