This post comes from an old backup. The information provided here might not be up to date and might not reflect my current points of view.

He widgetizado mi tema de WordPress. Eso significa que ahora la barra lateral derecha que acompaña las entradas de mi blog está siendo generada por WordPress. Hasta ahora era un código HTML/PHP grabado a fuego dentro de uno de los archivos de mi tema, pero he preferido dejar en WordPress esa tarea.

Crear un tema de WordPress usando widgets, o adaptar un tema que ya exista para que use widgets, es mucho más sencillo de lo que parece. Aunque haya que teclear código que al principio parezca extraño, en el fondo conseguirlo es mucho maś fácil de lo que parece y en pocos pasos podemos conseguirlo.

Nota: a partir de ahora me referiré a la barra lateral (sidebar) como barra de widgets, puesto que no necesariamente tienen que estar en el lateral de la página, aunque WordPress lo considere así. Sin ir más lejos podríamos configurar una barra de widgets para mostrarse en el pie de página como una lista de enlaces, por ejemplo.

Paso 1: registrar nuestra barra lateral

Lo primero que tenemos que hacer para que WordPress reconozca nuestra plantilla como widgetizable es modificar el archivo functions.php (o crearlo si no existe) y registrar dentro las barras de widgets que vayamos a usar. La función register_sidebar($argv) nos permite hacer esto. Esta función acepta un parámetro que es un array asociativo con todas las propiedades de nuestra barra lateral, como el nombre, el ID e incluso opciones de renderizado.

El registro de barras de widgets debe hacerse dentro de una función, que sea invocada automáticamente por WordPress, por medio de una acción.

<?php
function init_widgetbar() {
    register_sidebar(array(
        'name' => 'Barra lateral', // nombre (usado por nosotros)
        'id' => 'lat-1' // código (usado por WordPress)
    ));
}
add_action('init', 'init-widgetbar'); // registramos la acción
?>

De este modo ya tenemos una barra de widgets llamada lat-1 lista para usar.

Paso 2: incrustar la barra en el código

Una vez que tenemos la barra de herramientas creada en functions.php, tenemos que ir a la parte de nuestra plantilla en la que queramos usar esta barra y simplemente incrustarla. Para ello podemos usar la función dynamic_sidebar($id), cuyo parámetro es el ID de la barra de widgets que queramos usar.

Esta función trabaja del siguiente modo: imprime a la salida estándar (la ventana del navegador) el código HTML generado por WordPress con nuestra barra; pero a la vez, devuelve un valor booleano que indica si se encontró o no la barra de widgets. De este modo, podríamos meter la función dentro de un bloque IF y detectar si devuelve falso, para ofrecer un código HTML alternativo que sustituyera la barra. Se devolverá falso si no está registrada la barra de widgets cuyo ID se solicita, o bien si existe pero está vacía porque no se han incluido widgets todavía.

Por ejemplo, para incluir la barra como una barra lateral, en el archivo sidebar.php nos iríamos a la sección en la que normalmente incluiríamos el código HTML de la barra lateral y lo cargaríamos. (Para entender por qué uso la etiqueta <ul> en el siguiente código vas a tener que seguir leyendo hasta el paso 4).

<ul class="sidebar"><?php
  if(!dynamic_sidebar('lat-1')) {
    echo '<!-- No he podido encontrar la barra lateral -->';
  }
?></ul>

Paso 3: añadir widgets

Ahora sólo tenemos que ir al panel de administración de WordPress y añadir los widgets. Para ello, dentro del sistema de administración vamos a Apariencia > Widgets. Ahí encontraremos en la parte de la derecha una sección cuyo título es el título que le hayamos dado a nuestra barra lateral, lista para que añadamos widgets. Podemos hacer esto simplemente arrastrando los widgets de la sección Widgets disponibles a la barra lateral, y dejando la barra a nuestro gusto.

Edición de widgets
Edición de widgets

Una vez personalizado, si vemos el aspecto de nuestra plantilla, veremos las barras de widgets con el contenido rellenado por WordPress.

Paso 4: entendiendo el HTML y dando diseño

Por defecto, el marcado HTML de las barras laterales en WordPress se hace con listas no ordenadas. Eso significa que tu barra de widgets en realidad será un <ul>, donde dentro, cada widget que tenga la barra será una entrada de lista <li>. Dentro de ese elemento encontrarás un título, el cual WordPress presenta con un <h2>, y a continuación el contenido del widget, que puede ser otra lista <ul> (por ejemplo, la lista de categorías) o incluso bloques de texto <p> (por ejemplo, un texto que diga “Acerca de”). De ahí que en el paso 2, el código de ejemplo que he mostrado tuviera etiquetas <ul> rodeando la llamada a la barra de widgets. WordPress sólo va a poner los elementos de lista <li>. El elemento padre <ul> lo debemos dar nosotros.

Si estamos creando una barra lateral nueva, lo mejor es que al dar diseño trabajes directamente con la barra de widgets como una lista. No obstante, si estamos portando un tema que no usaba widgets, es posible que hayamos usado un sistema de representación completamente distinto (el típico div compuesto de otros div), por lo que el diseño de la plantilla se habrá estropeado al hacer esto. Para arreglarlo podemos hacer dos cosas:

  1. O bien cambiamos el código CSS de la plantilla para que en vez de dar formato a bloques <div> demos formato a listas.
  2. O bien hacemos algunos cambios más en functions.php para cambiar el etiquetado HTML que WordPress pone a nuestra barra.

Si queréis hacer lo segundo (yo quise hacerlo cuando hice mi plantilla widgetizada porque no tenía ganas de cambiar CSS), simplemente en functions.php modificamos el código que en el paso 1 creamos e introducimos una serie de parámetros más en el array, mediante los cuales podemos cambiar cómo WordPress muestra estos elementos. Con cuatro parámetros más podemos personalizarlo:

  • before_widget: el código que introduzcamos aquí se mostrará al principio de cada widget (por defecto es el <li>). Hay dos placeholders especiales en esta sección: %1s y %2s, que WordPress reemplaza respectivamente por el ID y la clase del widget en cuestión.
  • after_widget: este código se mostrará detrás de cada widget (por defecto es </li>).
  • before_title: este código se muestra antes de imprimir el título del widget (por defecto es el <h2>).
  • after_title: este código se muestra después de imprimir el título del widget (por defecto es </h2>).

Por ejemplo, este es el código que usa la barra lateral de mi blog. Aunque en realidad no me hubiera supuesto problema alguno, quería evitar tener que modificar el CSS de la página y opté por modificar la forma en la que se mostraban los widgets, aun sabiendo que es más semántico mostrarlos como una lista no ordenada de elementos.

<?php
register_sidebar(
    array(
        'name' => 'Barra lateral principal',
        'id' => 'side_1',
        'before_widget' => '<div class="widget %2$s" id="%1$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widget_title">',
        'after_title' => '</h3>',
    )
);
?>

Conclusión

Idealmente, un tema de WordPress sólo debería contener el código que permita mostrar el HTML de la página y la hoja de estilos con la que se muestra. No debería haber contenido (por ejemplo, el título del blog o una sección de la página) grabada a fuego dentro de la plantilla, porque en ese caso se pierde la personalización. Lo correcto es proporcionar mecanismos (por ejemplo, widgets, menús o simplemente configuraciones específicas del tema) que nos permitan modificar todo el contenido de la plantilla desde el panel de administración de WordPress, sin tener que cambiar el código fuente de la plantilla. De este modo, WordPress se vuelve mucho más flexible, y además se mejora la reutilización de código en la plantilla.

↩ Back home