Cómo diseñar una cabecera de WordPress

La cabecera de WordPress es la sección superior de tu blog o sitio web donde se encuentra su logotipo o título junto con otros componentes tales como el menú de navegación y la caja de búsqueda. Algunos temas de WordPress vienen con opciones para cambiar el color y la imagen de la cabecera y le permiten personalizar el menú del sitio. Si usted tiene un blog de WordPress alojado en sí mismo, puede personalizar la cabecera (al igual que otras secciones del blog), añadiendo o cambiar el código dentro de la plantilla de cabecera de su tema de WordPress.

Instrucciones

1 Crear una maqueta de su diseño. Se puede utilizar una aplicación de gráficos como Photoshop o PaintShop Pro para visualizar completamente lo que usted quiere que su cabecera para que parezca.

2 Abrir Bloc de notas o su editor de texto preferido y el tipo en el marco básico de su cabecera. Por ejemplo, un marco básico para una cabecera que incluye el nombre del sitio, descripción y navegación del sitio debe tener este aspecto:

<Div id = "header">

<H1>

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

</ H1>

<Div class = "description">

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

</ Div>

<Ul class = "nav">

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

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

</ Ul>

</ Div>

Guarde este código en un archivo llamado "header.php".

3 Añadir sus estilos de cabecera en el archivo "styles.css" de su tema de WordPress. Esto se puede encontrar dentro de la carpeta de tu tema. Añadir un color de fondo, fuentes definir y establecer disposiciones para cada sección. Por ejemplo, una cabecera de una imagen de fondo y las fuentes escritas en Courier con tendrá el siguiente código CSS:

{cabecera

background: url ( "/ images / headerimage.jpg") no se repita-parte inferior central;

font-family: Courier, serif;

font-weight: bold;

}

4 Coloque la hoja de estilo a su archivo "header.php" usando el siguiente código:

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

Guardar y cargar el archivo "header.php" a su carpeta de temas de WordPress.