aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

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 theme

Principalmente tenemos que diferenciar claramente 4 secciones en la web (luego el gusto de cada uno llevará a modificar o suprimir algunas de ellas).

1. Header, cabecera
2. Sidebar, barra de herramientas
3. Content , contenido central
4. Footer, pie del theme

Un poco de código.

 

<div id=”page”>
    <div id=”header”>CABECERA</div>
    <div id=”sidebar”>MENU</div>
    <div id=”content”>CONTENIDO</div>
    <div id=”footer”>PIE</div>
</div> 

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.

Compártelo