Blog de marketing digital y SEO

Maquetación de un tema de WordPress responsive. ¿Por dónde empiezo?

gravatar
Por Héctor Rovira
Post publicado en Programación
COMPARTIR

Hay que desarrollar un nuevo proyecto web, y hemos decido que para ello utilizaremos WordPress. Lo instalamos, configuramos, y buscamos un tema acorde con lo que queremos, el más parecido posible con la idea que tenemos o con la maqueta que nos ha pasado el diseñador, para intentar aprovechar los recursos.

Tras un rato buscando, decidimos que no hay nada que podamos utilizar sin grandes costes adaptación, y decidimos realizar uno mismo nosotros desde cero. Llegados a este punto, ¿por dónde empezar?

Podríamos empezar de cero cero; es decir, crear un directorio y empezar a desarrollar los ficheros de plantilla directamente, ya que WordPress tiene una magnífica documentación.

Podemos ver el esquema con la estructura de plantillas directamente en su página web:

Pero esto supone un gran esfuerzo y conocimiento del funcionamiento interno de WordPress, por lo que a priori, salvo para casos muy concretos, deberíamos descartar esta opción.

Preparando el terreno

Lo que nos deberíamos plantear es usar un esqueleto básico a partir del cual comenzar a maquetar nuestro tema de wordpress. De esta manera, aprovecharíamos el código necesario para cada apartado: listado de entradas, categoría, etiquetas, detalle…
Por suerte hay varios “temas en blanco” que cumplen esta función a la perfección. Uno de ellos es html5blank, que contiene todos los archivos necesarios de serie, y soporte para traducciones. Me gusta éste porque cumple perfectamente su propósito, es HTML5 y no hay que adaptar nada. Simplemente empezar a implementar las características propias del proyecto. Una búsqueda rápida en la web nos permitirá encontrar decenas de proyectos similares.
Podríamos seguir por este camino y esto ya nos ahorraría mucho trabajo. Sin embargo, aún podemos aprovechar más y no reinventar la rueda, pues el trabajo de maquetación HTML5 y CSS que tenemos por delante no es poca cosa.

Maquetando el Template de WordPress

Lo siguiente que debemos plantearnos es la implementación de un framework HTML/CSS que nos evite tener que desarrollar desde cero los elementos típicos comunes: menús desplegables, iconos, galerías de fotos… o comportamientos, como popups, tooltips…, o simplemente el ajuste del orden de los elementos o del número de columnas en base a la resolución del dispositivo. Todo esto es mucho trabajo, tiempo e inversión que debemos ahorrarnos, así que aquí no hay ninguna duda.

Para ello disponemos de varios frameworks (Foundation, blueprint, Bootstrap…). Quizás el que está más en auge a día de hoy es Bootstrap, y sin duda es mi favorito. Tiene todos los elementos visuales que podamos necesitar y basa su estructura en un sistema de rejilla muy fácil de utilizar, con el que podremos distribuir los elementos a nuestro antojo en base a la resolución de pantalla. También dispone de un gran número de extensiones de terceros, y una documentación muy cuidada.

Adaptación del contenido según la resolución

Adaptación del contenido según la resolución

Bien, una vez añadidos los ficheros del framework a la cabecera de nuestro tema en blanco (normalmente estos frameworks se componen de un fichero .js y otro .css) podemos centrarnos, ahora sí, en la lógica propia de nuestra maquetación.
Teniendo en cuenta la estructura que queremos para cada tamaño de pantalla, empezaremos siempre por el tamaño menor. Esto tiene dos ventajas:

  • Asegurarnos de la correcta visualización de nuestra web en el móvil (la mayor parte de navegación fuera de la oficina se realiza desde el móvil)
  • Evitar añadir contenido no relevante

Muchas veces, cuando el móvil no era una prioridad para el desarrollo web, la adaptación a éste se realizaba eliminando el contenido que no se creía necesario para una pequeña pantalla. Esto es un error. El contenido no es más o menos relevante según el tamaño de la pantalla, y modificarlo según desde donde se visualice es, además, negativo para el SEO.

Bootstrap nos permite, mediante el correcto etiquetado del HTML, maquetar la web con todos sus elementos sin añadir una sola línea de CSS. Gracias a esto, podremos maquetar todos los apartados necesarios sin preocuparnos aún por el diseño.

Una vez está “todo en su sitio” y nuestro contenido se estructura correctamente en base a la resolución, sólo entonces, es hora de añadir el diseño. Fondos, colores, tipografías, bordes, separaciones se implementarán en este momento. Esto es lo que aportará el impacto visual y el branding que diferenciará nuestra web de todas las demás.

Últimos retoques

Por último, pero no menos importante, le llega el turno al comportamiento específico del tema. Animaciones, espacios de interacción con el usuario (como formularios o calculadoras), temporizadores o publicidad. Todo aquello de lo no depende directamente el contenido se dejará para el final. Debemos asegurarnos de que si algo va mal, el contenido, que es lo que realmente aportará valor a nuestra web, se vea lo menos perjudicado posible. De hecho debería ser perfectamente usable desde un punto de vista informativo eliminando completamente estos comportamientos.

Este es, en definitiva, el workflow aconsejado para desarrollar un tema de WordPress desde cero, moderno y adaptado a la web de hoy.

newsletter 0 comentarios

Dejar un comentario

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

*

*

Mejora tu posicionamiento web

Empieza hoy
BCN
Calle Sancho de Ávila 52, 4º 2º
08018, Barcelona - Tel. 933 686 411
MAD
Calle Ribera de Loira 46, Edificio 2 Bajos
28042, Madrid - Tel. 910 052 175