Cómo diseñar para WordPress

Diseñando para WordPress

El resultado final es el mismo.
Pero no es lo mismo diseñar un sitio web normal, que uno que se va a desarrollar sobre WordPress.

Por ejemplo, el contenido de un sitio desarrollado para WordPress no va a ser estático, sino que va a ser dinámico gracias al panel de administración. Va a cambiar gracias al usuario.

Como diseñadores, tenemos que tener presente que un proyecto en WordPress permite cierta personalización por parte del usuario, y nosotros debemos de contemplarlo en la fase de diseño.

He intentado resumir en este artículo algunos elementos clave que tenemos que tener en cuenta a la hora de diseñar un sitio para WordPress.

Elementos a diseñar

Página de inicio:

El usuario, desde el panel de administración de WordPress, puede seleccionar una página como la página de inicio. Esta página en WordPress se la conoce como la frontpage. Es la página que hará de home, y debemos definir y diseñar ese elemento.

Página de entradas:

El usuario, desde el panel de ajustes también puede seleccionar una página de entradas. Esta página de entradas deberá mostrar un listado de los posts que tenga el usuario en el sitio. Por eso tendremos que definir cómo será la página que muestre las entradas del blog, la estructura que va a tener, los elementos de paginación etc, ya que el usuario puede decidir si se muestran todos los posts a la vez o si se muestra un número de posts por página. Como diseñadores debemos de contemplar ambos casos.

Widgets:

Los widgets son elementos dinámicos que el usuario puede colocar en ciertas partes del sitio web. Es nuestro deber como diseñadores, decidir qué lugares vamos a destinar para alojar los widgets de nuestro cliente.

Tenemos que considerar diferentes widgets, como por ejemplo los propios de WordPress: el calendario, la barra de búsqueda, la nube de etiquetas, los últimos comentarios, etc. También hay plugins de terceros, como por ejemplo, el de Gravity Forms, que permite insertar formularios de contacto en zonas destinadas para widgets, o plugins para mostrar testimonios de clientes, etc. Por eso es muy importante localizar estas zonas y diseñar cómo se van a visualizar estos elementos.

Menús:

Al igual que ocurre con los widgets, debemos decidir qué zonas vamos a destinar para que el usuario coloque los menús de navegación. Podemos colocar varios, y nuestra misión como diseñadores es definirlos estéticamente, y definir como se van a comportar en el sitio, así como dónde podrán colocarse, o qué estilo tendrán los submenús, o qué ocurre si hay numerosos elementos en el menú y no caben horizontalmente. Todas estas situaciones debemos tenerlas previstas y considerarlas.

Páginas:

Las páginas son elementos estáticos en WordPress. Esto quiere decir que el usuario utilizará el editor del panel de administración para crear el contenido de esa página. Nuestra misión como diseñadores es contemplar diferentes templates para utilizar en estas páginas. Por ejemplo, imagina que por las características del proyecto, tiene sentido que en algunas páginas el contenido pueda ocupar el total del ancho de la página, mientras que otras páginas puedan tener una zona de sidebar lateral, o que se pueda mostrar el contenido en 3 columnas. Para eso sirven los templates, para que el usuario pueda elegir una plantilla de estilo para esa página en concreto.

Posts o artículos:

Los artículos son los elementos más genéricos dentro de un blog de WordPress. Generalmente se componen de una imagen destacada, del cuerpo del artículo, de metadatos, como el nombre del autor o la fecha de publicación. Pero nuestro tema puede dar soporte a diferentes tipos de entrada, por ejemplo: post de imágenes, de audio, cita, mini entrada, etc, y podremos diseñar un aspecto diferente y específico para cada uno de estos tipos de artículo.

Comentarios:

En WordPress, tanto páginas como artículos pueden permitir el uso de comentarios. Es una opción que puede activar o desactivar el usuario, y por ello debemos definir como se mostrarán los comentarios, teniendo en cuenta imágenes de perfil, nombre de usuario y demás metadatos del comentario, así como mostrar de forma gráfica los comentarios que son respuesta a comentarios anteriores.

Páginas de archivo:

Las páginas de archivo son las que muestran un listado de artículos o posts con una característica en común, por ejemplo, todos los posts que tienen una categoría, o una etiqueta, o se han publicado en un mismo mes, o que son de un mismo autor. Generalmente es un listado, pero como diseñadores tenemos que decidir qué elementos queremos mostrar y cómo hacerlo. También podemos crear diferentes páginas de archivo en función de cada taxonomía. Por ejemplo, podemos diseñar una plantilla para mostrar todos los posts que tienen una categoría, y otro diseño diferente para los posts que tienen una determinada etiqueta.

Navegación entre entradas y paginaciones:

Los elementos de navegación son vitales para una mejor experiencia de usuario dentro del sitio. Por ello tenemos que tener previsto como será la navegación entre posts o las paginaciones de elementos de archivo o en la página de entradas.

Custom Post Types (CPT):

Parte del poder de WordPress reside en los Custom Post Types. Estos elementos nos permiten crear post personalizados para nuestros clientes. Por ejemplo, podemos crear un CPT llamado vino, y que tenga los campos de nombre, bodega, ficha, descripción y foto. De esta forma nuestro usuario puede crear diferentes vinos desde su panel de administración, y nosotros mostrarlos en el frontend del sitio, Por eso es muy importante tener en cuenta en la fase de diseño si nuestro proyecto va a tener CPT, para poder decidir qué información mostramos y cómo la vamos a mostrar.

Página 404:

Esta página es un clásico. Es la página que se muestra al usuario si una página no existe. Y es el sitio perfecto para colocar una barra de búsqueda, sugerir contenido del sitio o que incluso puedan contactar con nosotros. Pero lo importante es tomar la decisión de cómo va a funcionar esta página y qué opciones ofrecer al usuario desde la fase de diseño.

Página de resultados de búsqueda:

Las barras de búsqueda que usemos necesitan un elemento para mostrar los resultado de la búsqueda que está realizando el usuario. Por ello es muy importante definir y diseñar qué ocurre con los elementos que coinciden con la búsqueda o qué opciones podemos dar si la búsqueda no arroja ningún resultado.

Personalización de Plugins:

Hay casos en los que el sitio web que estamos diseñando tendrá elementos propios de un plugin que se va a incorporar y que debemos tener en cuenta en nuestro diseño. Por ejemplo: si nuestro cliente va a tener una sección de tienda online, y va a usar el plugin de WooCommerce tendremos que diseñar los elementos de producto, de carrito, de checkout y de tienda.

Conclusión

Como puedes ver, diseñar para WordPress es sencillo, pero necesitamos conocer cómo funciona WordPress para identificar qué elementos tenemos que diseñar en nuestro proyecto.

Y esto es todo. Gracias por leer hasta aquí. Si te ha gustado este artículo, por favor, ayúdame a compartirlo en redes sociales.

Y recuerda que si necesitas un proyecto personalizado de WordPress para ti o para tu empresa, no dudes en ponerte en contacto conmigo a través de este formulario o enviando un email a fran@gallardoramos.com