Bueno, despues de toda la preparación, creo que es momento de ir poniendonos manos a la obra, ya
tenemos bastante información para conseguir nuestra
misión de montar un theme para wordpress.
Vamos a explicar como montar una estructura simple sobre la cual
trabajaremos, yo recomiendo montarlo todo en un fichero y luego cuando
ya este listo separarlo en varios para separar claramente las secciones.
Estructura simple de un themePrincipalmente tenemos que diferenciar claramente 4 secciones en la
web (luego el gusto de cada uno llevará a modificar o suprimir algunas
de ellas).
- Header, cabecera
- Sidebar, barra de herramientas
- Content , contenido central
- Footer, pie del theme
Un poco de código.
esta forma tenemos montada una estructura bastante personalizable
con div’s que mediante CSS iremos montando para darle la forma que
deseamos. Usaremos un div llamado page, que nos englobará al demás para
hacerlo centrado. A mi me gustan más los themes centrados y con un
tamaño de 740px (más o menos) por que permiten la correcta
visualización en resoluciones de pantalla de casi cualquier tipo (no
640×480).
Luego diferenciamos cada sección de la web con un div que albergará
una serie de elementos con el fin de formar cada sección con un aspecto
personalizado.
Ahora con un fichero css, daremos forma a las secciones de la web, para ello tenemos el fichero style.css.
En la cabecera del fichero es donde tendremos los datos de nuestro theme que aparecerán en el menu administrador.
/*
Theme Name: Nombre del Theme
Theme URI: URL del theme
Version: Version del theme
Author: Nombre del autor
Author URI: URL del autor */
Estas deben ser las primeras líneas del fichero ya que sin ellas el
theme no será valido y por lo tanto descartado por Wordpress.
#page {
width:720px;
border:3px red solid; }
#header {
height:75px;
border: 3px green solid; }
#sidebar {
float:right; // Si queremos el menu a la izquierda basta con usar left para desplazar el menu a la #izquierda.
width:200px;
border: 3px #FFCC00 solid; }
content {
border: 3px #CCFF00 solid; }
#footer {
border: 3px #00CCFF solid; }
Ejemplo de como queda.