Construyendo un tema de WordPress desde cero

Hace unos días unos amigos me pidieron que les arme un sitio web para una organización. Como los lectores de este blog supondrán, mi primera recomendación fue la de montar el sitio sobre WordPress, no sólo por las casi ilimitadas opciones que nos permite a través de su propio core o los plugins que se le pueden agregar, sino porque además con programas como el Live Writer o las respectivas apps para iPhone y Blackberry, su gestión diaria se simplifica bastante.

Además de comenzar a laburar este pequeño proyecto, me propuse una meta, casi como un desafío personal: crear el template (tema) desde cero. Es decir, no usar ningún template de libre distribución o pago, sino crear toda la estructura, el diseño y el diagrama desde un bloc de notas en blanco. Me pareció interesante poder aportarles aunque sea los pasos que fui dando:

1. Maquetado: en principio comencé a diagramar en un programa de diseño vectorial (Adobe Illustrator CS4) la estructura formal, el esqueleto sobre el cuál iría avanzando luego en materia de diseño. Luego de haber tenido un plano-esquema de cuadrados y rectángulos con las medidas de cada uno de los sectores, pasamos al segundo paso. Algunas recomendaciones para esta etapa.

2. Diseño: esa misma maqueta trabajada en vectores, la importé desde un programa de edición de mapas de bits (Adobe Photoshop CS4), donde comencé a trabajar el diseño conceptual de cada espacio, laburar los fondos, las imágenes necesarias para cada lugar, ir viendo que vínculos iban a ser gráficos, etc.

3. Trasladar el diseño a HTML: dado que desde el primer momento el diseño fue pensado para aplicar en WP, preferí evitar de plano cualquier editor al estilo DreamWeaver o FrontPage, para tratar de ensuciar el código lo menos posible. Entonces abrí un editor de texto plano (TextPad) y comencé a construir el esquema de divs desde cero. Usé como modelo para algunas cuestiones (formato del head, etc.) este mismo blog. En principio fui testeando todo desde el mismo archivo .html que contenía todo. Una vez que más o menos el diseño se iba pareciendo a lo que había planteado en la etapa 2, fui pensando como montar todo esto sobre WordPress.

4. Adaptar para WordPress: en esta etapa me fue de gran utilidad esta guía tutorial (en inglés), sobre como adaptar los códigos HTML y PHP para que se vinculen directamente con WP, los archivos necesarios para que el tema funcione y uno de los puntos fundamentales para este proyecto en particular, widgetizar las partes dinámicas y lograr levantar el loop interno de entradas. A esta altura el pequeño archivo ‘index.html’ que había comenzado con una pocas líneas de código, había crecido por todos los flancos, el CSS abundaba lo suficiente y cada parte estaba lista para levantar los contenidos dinámicos. Necesariamente tenía que migrar a un servidor el trabajo realizado.

5. Montar sobre WordPress: aquí tenía dos opciones, montar todo esto sobre un WP en algún sitio dummy o subdominio en el servidor que tenemos en Ciclónico, o montarlo sobre un servidor virtual en mi propia máquina. Opte por esta segunda opción, tras lo cuál active el viejo y querido WAMP (ahora WampServer) y comencé a instalar un WordPress 2.9.1 en español sobre mi servidor local. Luego de la “famosa instalación en 5 minutos” me propuse a mover todos los archivos de la carpeta temporal en la que estaba trabajando a la nueva carpeta del template recientemente creado, que todavía debía adaptar para que sea efectivamente funcional. Es impresionante que un tema pueda funcionar con sólo dos archivos: el ‘index.php’ y el ‘style.css’, esta claro que para que sea completamente funcional se necesitan varios mas, pero con esos dos solos la máquina ya arranca.

La verdad que como experiencia todo el proceso estuvo más que interesante, por cuestiones particulares del mismo no les puedo mostrar todavía el producto terminado, pero ni bien pueda lo haré.

Entradas relacionadas:

• WordPress 2.9 Carmen McRae – December 26, 2009
• DosCeroLife 2.0 – January 7, 2009
• Wordpress 2.7 oficial – December 12, 2008