Diseñando Themes para WordPress: (X)HTML + CSS

Bueno hace poco escribí un artículo para el mmug, de como diseñar themes para wordpress de forma básica, he aquí la cosa:

En este sencillo artículo aprenderemos el por qué de la popularidad de wordpress y veremos como modificar el “theme” de una de las plataformas para blogs más poderosas, sólidas, populares y gratuitas de la red.

Muchos se preguntarán en este momento…¿¡Pero qué es un Theme!?. Bueno para todos aquellos curiosos que no lo saben aún, un “theme” o “tema” para wordpress, es un conjunto de archivos y estilos que nos permiten cambiar el look de nuestro sitio. A diferencia de un “template” el “tema” de WP incluye desarrollo en Php, mientras que el segundo es una simple plantilla.

Muchos se han preguntado el por qué de la popularidad de WordPress y es sencillamente por que te permite trabajar en forma creativa si eres diseñador y rápida y segura si eres desarrollador, separando en forma fácil ambos tipos de trabajo (presentación y desarrollo).

WordPress corre gracias a el lenguaje de programación Php, uno de los lenguajes más extendidos de la red y funciona con una base de datos MySQL, también dentro de las más extendidas, y he ahí el por qué de su popularidad.

¿Por que sería bueno trabajar con wordpress?

- Por que es una plataforma que viene lista y no necesitas descubrir la rueda, si no, mejorarla.

- Te permite entender y reforzar conocimientos de programación en PHP y lucirte como diseñador en (x)HTML + CSS.

- Tiene soporte sólido y no debería presentar muchos bugs.

- Y una de las más importantes es opensource.

Muchos importantes sitios web corren bajo esta plataforma, su facilidad de uso la ha hecho estar entre las mejores y ahora veremos por que la gente le tiene tanto cariño. Ok muchachos sin tanto bla bla…manos a la ubre…perdón obra.

Ingredientes:

- Descargar alguna versión de wordpress (pueden descargarla de www.wordpress.org)
- Manejo de avanzado de (X)HTML
- Dominio CSS
- Conocimientos básicos de PHP
- Haber instalado alguna versión de wordpress o tener conocimientos sobre este.
- Algo de manejo del “english”…o espanglish en el peor de los casos.

No voy a perder tiempo explicando: como se crea una base de datos, como se programa en php, o como se instala wordpress. Para esta última duda en los tutoriales del mmug hay uno muy bueno sobre la instalación de este sistema de bitácoras y para las otras hay algo muy “choriflai” llamado Google. Ja!

Este artículo/tutorial solo pretende que entiendas como poder modificarlo en su parte básica, para temas más complejos dependerá exclusivamente de tu interés.

I. Ubicándonos en las carpetas.

Una vez que nosotros hemos instalado la aplicación (ya sea en modo local o remoto) vamos a buscar (donde instalamos wordpress) una carpeta llamada “wp-content”. Una vez que la hemos encontrado, nos auto-aplaudimos y procedemos a ver que, dentro de esta, tenemos 3 carpetas y un archivo php:

- plugins (carpeta)
- uploads (carpeta)
- themes (carpeta)
- index.php

De estas la que más nos interesa es la carpeta “themes”, y sobre la cual vamos a trabajar. Esta carpeta es importantísima, por que aquí se almacenan todos los archivos donde están los “temas” que queremos aplicar a nuestra plataforma WP.

Dentro de la carpeta “themes” encontramos 2 carpetas, una de ellas llamada “Default” y la otra llamada “Classic”. Estos son, ni nada mas ni nada menos, que los diseños predeterminados que nos ofrece el programa, y sobre los cuales vamos a aprender bastante.

II. Creando nuestros archivos

Una vez que estamos dentro de la carpeta “themes” y visualizamos las carpetas “default” y “classic”, vamos a crear una carpeta nueva -dentro de la carpeta “theme” como ya dije, no se me desconcentre- en la cual se almacenará nuestro diseño, y la vamos a llamar muy originalmente…”prueba”. Después de esa hemorragia de creatividad y originalidad, dentro de nuestra carpeta “prueba” vamos a crear 8 archivos, los cuales paso a nombrar:

- index.php
- header.php
- sidebar.php
- footer.php
- searchform.php
- page.php
- style.css
- midiseno.html

(Ojo: Los archivos .php deben ser creados absolutamente vacíos, a esto me refiero sin información, nada de etiquetas en su interior. Ni etiquetas html ni código php, ni nada raro. Repito: NADA DE NADA!…gracias J )

III. Entrando a Picar (Disculpen lo poblacional)

Ok. Una vez que ubicamos estos 8 archivos dentro de nuestra carpeta “prueba” procedo a explicar de qué se trata cada una de ellas.

Index.php

Este es el archivo principal, ya que, se encarga de llamar a los otros archivos y formar el diseño que nosotros vemos en pantalla, almacena en él parte del contenido neto del blog.

Header.php

Es la cabecera del sitio tanto para etiquetas como para la parte visual.

Sidebar.php

Almacena listas de datos, es la típica barra lateral donde encontramos: categorías, rss, blogroll, buscador, etc.

Footer.php

El querido (y amigo de los diseñadores) pie de página. Donde ponemos nuestro nombre, si el sitio valida, la resolución ideal, derechos, etc, etc.

Searchform.php

El buscador…oblgatorio.

Page.php

Este almacena el contenido que vemos cuando hacemos click en “leer más”. También se encuentra aquí el formulario para los comentarios.

Style.css

Nuestra querida hoja de estilos. Aquí “enchulamos” nuestro sitio ¡Fundamental!

Midiseno.html

Este archivo HTML será el “borrador” en el cual definiremos nuestro diseño antes de montarlo para wordpress.

IV. Manos a la obra compañeros todos

En nuestro archivo midiseno.html vamos a crear la siguiente estructura:

<div id=”page”>
<div id=”header”>Aquí va la Cabecera</div>
<div id=”sidebar”>Aquí va la barra lateral</div>
<div id=”content”>Aquí va el contenido</div>
<div id=”footer”>Aquí va el pie de página</div>
</div>

Dentro de las etiquetas va una pequeña explicación de que se trata cada una, así que no profundizaré en esto.

Muy bien ahora metámonos en nuestra hoja de estilos (style.css). Este es un ejemplo sencillo no contiene imágenes ni nada complejo, pero verán como sí funciona esta cosa de wordpress. Si lo desean pueden copiar este y pegarlos en style.css:

body {
text-align: center;
margin: 0;
background: #F5F5F5;
color: #333333;
}

#page {
margin: auto;
margin-top: 30px;
width: 90%;
border: #333333 5px solid;
}

#header {
width: 100%;
background: #FFFFCC;
text-align: left;
border: 1px solid dotted #333333;
float: left;
}

#sidebar {
width: 40%;
background: #FFE6CC;
text-align: left;
border: 1px solid dotted #333333;
float: right;
}

#content {
width: 60%;
background: #D5FFAA;
text-align: left;
border: 1px solid dotted #333333;
float: left;
}

#footer {
width: 100%;
background: #D6FEFA;
border: 1px solid dotted #333333;
clear: both;
}

Ahora pueden revisar como queda midiseno.html, y verán como funcionan los estilos que le hemos aplicado. Si bien el diseño que le aplique se parece a la bandera gay (sin ofender a nadie) les servirá para poder distinguir las secciones. Esto no quita que ustedes puedan aplicar gráficas, solo lo hice como muestra…es un diseño bruto…muy bruto…demasiado bruto…en fin.

V. Copypasteando…así de Shorizo!

Si bien hay algunas entidades educacionales que se especializan en el tema y algunos políticos también, para este artículo es completamente legal, solo por hoy, no se acostumbren.

Vamos a volver a nuestra carpeta “Theme” (que se encuentra dentro de wp-content) abrimos la carpeta “default” que se encuentra dentro de esta y como podemos ver hay archivos de igual nombre que en nuestra carpeta “pruebas” ooohhh!, asi es, es la misma cuestión.

¿Entonces que hacemos?…simple…buscamos el index.php (de la carpeta default) lo abrimos con un editor de html seleccionamos su contenido (código) vamos a nuestra carpeta “pruebas” buscamos nuestro archivo index.php –que está vacio- y le pegamos el contenido, ahora hacemos los mismo con nuestro archivo header.php…vamos a la carpeta dafault buscamos el archivo header.php lo abrimos con un editor html copiamos su contenido, vamos a nuestra carpeta pruebas buscamos nuestro archivo header.php –que vuelvo a repetir está vacio- y lo pegamos…en fin hacemos esto con cada uno de nuestros archivos php:

- index.php
- header.php
- sidebar.php
- footer.php
- searchform.php
- page.php

Si puedo leer sus mentes se preguntarán ¿pero en la carpeta default hay más archivos?, si lo sé, pero estos no son necesarios por el momento…y si tanto les urge Googleen po’,

Muy bien si ya copiaron todos los archivos php ya estamos casi listos, es verdad que pudieron haber tomado los archivos mencionados de la carpeta default y haberlos copiado, pero quería que se familiarizaran con los documentos y el código en sí. Recuerden no reemplazar el archivo css.

VI. Llegooooó la hora de decir adios…♪♫

Hemos llegado al final del artículo, espero que les haya servido, ahora solo deben ir al panel de administración de WordPress y en la sección de diseño (plantillas) escoger nuestro theme que debería tener el nombre “pruebas” sí, como nuestra carpeta.

Al visualizar el diseño se encontrarán con algo bastante rudimental, pero como para este artículo se necesitaban conocimientos de (x)html, CSS, Php, se podrán dar cuenta al entrar al código de los archivos de nuestra carpeta pruebas y haciendo unas sencillas modificaciones a las etiquetas podrán alterar todo lo que se les plazca.

Hay muchas maneras de diagramar pueden utilizar menús horizontales, tres y hasta cuatro columnas…etc…pero todo va a depender de el interés que tengan ustedes por esta plataforma.

Si tienes dudas o esto no les resulta…eeeh yo no existo!…no, broma dejenlas aquí. Para todo lo demás existe Google.

Bytes.

Update: Estoy profundizando la parte de CSS, esperando que el dios del tiempo me lo permita…