TruquiTrucos Dev – Cómo añadir una nueva sidebar en WordPress

El otro día, sin comerlo ni beberlo, me vi a mí mismo leyendo un artículo de moda (no sé, no preguntes ?) porque el titular, aún sin ser clickbait, consiguió despertar mi interés: «La nueva talla es la personalizada: cómo los retailers utilizan la personalización para ganarse la lealtad del consumidor«. Que tú dirás: «no sé, chico, no tiene nada de especial, ¿no?» Pero fíjate bien: ahora resulta que los de Forbes se flipan porque parece ser que los genios de la moda han descubierto la sopa de ajo y que eso de que la gente quiera productos hechos a medida es el futuro…

¡Pringados! Nosotros en WordPress hace años que disfrutamos de esto… ?

Porque sí, tanto tú como yo sabemos que lo que más mola de WordPress y lo que ha permitido que llegue a donde está hoy en día es su capacidad de personalización. Temas, plugins, pequeños truquitrucos que hacen magia con tu instalación… ¿¡Qué más se le puede pedir a nuestro CMS favorito!?

Total, que leyendo ese artículo pensé en lo chulo que es poder personalizar las herramientas que usamos a diario y me dije a mí mismo: oye, ¿por qué no escribes otro ejemplo más del potencial de WordPress explicando cómo tunear algo? Y aquí me tienes hoy, a punto de explicarte cómo crear tu propia sidebar para que hagas lo que te dé la gana, donde te dé la gana y como te dé la gana con los widgets de tu instalación. ¿Mola o ke ase?

Sidebars en WordPress

Probablemente lo primero de lo que deberíamos hablar es de qué son las sidebars en WordPress. Porque estoy seguro de que, o no tienes ni idea de lo que son, o lo que piensas que son sólo es verdad en parte. En general, una sidebar (o barra lateral en cristiano paladín) es, como su nombre indica, una barra lateral que aparece en nuestra web. Por ejemplo:

Y, de hecho, si leemos la documentación oficial de WordPress, esa es exactamente la definición que encontramos:

Las sidebars son una funcionalidad que se introdujo en la versión 2.2 de WordPress. Básicamente, son una columna vertical que ofrece el tema para mostrar información secundaria a lo que sería el contenido principal de la página.

Vamos, lo que mostraba la captura de pantalla anterior: tú tienes, por ejemplo, el contenido de una entrada de tu blog bien maquetadito y mono y, al lado, una barra con un banner de publicidad, algunos enlaces de interés, un cuadro de búsqueda, etc.

Ahora bien, tal y como te comentaba al principio, en WordPress una sidebar solo es una barra lateral «en general». Y es que, en realidad, WordPress define como sidebar cualquier área de tu tema en la que se puedan meter widgets. ¿Tus entradas tienen una barra lateral diferente a tus páginas? Tu tema define dos sidebars: una que sólo se usa en entradas y otra que sólo se usa en páginas. ¿El pie de página de tu tema tiene dos o tres áreas donde meter widgets? Pues ahí que tienes dos o tres sidebars más.

Cómo crear nuestra Sidebar en WordPress

Si volvemos a la documentación de WordPress, vemos cómo crear una sidebar es tan sencillo como invocar la función register_sidebar durante la acción widgets_init. Si todo esto te suena a chino, te recomiendo que, o bien leas mi entrada anterior sobre cómo personalizar WordPress usando fragmentos de código, o bien optes por la solución más amigable para todos los usuarios: usando un plugin. Y como imagino que vas a optar por esta segunda opción…

Custom Sidebars – Dynamic Widget Area Manager

Uno de los plugins que más me gustan para crear nuestras propias sidebars es Custom Sidebars de WPMU DEV. Con este plugin, basta con que accedas al Escritorio de WordPress, vayas a Apariencia » Widgets y pulses en el botón Crear nueva sidebar. Con esta acción tan sencilla, tendrás una nueva barra lateral que podrás llenar de widgets sin problema.

https://www.youtube.com/watch?v=7kgqwceGynA

Nelio Content

Estoy tan contento con Nelio Content que parece que me hayan pagado para hablar bién de él… pero es que también a ti te encantará: funciona como prometen, la programación automática de mensajes es increíble, la calidad/precio no tiene parangón y su equipo de soporte se siente como si fueran parte del tuyo.

Panozk

WordPress.org

Ver planes

Cómo usar nuestra Sidebar en WordPress

Y una vez creada la barra lateral, ¿cómo la podemos usar en nuestra web? Pues ahí la respuesta ya es un poco más complicada.

Si has optado por la solución de código, deberás editar alguna de las plantillas de tu tema para decidir exactamente dónde quieres que aparezca e invocar la función dynamic_sidebar para que se genere el HTML asociado. Otra opción es extender WordPress para que aparezca un nuevo shortcode que nos permita volcar la sidebar en el contenido de cualquier entrada o página de nuestra web, tal y como podemos ver en este proyecto de Github de Joe Casabona:

Si, por otro lado, decidiste usar el propio plugin, tengo buenas noticias para ti: Custom Sidebars incluye opciones de configuración para decidir dónde ubicar cualquier nueva sidebar que hayas creado con él. Así que todo eso que tienes ganado ?

Y todo esto, ¿para qué?

Pues es una buena pregunta… ¿para qué querría yo poder crear áreas de widgets adicionales? ? Pues, por ejemplo, para poder poner una área de publicidad dinámica dentro del contenido de tu blog. Me explico.

Imagina que quieres poder promocionar un cierto producto o servicio en tu blog, y que te gustaría que el anuncio en cuestión estuviera dentro de la entrada en si, entre un par de párrafos concretos. Pues bien, lo que podrías hacer es definir ese área tal y como hemos visto más arriba e insertar el shortcode dentro de tu entrada tú mismo, exactamente entre los dos párrafos que quieras. Luego, basta con que a través de la sección Apariencia » Widgets de tu Escritorio de WordPress metas el anuncio que quieras en este nuevo área y voilà! ya tienes el anuncio embebido.

«Pero, oye, ¿no podía meter directamente el anuncio dentro de mi entrada sin usar todo esto?», te estarás preguntando. Pues claro que podías… pero con esta solución, si ahora quieres promocionar un nuevo producto, bastará con que cambies el widget que tienes en tu sidebar y todas las entradas mostrarán el nuevo anuncio.

Como ves, las posibilidades que se abren con esto son infinitas. Así que… ¿a qué esperas para implementar una nueva solución y contárnosla en los comentarios? ?

Imagen destacada de Joanna Kosinska en Unsplash.