Enralados

Cómo crear un Widget

Un Widget es un fragmento de código que se encarga de mostrar información o realizar tareas de uso frecuente. Los Widgets se utilizan para mostrar los últimos posts, los últimos comentarios, páginas más visitadas, mostrar el blogroll, escribir texto, mostrar imágenes, calendario, y muchas cosas más. Su comodidad y facilidad de uso los han hecho muy populares entre los usuarios de WordPress puesto que no requieren conocimientos de programación.

El contenedor de los Widgets es el sidebar en WordPress. Si creas un sidebar, estas creando una ubicación para tus Widgets. Sin embargo, los Widget no sólo pueden usarse en el sidebar o mejor dicho el sidebar no tiene por qué ser una columna lateral de nuestro Blog. Podemos poner un sidebar en la cabecera (header), en el pie de la página (footer) o en cualquier otra zona de la página.

Para definir el número de sidebars que quieres tener en tu blog debes indicarlo en el archivo functions.php de la siguiente manera:

<?php
if ( function_exists('register_sidebars') )
    register_sidebars(2);
?>

En este caso registramos dos sidebars. Ahora en el archivo que desees ubicar los sidebars, y por tanto los Widgets, necesitas decirle a WordPress cuál sidebar usarás. Puedes tenerlos juntos en el mismo archivo o en archivos diferentes. Normalmente se ubican en dos archivos, por ejemplo, left_sidebar.php (sidebar izquierdo) y right_sidebar.php (sidebar derecho) que después serán llamados por el archivo sidebar.php.

El archivo left_sidebar.php para hacer uso del sidebar 1 necesita lo siguiente:

<?php if ( function_exists('dynamic_sidebar') 
    && dynamic_sidebar(1) ) : endif; ?>

Esto le indica a WordPress que utilice el sidebar 1 anteriormente registrado. Lo hemos situado en la columna izquierda de las dos que contiene el sidebar.

Lo mismo con el archivo right_sidebar.php:

<?php if ( function_exists('dynamic_sidebar') 
    && dynamic_sidebar(2) ) : endif; ?>

En este caso el sidebar 2 se ubicará a la derecha en el sidebar.

En el Panel de control de WordPress, en los Widgets, aparecerán como Sidebar 1 y Sidebar 2.

Si quisieramos añadir otro sidebar modificamos el archivo functions.php y cambiamos el 2 por el número que deseemos. Después añadimos al archivo dónde queremos que se situe el sidebar lo siguiente:

<?php if ( function_exists('dynamic_sidebar') 
    && dynamic_sidebar(3) ) : endif; ?>

Si lo añadimos en footer.php habremos creado un sidebar para los Widgets en el pie de la página. Después tendremos que modificar las etiquetas de hojas de estilos CSS adecuadas para darle espacio en el footer.

Existe la posibilidad de asignarle un nombre al sidebar, para ello el archivo functions.php debe modificarse de la siguiente manera:

<?php
if ( function_exists('register_sidebar') ) {
register_sidebar(array( 'name'=>'sidebar_izquierdo'));
register_sidebar(array( 'name'=>'sidebar_derecho'));
}
?>

Ahora en los archivos correspondientes nos podemos referir al sidebar a utilizar por sus nombres. Por ejemplo, en el izquierdo:

<?php if ( function_exists('dynamic_sidebar') 
   && dynamic_sidebar('sidebar_izquierdo') ) : endif; ?>

En el derecho:

<?php if ( function_exists('dynamic_sidebar') 
   && dynamic_sidebar('sidebar_derecho') ) : endif; ?>

Y así con los demás sidebars que queramos incluir.

Esta es la forma de ponerle nombres a los sidebars. Así en el Panel de control de WordPress, en la sección de Widgets, aparecerán como sidebar_izquierdo y sidebar_derecho que es más descriptivo que la primera opción.

Ojo, que no es lo mismo register_sidebars que register_sidebar son funciones diferentes, con la primera especificamos el número de sidebars que queremos crear y con la segunda podemos ponerle un nombre al sidebar, entre varios parámetros más.

Lo que acabamos de hacer es ubicar los Widgets en una zona concreta de nuestro Tema, no hemos creado Widgets, le hemos dicho a WordPress dónde deben aparecer los ya existentes. Son cosas diferentes.

Abusar de Widgets tiene un inconveniente, la información se almacena en la base de datos de WordPress. A veces es preferible añadir código manualmente, si sabemos como hacerlo, respetando la propia estructura HTML que pueda tener el sidebar o el lugar elegido para ubicarlo. No es muy complicado, podemos ver el código fuente de la página desde el navegador para ver qué se genera en caso de existir alguna duda. De esta forma sabremos que estilos CSS aplicar dependiendo de la zona que nos interese.

También podríamos insertar en el sidebar el código de un archivo externo. Es el mismo caso que el anterior pero tiene la ventaja de que podemos modificar el contenido desde el propio editor de código de WordPress y evitar así "toquetear" los archivos del tema originales cada vez que se quiera realizar algún cambio.

¿Por qué no crear un Widget que lea un archivo externo en vez de la base de datos?
Pues esto es muy sencillo de hacer. A alguno le podrá parecer que tengo ganas de complicaciones pero se trata de no sobrecargar el servidor con tanta consulta a la base de datos. Sobre todo si tenemos demasiados Widgets en uso. Además el ejemplo puede servir como punto de partida para confeccionar tus propios Widgets.

Para crear un Widget en el archivo functions.php escribiremos lo siguiente:

<?php
register_sidebar_widget('Mi Widget', 'mi_funcion');
?>

La función register_sidebar_widget es la encargada de crear el Widget, Mi Widget es el nombre del Widget, mi_funcion es la función que contendrá lo que deseamos que haga el Widget. En esta caso, incluir un archivo externo con código HTML. Quedaría asi:

<?php
function mi_funcion() {
include (TEMPLATEPATH . "/externo.php");	
}
?>

El archivo externo.php contiene el código que aparecerá cuando insertemos el Widget en cualquiera de los sidebars existentes que seleccionemos. Debe estar situado en la carpeta de nuestro Theme y se le indica a la función mediante include (TEMPLATEPATH ."/nombre_del_archivo.php") El único detalle a tener en cuenta es que debemos asegurarnos de disponer del espacio adecuado en la página para el código.

Mi Widget aparecerá junto con la lista de Widgets en el Panel de Control de WordPress. De esta manera podremos tener Widgets que no accedan a la base de datos para mostrar la información.

Es un ejemplo muy básico, lo podemos complicar según nuestros conocimientos de HTML y PHP. Las posiblidades de utilización son tantas como imaginación se tenga pero creo que como introducción a los Widgets es una muestra suficiente y fácilmente entendible.

Incluso se podría crear un Widget como Plugin pero eso lo dejaremos para otra ocasión.