Agregar un área de widgets a tu tema de Genesis

Agregar un área de widgets pueden ser algo muy útil a la hora de diseñar un tema o en general una web en WordPress. Ya bien si trabajas con Genesis o cualquier otro tema. Puedes agregar tantas áreas de widgets como quieras a tu tema de Genesis. Podemos diseñar un tema por completo a partir de áreas de widgets.

Algunas webs corporativas que vemos, están hechas a partir de estas áreas donde luego agregamos lo que nosotros queremos. Desde simple textos, hasta HTML maquetado, widgets sencillos con resúmenes de los artículos más leídos, e incluso complejas animaciones según hacemos scroll. 

Un par de ejemplos, aunque no son los únicos, son los temas hijos de Genesis, Showcase Pro y Workstation Pro. Sus páginas de inicio están diseñadas a partir de áreas de widgets.

Las áreas de widgets más comunes y conocidas en los temas de WordPress son tres. Una es la barra lateral o sidebar. Otra por cercanía es la barra lateral secundaria o secondary sidebar y por último el pie de página o footer. A parte de esas podemos crear las áreas que queramos.  

Podemos agregar un área de widgets en la parte de nuestro tema hijo de Genesis que más nos convenga según el diseño que tengamos entre manos. 

Creamos el área de widgets

Vamos a crear un área para que sólo aparezca en la home y podamos incluir un saludo o lo que queramos. Para crear un área de widgets debemos hacerlo en dos pasos. El primero es declarar, o mejor dicho, registrar el área en si. Este sería el código:

Este contenido está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

Creamos el array para aportar los datos necesarios del área de widgets y no perdernos en el panel de WordPress. El ID es el nombre identificativo que luego nos servirá para poder llamar al área de widgets y colocarla en cualquier parte del tema. El name es el nombre que figurará en el panel de WordPress donde añadiremos los widgets. Este tiene que ser claro y conciso para no crear dudas. Y description, aparecerá también en el panel de WordPress junto con el campo name y aporta una explicación más extensa y explícita de donde aparecerán los widgets que coloquemos en ese área y de como usarla. 

Agregamos el área de widgets

Llegó la hora de colocar nuestra nueva área de widgets en nuestra home para colocar ese saludo de bienvenida. Dependiendo de donde la queramos colocar usaremos un hook u otro dentro de Genesis. Haremos lo mismo en cualquier otro tema de WordPress, sólo que usaremos los hooks del propio WordPress, claro está. 

Al ser un saludo lo que queremos poner, por lógica deberá ir al principio. Así que he decidido colocarlo en la parte superior de la home. Para ello he usado el hook genesis_before_content. Otra cosa que he añadido y que es necesaria para que sólo se muestre el área de widget en la home, es añadir un condicional a la función. 

Por último, y con intención de añadir estilos más tarde a los widgets que situemos ahí, la he maquetado con algo de HTML y un par de clases CSS.  

Este contenido está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

Un poco de estilo con CSS

El CSS que he usado es algo sencillo. Y como pienso dejar este área de manera fija en mi tema, he incluido el código CSS en mi hoja de estilos principal. 

Este contenido está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

Conclusiones

Esta es una manera sencilla de usar un área de widgets para agragar un simple saludo en la home, pero dando una vuelta de tuerca, podemos crear interesantes areas de comunicación donde colocar llamadas a la acción o enlaces necesarios.

El soporte en comentarios está sólo disponible para los suscriptores.

Puedes identificarte aquí o bien registrate en este enlace.

¿Olvidaste tu contraseña?