Widgetizar un tema de WordPress
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.
Me voy a referir a la barra lateral (sidebar) como barra de widgets, porque no necesariamente tiene por qué estar en uno de los lados de la página. De hecho podríamos poner una barra de widgets en el pie de la página para mostrar una lista configurable de enlaces.
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($args) nos permite hacer esto. Esta función acepta 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
?>Una vez que tenemos la barra de herramientas registrada, tenemos que ir a la parte de nuestra plantilla en la que queramos usar esta barra e incrustarla. Para ello usamos la función dynamic_sidebar($id), cuyo parámetro es el ID de la barra de widgets que queramos usar.
Esta función envía al 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 sigue leyendo hasta el paso final.
<ul class="sidebar"><?php
if(!dynamic_sidebar('lat-1')) {
echo '<!-- No he podido encontrar la barra lateral -->';
}
?></ul>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.
Una vez personalizado, si vemos el aspecto de nuestra plantilla, veremos las barras de widgets con el contenido rellenado por WordPress.
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 estáis portando una sidebar que teníais antes hecha a mano y no usaba estas etiquetas, o cambiáis el código CSS de la plantilla para que utilice los nuevos elementos, o bien se hacen algunos cambios en functions.php, porque se pueden cambiar las etiquetas que usa WordPress a la hora de presentar la barra.
En el código que creamos inicialmente en functions.php, podemos pasar algunos parámetros más al array con el que registramos la sidebar:
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 <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>',
)
);
?>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. Incluso en un tema como el mío, que no está pensado para ser distribuido, esto es algo que debería tenerse en cuenta.