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

WordPress

¿Quieres tener más tráfico en tu web? ¡Yo también! Es por eso que hemos creado Nelio Content, un nuevo plugin que automatiza la promoción de contenidos en redes sociales. ¿Quieres saber más?

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… 🤣

Loser by Playboy Fragrances
Bitch please, nosotros hace tiempo que personalizamos WordPress… Imagen de playboyfragrances en Giphy.

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:

Captura de pantalla de AyudaWP
Captura de pantalla de AyudaWP. Como puedes ver, a parte del contenido principal (que es una entrada del blog), hay una barra lateral a mano derecha con información secundaria.

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.

Ejemplo de una web con múltiples sidebars
Ejemplo de una web con múltiples sidebars. Como puedes ver, este WordPress tiene un montón de “sidebars”, aunque la verdad es que sólo unas pocas de ellas aparecen realmente como “barras laterales”.

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

Captura de pantalla del plugin Custom Sidebars, de WPMU DEV
Captura de pantalla del plugin Custom Sidebars, de WPMU DEV.

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.

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.

FlojaNo está malBienMuy bien¡Impecable! (1 votos, promedio: 5,00 de 5)
Cargando…

por

Lidera el análisis y diseño de nuestros servicios, así como el servicio de soporte a los usuarios. Es Doctor en Computación por la UPC y siempre ha estado interesado en una gran variedad de áreas, incluyendo el modelado conceptual, la realidad virtual y la impresión digital en 3D. Contribuye muy activamente en la comunidad WordPress, habiendo participado en meetups, seminarios y en la WCEU.

Deja un comentario

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

He leído y acepto la Política de privacidad de Nelio Software.

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.