La mayoría de los themes que nos descargamos actualmente para Wordpress disponen 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 llamada Widgetizing, no es complicado. Empecemos poco a poco, los beneficios de usar Widgets 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 fichero functions.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 archivo sidebar.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.
-
CheatSheet para Wordpress Publicado por Sampedro el día 22/02/2010
Guardado en Desarrollo, Themes, Wordpress -
Wordpress: Como crear un Widget Publicado por Sampedro el día 23/12/2009
Guardado en Desarrollo, Plugins, Tutoriales, Wordpress -
WpMooSnow: Plugin efecto nieve en JQuery para Wordpress Publicado por Sampedro el día 04/12/2009
Guardado en Freebies, Javascript, Plugins, Wordpress -
WpMooSnow: Plugin efecto nieve en Mootools para Wordpress Publicado por Sampedro el día 03/12/2009
Guardado en Freebies, Javascript, Plugins, Wordpress -
Añadir icono dentro de un Input Publicado por Sampedro el día 10/03/2010
Guardado en CSS