Hvordan Design en WordPress Header

WordPress header er den øverste delen av din blogg eller nettside hvor din logo eller tittel ligger sammen med andre komponenter som navigasjonsmenyen og søkefelt. Noen WordPress temaer kommer med alternativer for å endre farge og bilde på topp- og lar deg tilpasse din side menyen. Hvis du har en egen vert WordPress blog, kan du tilpasse header (som andre deler av bloggen) ved å legge til eller endre kode i din WordPress tema header mal.

Bruksanvisning

1 Lag en mock-up av designen. Du kan bruke et grafikkprogram som Photoshop eller Paintshop Pro for fullt visualisere hva du vil at overskriften for å se ut.

2 Åpne Notepad eller en teksteditor og skriv inn den grunnleggende rammen av spissen. For eksempel, en grunnleggende ramme for en overskrift som inkluderer navigasjon nettstedet navn, beskrivelse og området skal se slik ut:

<Div id = "header">

<H1>

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

</ H1>

<Div class = "description">

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

</ Div>

<Ul class = "nav">

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

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

</ Ul>

</ Div>

Lagre denne koden i en fil som heter "header.php".

3 Legg til header stiler i "styles.css" filen din WordPress tema. Dette kan bli funnet innen temaet mappe. Legg en bakgrunnsfarge, definere fonter og satt oppsett for hver del. For eksempel vil en header med et bakgrunnsbilde og skrifter skrevet i Courier har følgende CSS-kode:

header {

bakgrunn: URL ( "/ images / headerimage.jpg") no-repeat nederst i midten;

font-family: Courier, serif;

font-weight: bold;

}

4 Fest stilark til "header.php" filen ved hjelp av følgende kode:

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

Lagre og laste opp "header.php" filen til tema-mappen WordPress.