José Cabezas Lucero

Este es un pequeño tutorial de como desarrollaar un plantilla para WordPress usando el framework 960 Grid System para CSS basado en un sistema de grillas.

Este tutorial estará en unas cuantas partes para ir poco a poco explicando los temas.

Parte I

1. Estructura Base de archivos de una Plantilla WordPress
2. Estrucutura Base XHTML de la plantilla
3. Aplicando el sistema de grillas 960 a la estructura XHTML
4. Estructura de archivos Base de Wordpress más los arhivos del framework 960

En este capitulo partiremos con la estructura base de WordPress y  al mismo tiempo con la estructura de la hoja de estilos que dará forma a nuestra plantilla y luego ir mezclando estas junto con el framework 960.

1. Estructura Base de archivos de una Plantilla WordPress

Si bien los sabemos, WordPress posee una estructura propia de archivos asi como tambien los nombres de estos, pero a medida que vamos avanzando nos daremos cuenta que podemos personalizar estos arhivos, pero por ahora sigamos los propios de WordPress.

Los archivos minimos que debe tener una plantilla WordPress son los siguientes:

• header.php
• index.php
• sidebar.php
• footer.php
• functions.php
• style.css

Partiremos con los archivos mínimos, pero a medida que iremos avanzando agregaremos otros más.

2. Estructura Base XHTML de la plantilla

Esta estructura XHTML es la que seguiremos hasta el final de este tutorial

<div id="wrapper">
     <div id="header"></div>
     <div id="menu"></div>
     <div id="content">
          <div id="post"></div>
          <div id="sidebar"></div>
     </div>
     <div id="footer"></div>
</div>

Graficamente sería:

3. Aplicando el sistema de grillas 960 a la estructura XHTML

Cabe mencionar que el framework 960 posee grillas divididas en 12, 16 y 24 columnas con un ancho total de 960 pixeles, de ahí el nombre 960 Grid.

En nuestra plantilla usaremos la grilla de 16 columnas.

<div class="container_16" id="wrapper">
     <div class="grid_16" id="header"></div>
     <div class="clear"></div>
     <div class="grid_16" id="menu"></div>
     <div class="clear"></div>
     <div class="clearfix" id="content">
          <div class="grid_12 alpha" id="post"></div>
          <div class="grid_4 omega" id="sidebar"></div>
     </div>
     <div class="clear"></div>
     <div class="grid_16" id="footer"></div>
</div>

Graficamente sería:

4. Estructura de archivos Base de Wordpress más los arhivos del framework 960

El directorio de nuestra plantilla debería tener los siguientes archivos y sub-directorios:

• header.php
• index.php
• sidebar.php
• footer.php
• functions.php
• style.css
• css/
  • 960.css
  • reset.css
  • text.css
• images/

Conclusión

Ya con estos 4 temas de introducción estamos listos para empezar a darle forma a nuestra plantilla, el cual eran necesarios para entender las partes básicas para el desarrollo de una plantilla de WordPress. Sobre todo si eres nuevo en WordPress te puede servir para profundizar más en creación de tus propias plantillas.

En la Parte II, empezaremos a llenar con condigo XHTML, scripts PHP y funciones propias de WordPress  los respectivos archivos mencionados en esta Parte I.