LinkAlicante

Una de las modificaciones que le hice en su día al theme de wordpress que utilizo, el Fontella de Horacio Bella, fue adaptarlo para que fuera compatible con themes. Lo que en inglés se denonima “widgetizing a theme“.

Fue fácil, sólo tuve que seguir las indicaciones que encontramos en la página de Automattic. En primer lugar, veamos un ejemplo de la estructura típica en html de una “sidebar” (la barra o menú lateral donde suelen incluirse los widgets):

<ul id="sidebar">
 <li id="about">
  <h2>About</h2>
  <p>This is my blog.</p>
 </li>
 <li id="links">
  <h2>Links</h2>
  <ul>
   <li><a href="http://example.com">Example</a></li>
  </ul>
 </li>
</ul>

Como vemos, se trata de una lista de viñetas (ul), donde cada uno de los apartados (about, links) es un item de la lista (li). Los títulos de cada apartado están marcados con encabezados de nivel 2 (h2 = header 2).

Veamos ahora el código, ya modificado para soportar los widgets:

<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar() ) : ?>
 <li id="about">
  <h2>About</h2>
  <p>This is my blog.</p>
 </li>
 <li id="links">
  <h2>Links</h2>
  <ul>
   <li><a href="http://example.com">Example</a></li>
  </ul>
 </li>
<?php endif; ?>
</ul>

Como vemos, simplemente se han añadido un par de líneas al principio, y otra muy corta al final (en color verde). Lo que hacen estas líneas, es mostrar la sidebar dinámica (construida a partir de los widgets) en caso de que sea posible. Si no es posible por alguna razón (algún error de wordpress o similar), se mostrará la sidebar estática, como teníamos al principio.

Es decir, todo lo que vaya entre las dos líneas en verde será sustituido por la sidebar dinámica. Podemos sin embargo añadir contenido estático, situándolo por encima o por debajo del bloque que encierran las lineas en verde (por si queremos mantener contenido fijo en la sidebar).

Sólo nos resta una cosa más para terminar. Debemos modificar el archivo functions.php, y añadir las siguientes líneas (si no estuvieran ya):

<?php
if ( function_exists('register_sidebar') )
    register_sidebar();
?>

Este código se puede perfeccionar con diferentes opciones, como vemos en la página de Automattic. Por ejemplo, supongamos que tenemos dos sidebars, y queremos ponerles nombre. Podríamos hacer algo así:

<?php
if ( function_exists('register_sidebar') ) {

    register_sidebar(array('name'=>"Lka 1"));
    register_sidebar(array('name'=>"Lka 2"));

}
?>

De esta forma estaríamos construyendo 2 sidebar, con nombres “Lka 1″ y “Lka 2″. La forma de invocarlas luego desde el theme sería la siguiente:

Para llamar por ejemplo a la sidebar de nombre “Lka 2″. Lo mismo para la otra.

Como decía, se puede hilar más fino, modificando por ejemplo el html de nuestros widgets, en el caso de que la sidebar no siga la estructura clásica de ul-li-h2. Todo esto lo explican bastante bien en la página de Automattic que mencionaba antes.

Si tenéis alguna duda os invito a dejar un comentario, podéis considerar esto como parte de la iniciativa del Vengador Gráfico.

Suerte!