Como crear un tema para WordPress (Parte 2)

Llegamos a la segunda parte de este tutorial sobre como diseñar temas para WordPress utilizando el framework Whiteboard. Para quienes no conocían el curso pueden ver la primera parte de este tutorial aquí mismo en el blog y luego continuar con esta segunda entrega en la que modificaremos un poco la cabecera de WordPress y nos adentraremos más al diseño con CSS.

Aprender CSS

Para todos los tutoriales sobre diseño de temas de WordPress será necesario tener conocimientos previos de CSS, sin embargo, si no sabes por donde empezar sería bueno que iniciaras un curso en línea de algunos de los siguientes sitios:

• W3Schools
• CSSYa
• CSS Basics (En inglés)
• Libros web

Estos y otros portales de Internet te ayudarán a la tarea de aprender CSS, si no, existe la posibilidad de hacer videotutoriales sobre CSS siempre y cuando lo aclame la gente. Así que seguimos con el curso de diseño de temas de WordPress.

Moldeando la cabecera

Los divs son una especie de etiquetas que nos permiten moldear sus características como el color, tamaño, entre otros y con CSS podemos definir algunos parámetros básicos. Así que nos dirigimos a nuestro header.php y buscamos un div cuyo atributo ID sea “header”, eso será la referencia para modificar nuestra hoja de estilos.

En nuestro styles.css añadimos el siguiente código:

#header {
width:900px; //Ancho
height:150px; //Alto
}

Podemos también definir un fondo para nuestra cabecera, ya sea una imagen o un color solido. Esto lo hacemos con las siguientes propiedades que también deben ser añadidas dentro de #header:

background-image: url(imagenes/fondo.png); //Con esto ponemos una imagen
background:#f5f5f5; //Colocamos un color de fondo

Para la tarea de colocar un fondo se debe tener muchísimo cuidado, la imagen debe ser lo menos pesada posible (en cuánto a kilobytes) ya que si no ralentizará la carga de nuestra página, por lo que es recomendable usar también colores sólidos.

Crear un menú

Para hacer un menú en WordPress podemos utilizar HTML clásico con listas, o también podemos utilizar funciones propias de WordPress que llamarán y mostrarán todas las páginas de nuestro sitio en forma de menú:

 'Header Menu' )); ?>

Lo recomendable sería hacer un menú con listas, y para hacerlo horizontal podríamos usar la propiedad display:inline de la siguiente manera:

.menu ul {padding-top:5px;}
.menu li {display:inline;margin-left:-5px;padding-bottom:10px;}

http://www.youtube.com/watch?v=sMk9M9y0sYA

Pueden una versión en más alta calidad del vídeo desde aquí.