Crear tema de WordPress desde 0 – Parte 1: La estructura
Metiéndonos un poco en materia para continuar (o comenzar, según se mire) lo que habíamos empezado hace algunos días pasamos a esta primera parte de la saga Crear un tema de WordPressdesde 0.
Tras el salto podréis leer el artículo completo (es bastante largo).
Pensando en el contenido
Lo primero que deberemos hacer, ante todo, es pensar y tener las cosas bien claras desde el principio:
- Tipo de contenido que tendrá nuestra web.
- Elementos que figurarán en nuestra plantilla.
- Número de menúes.
Tipo de contenido que tendrá nuestra web
Aunque realmente deberíamos decir “Tipo de web”, ya que no es lo mismo una plantilla para un sitio web profesional (una empresa) que para una red social o un blog; y dentro de cada uno habría varios puntos a examinar.
Generalmente esto lo tenemos claro desde el primer momento, ya que en el momento que decidimos crear una web sabemos más o menos lo que queremos; en nuestro caso un blog conWordPress.
Elementos que figurarán en nuestra plantilla
No será lo mismo una plantilla con un menú, una sección para banners publicitarios y un contenedor que otra que disponga de una cabecera, un pié de página, dos menúes (distribuidos de diferente forma) y el contenido distribuido en dos columnas.
Tendremos que pensar muy bien lo que pondremos porque de no ser así luego será complicado añadir o quitar elementos a nuestra plantilla.
Es bueno ver varios ejemplos en galerías de sitios web como CSSMania ó WeLoveWP (siempre para inspirarnos, nunca para copiar).
Número de menúes
Aunque realmente está dentro del grupo anterior, no debemos descuidar este aspecto, ya que si lo hacemos podrá quedar inaccesible alguna sección del sitio o tendremos un super menú en algún lado de la plantilla (y no suele ser demasiado agradable navegar por este tipo de menúes).
En el caso de los blogs, es bastante normal colocar dos menúes; uno en la parte superior (de forma horizontal) que muestre las páginas (inicio, contacto, acerca de…) y otro lateral (de forma vertical) que muestre las categorías, archivos, nube de etiquetas…
Las partes de una plantilla
No es fácil definir un patrón que defina la plantilla de todas las páginas existentes, pero si es fácil hacerlo con lo que más se utiliza.
Si nos paramos a mirar una web cualquiera (raro que alguna web no lo tenga) podremos ver los siguientes “bloques” (por llamarlo de alguna manera):
- Cabecera – Donde se encuentra el logotipo, título y generalmente el menú horizontal (si lo tiene)
- Contenedor – No siempre se utiliza, aunque es una buena práctica a la hora de maquetar. Engloba el contenido y el sidebar (más adelante hablo de estos dos elementos).
- Contenido: o container; es donde se encuentra el contenido de la página web como tal (las entradas de un blog, las noticias de un periódico…), podemos decir que es la única parte “dinámica” realmente de un sitio web, ya que el resto de bloques apenas cambian.
- Barra lateral: o sidebar; Aunque realmente este bloque no lo tienen todas las páginas si que se ve con muchísima frecuencia. Se utiliza como menú secundario (y a veces como primario en caso de no disponer de otro); en un blog se usa para mostrar los archivos, nube de tags, categorías…
- Pié de página – o footer; generalmente muestra la licencia del sitio (copyright, copyleft…) o datos sobre quién administra el sitio, si es un sitio de una empresa muestra los términos legales, pero siempre de manera breve (generalmente enlaces).
¿Cómo distribuimos los bloques?
No hay un método para distribuir los bloques; ni siquiera hay normas, salvo las que dicta la lógica. No sería muy normal encontrarse el pié de página arriba del todo o la cabecera abajo, ¿verdad?
Generalmente se distribuye de la siguiente forma:
Como podéis ver la cabecera está arriba (casi siempre es así), el contenedor contiene dos elementos, que muestran el contenido (izquierda) y el sidebar o barra lateral (derecha) en dos columnas (la del contenido más grande) y el pié de página abajo del todo.
Esta es una de las plantillas más (por no decir la más) utilizadas en el diseño web.
Puedes pensar mil modificaciones (cabecera más pequeña, sidebar a la izquierda, doble sidebar a un lateral, contenido centrado y un sidebar a cada lado…), pero la base podría ser la misma perfectamente.
Lógicamente dependerá de nuestra imaginación.
Para este tutorial escogeremos la estructura de la imagen descrita anteriormente; haremos algo sencillo que nos ayudará a entender y aprender lo básico.
Como ya hemos hecho la tarea antes y tenemos pensado todo lo descrito anteriormente; tendemos una idea clara de la estructura que le vamos a dar a nuestra web y podremos pasar a la parte 2 de este tutorial, donde veremos cómo darle forma a esa estructura con (X)HTML.
Esta entrada está sujeta a posibles cambios. Es posible que el tutorial requiera la actualización de esta entrada con más contenido o que suprima contenido de la misma para incluirlo en otra, es recomendable estar pendiente de las posibles actualizaciones de esta entrada así como de las diferentes partes que conforman este tutorial.
