Cómo crear un sidebar adicional para tu plantilla de WordPress

Hace unos días apareció en un foro que frecuento la duda de cómo crear un sidebar personalizado para nuestro theme. Mucha gente puede llegar a pensar que se trata de algo complicado y acaban utilizando plugins como Custom Sidebars, sin embargo WP nos lo pone tan fácil que podemos librarnos de esa carga con unas cuantas líneas de código 😉

Si ya aprendimos a crear shortcodes en menos de dos pasos, ahora en sólo tres tendremos un nuevo sidebar registrado y visible en el que podremos añadir los widgets que queramos, como hemos hecho hasta ahora con el que tenemos por defecto. Pero primero vamos a dejar claro qué es un sidebar.

Qué es un sidebar y para qué sirve

Si le preguntas a cualquier persona que haya utilizado WordPress qué es un sidebar lo más probable es que te responda así: “pues la columna que sale a la derecha o izquierda, qué va a ser!“. Si bien no es falso, no es del todo correcto. En WP un sidebar es un espacio en el que podremos añadir una serie de widgets; aunque hasta en el mismo codex se define como “una columna vertical” no tiene porqué ser así.

La mayoría de themes o plantillas incorporan un único sidebar en el que incluir widgets como los que vienen de serie: entradas recientes, archivo, comentarios recientes, nube de etiquetas, etc. Generalmente lo encontramos a un lado del contenido en formato vertical, sin embargo nada nos impide incluirlos en el header, footer o donde queramos.

Podremos tener tantos como queramos con el método que vamos a ver en este artículo. ¿Para qué va a servir? Podrás diferenciar cuál mostrar para las páginas de archivo (búsqueda, categorías, etc) o la página individual de artículos por ejemplo; otro ejemplo, utilizar un sidebar concreto con un Call-to-action en una página determinada.

El verdadero potencial lo encontraremos si lo combinamos con las plantillas personalizadas o page templates de nuestras páginas (las cuales podremos hacer nosotros mismos).

1er paso: registrar el sidebar a través de functions.php

Lo primero que haremos para crearlo será registrarlo a través de nuestro fichero functions.php. Lo ideal será hacerlo a través de nuestro child theme para evitarnos futuros problemas. Si estás utilizando una plantilla lo primero que tendrás que hacer es buscar dentro del fichero que vamos a modificar si ya existe la llamada a la función register_sidebar().

Si se da el caso, tendrás que añadir el código justo después, si no siéntete libre de incluirlo como quieras. Utilizaremos register_sidebar() para definir la “barra lateral” y asignarle un ID único, entre otros valores. El código sería algo similar a esto:

function registrar_sidebar(){
  register_sidebar(array(
   'name' => 'Sidebar de ejemplo',
   'id' => 'sidebar-ejemplo',
   'description' => 'Descripción de ejemplo',
   'class' => 'sidebar',
   'before_widget' => '<aside id="%1$s" class="widget %2$s">',
   'after_widget' => '</aside>',
   'before_title' => '<h2 class="widget-title">',
   'after_title' => '</h2>',
  ));
}
add_action( 'widgets_init', 'registrar_sidebar');

Con este primer paso habremos conseguido que en Apariencia -> Widgets se muestre un nuevo sidebar con el título y descripción que hemos definido, comprueba que es así antes de pasar al siguiente punto. Como ves también podremos modificar otras cosas interesantes como los encabezados o las clases que utilizamos, una forma de personalizarlo muy sencilla.

2º paso: crear un fichero sidebar-id.php

WP ya es consciente de que hemos creado un nuevo espacio para nuestra página pero todavía no sabe qué hacer con él exactamente. En este paso vamos a crear un fichero PHP que contendrá la función dynamic_sidebar() y que se encargará de llamar a cada uno de los widgets activos que hayamos colocado a través del dashboard.

El fichero en cuestión lo llamaremos de la misma forma que la ID que asignamos en el primer paso. En mi caso será sidebar-ejemplo.php. El código que tendré que insertar es el siguiente:

<?php if ( is_active_sidebar( 'sidebar-ejemplo' ) ) : ?>
         <div id="widget-area" class="widget-area">
            <?php dynamic_sidebar( 'sidebar-ejemplo' ); ?>
         </div>
<?php endif; ?>

En primer lugar se comprueba que el sidebar esté en uso o, lo que es lo mismo, que tenga algún widget activo. Si es así dynamic_sidebar() mostrará de forma ordenada los widgets que hayamos colocado uno a uno, pero recuerda pasarle a ambas funciones el ID del sidebar que estamos utilizando.

Recuerda: El nombre del fichero debe comenzar por sidebar- de forma que quede igual que la ID que le asignaste a la hora de registrarlo.

¿Y con esto hemos terminado? Bueno, nos faltaría indicarle a WordPress dónde mostrarlo. Podríamos copiar este código en el lugar de la plantilla que queremos que se visualice pero hay una forma mejor de hacerlo a través de otra función. ¡Veamos!

3er paso: cómo visualizar el sidebar que hemos creado

Por último utilizaremos la función get_sidebar() para mostrar nuestro nuevo espacio en el lugar que creamos conveniente. Si queremos que sea en el footer modificaremos el archivo footer.php de nuestro child theme, en el caso de utilizar hooks usaremos el que más nos convenga.

Únicamente tendremos que incluir esta línea de código, pasándole el parámetro $name que será equivalente al nombre de fichero que hemos creado. En este caso quedaría así:

<?php get_sidebar('ejemplo'); ?>

Y así, podremos incluirlo en la parte de la plantilla que queramos. Ten en cuenta que sin el parámetro $name te mostrará el sidebar que viene por defecto, así que no lo olvides 😉

Ahora sólo queda añadirle unos últimos arreglos mediante CSS y dejarla a tu gusto. Un tutorial sencillo pero que te ahorrará instalar algún plugin innecesario; además, la satisfacción de hacerlo por uno mismo también es un punto a favor, así que te animo a hacerlo!

Si tienes cualquier duda, pregunta o simplemente te ha sido de utilidad… te invito a pasar por los comentarios 🙂

Comentarios

  • Om dice:

    Hola en el paso número tres; dónde lo tengo que añadir si lo quiero del lado izquierdo? Oh cómo puedo moverlo; ocurre que aparece en la parte de abajo el siderbar y no se como regresar lo a la derecha. Gracias por tu ayuda!

    • Hola!

      ¿Qué archivo estás modificando? Cada uno tiene su estructura y varía según la plantilla con la que estés trabajando.
      Por ejemplo, si el sidebar aparece después de "content" tendrás que mover las líneas que llaman al sidebar justo arriba del contenedor.

      Si te aparece en la parte de abajo es probable que sea porque estés modificando el footer.php o porque no tenga espacio suficiente a la derecha y por eso se baja automáticamente. Si es lo primero, el archivo que debes modificar será page.php, single.php, archive.php o alguno similar. Si es lo segundo, sólo tienes que adaptar el ancho mediante CSS.

      Si me pasas un link le echo un vistazo! Un saludo!

  • lorenzo dice:

    hola buenas, ante todo gracias por tu ayuda, he podido entender casi todo, mi problema es cuando llego a la parte final, por ejemplo yo quiero poner el sidebar por encima del menu (header) y que me aparezca horrizontal, esta es mi pagina http://www.geotognolo.it como puede ver he creado dos y me gustria que la seccion de social este en linea con el otro widget.
    muchas gracias..!!

    • Buenas lorenzo, el que tienes es más un problema de html y css que otra cosa. Explicártelo por aquí sería costoso. Te aconsejo que le dediques un par de horas a algún curso online de css, es muy sencillo y te podrá servir para hacer unas mínimas modificaciones en tu plantilla sin problemas.

      Una vez consigas mostrar el sidebar, tal y como explico en el artículo, tendrás que darle estilo para adaptarla a la estructura de la web.

      Un saludo!

  • lorenzo dice:

    muchas gracias…!!!

  • Fernanda dice:

    Hola..Mi pregunta es que en el home o pagina inicial de un theme de wordpress aparecen partes como de testimonios, logos de clientes etc en forma de slide o algo asi, quisiera saber si esto se puede modificar, quitar algunos y agregar otras pero solo a la pahina dede Home.

    • Hola Fernanda,

      Sí es posible lo que quieres. Es difícil poder ayudarte sin saber la plantilla que estás utilizando pero te aseguro que sí se puede. Es posible que tengas que tocar algo de código para poder hacerlo.

      Te invito a que dejes aquí el enlace a tu página para que pueda echarle un vistazo.

      Un saludo!

  • José dice:

    ¿Cómo podría hacer esto para que me aparezca un sidebar en las categorías? Gracias

  • Vintitrenta dice:

    Hola, está genial, pero cómo lo hago si quiero que este sidebar sólo se muestre para las páginas de categorías de productos de Woocommerce (el resto de páginas no quiero ningún sidebar)
    gracias

Deja un comentario

¿Quieres recibir las últimas novedades en tu e-mail?

¡GRACIAS!