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

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):

¿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.

¡MANTENME INFORMADO!

¡Gracias por tu interés en estar informado del próximo lanzamiento de mis cursos! 😎

¡No hago spam! Lee la política de privacidad para tener más información.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.