Crear un tema per afegir widgets (ginys)

Explicat en el blog rutarelativa.com

La mayoría de los themes que nos descargamos actualmente para WordPressdisponen ya de una zona para añadir o quitar Widgets. En el caso que estemos creando un theme desde cero o añadiendo una nueva parte que contendrá Widgets la cosa se “complica”. Crear en el theme una zona con Widgets, acción también llamadaWidgetizing, no es complicado. Empecemos poco a poco, los beneficios de usarWidgets en nuestros template son:

 

  • Tener una estructura mejor dividida, con lo que podemos añadir o quitar partes de nuestro template rápidamente.
  • Poder cambiar el aspecto de todos los Widgets cómodamente.
  • Tener un template más “amistoso” para los usuarios que no saben programar.
  • Tener varias áreas estructuradas con la posibilidad de cambiarlas.

 

HTML del Widget

<div id="sdbr-lscm" class="sdbr-cntd">
<div class="sdbr-titl">Últimos comentarios</div>
<div class="sdbr-cndr">
// Contenido del Widget
</div>
</div>

 

Registrar el Sidebar

Para poder tener una o varias zonas que contengan Widgets necesitamos registrar tantos sidebars como zonas quremos que integren Widgets en nuestro ficherofunctions.php.

    // Registramos el sidebar de la izquierda
    register_sidebar( array
    (
        "before_widget" => "<div id="sdbr-%1$s" class="sdbr-cntd">",
        "after_widget"  => "</div>",
        "before_title"  => "<div class="sdbr-titl">",
        "after_title"   => "</div>"
    ) );

El código se explica por si mismo, los argumentos before_widget y after_widget se utilizan para el contenedor del Widget mientras que los argumentos before_title y after_title se usan para el título del Widget. En este caso “Últimos comentarios”.

 

Añadiendo nuestro Sidebar al theme

Para que nuestro template contenga el Sidebar creado nos dirijimos al archivosidebar.php y añadimos:

<?php if ( !function_exists("dynamic_sidebar") || !dynamic_sidebar() ) : ?>
// Sidebar por defecto
<?php endif; ?>

Esto llamará dinámicamente a nuestro Sidebar creado junto a todos sus Widgets. Si la versión de WordPress no permite Sidebar dinámico esto cargará el código que tenemos dentro de la sentencia IF.

 

Añadiendo varios Sidebar a nuestro theme

    // Registramos el sidebar de la izquierda
    register_sidebar( array
    (
        "name" => "izquierda",
        "before_widget" => "<div id="sdbr-%1$s" class="sdbr-cntd">",
        "after_widget"  => "</div>",
        "before_title"  => "<div class="sdbr-titl">",
        "after_title"   => "</div>"
    ) );

    // Registramos el sidebar de la derecha
    register_sidebar( array
    (
        "name" => "derecha",
        "before_widget" => "<div>",
        "after_widget"  => "</div>",
        "before_title"  => "<h2>",
        "after_title"   => "</h2>"
    ) );

Como puede observarse la única diferencia es el añadido de un nuevo argumento llamado “name” que es una clave única para identificar este sidebar.

 

Añadiendo varios Sidebar al theme

<?php if ( !function_exists("dynamic_sidebar") || !dynamic_sidebar("derecha") ) : ?>
// Sidebar por defecto
<?php endif; ?>

Es idéntico al caso anterior pero esta vez a la funcion “dynamic_sidebar” le pasamos como argumento qué Sidebar vamos a usar.

 

Podemos encontrar más información en Widgets plugins y Widget themes, dos guías bastante extensas sobre los Widgets en WordPress creada por automattic.

Artículos relacionados