Como crear un Plugin de Widgets para el Sidebar en WP 2.5

Publicado por Fernando Tellado el 15 May, 2008

Índice de contenidos

1 WordPress 2.5 y los Widgets
2 Los Widgets hacen mas flexibles los Plugins
3 Las barras laterales no son solo barras laterales
4 Declarando tus barras laterales – Dentro de una plantilla
5 Usando Dynamic Sidebars en tu plantilla
6 Un gancho en el que colgar tu Widget
7 El código para mostrar tu Widget

WordPress 2.5 y los Widgets

Un Widget de WordPress es un elemento dinámico que puede situarse en las barras laterales (sidebars) de tu plantilla del blog. Un widget puede ser una pequeña muestra de código HTML también.

Los Widgets hacen mas flexibles los Plugins

Si escribes un plugin como widget tus usuarios serán mas capaces de mover tu plugin a donde quieran, colocándolo entre el resto de widgets. Esto es genial para los usuarios menos avanzados y ayudará a popularizar tu plugin recién creado.

Las barras laterales no son solo barras laterales

Aunque se llaman barras laterales también pueden ser cualquier bloque de la página. Una barra lateral puede ser una cabecera, el pié de página, incluso una sección de la página, lo que quieras. Además, es muy fácil “declarar” una barra lateral. Normalmente se declaran en el archivo functions.php.

Declarando tus barras laterales – Dentro de una plantilla

Por ejemplo, en una plantilla de 3 barras laterales, con las típicas a izquierda y derecha mas una superior, en el fichero functions.php se vería esto:

register_sidebar(array( 'name'=>'top_sidebar', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>', )); register_sidebar(array( 'name'=>'left_sidebar', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>', )); register_sidebar(array( 'name'=>'right_sidebar', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>', ));

register_sidebar(array( 'name'=>'top_sidebar', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>', )); register_sidebar(array( 'name'=>'left_sidebar', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>', )); register_sidebar(array( 'name'=>'right_sidebar', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>', ));

La documentación básica para registrar barras laterales está aquí. El nombre=>top_sidebar’ dice a WordPress como llamo a mi barra lateral. Este nombre es el qeu se mostrará en tu panel de “Diseño -> Widgets”, en la lista desplegable de los mismos. También puedes usar este nombre para situar los widgets de la barra lateral en tu plantilla. Los usuarios van a poder elegir añadir widgets a cualquiera de las barras laterales “declaradas”. Los before_widget, after_widget, before_title, y after_title especifican html que va con el widget. Esto es muy útil para aplicar estilos a los widgets y que se adapten a tu plantilla.

Usando Dynamic Sidebars en tu plantilla

Para usar tus barras laterales en la plantilla debes llamar a la función dynamic_sidebar. Se hace así:

< ?php if (function_exists('dynamic_sidebar')) { dynamic_sidebar('right_sidebar'); } ?>

1	< ?php if (function_exists('dynamic_sidebar')) { dynamic_sidebar('right_sidebar'); } ?>

Esto dice a WordPress que llame a las funciones que muestran los widgets que se añadan a, en este caso, la barra lateral llamada ‘right_sidebar’.

Un gancho en el que colgar tu Widget

Necesitarás decir a WordPress algo acerca del widget de tu plugin. Para hacerlo declara la acción “plugins_loaded” así:

function mycoolplugin_loaded()
    {
        $widget_ops = array('classname' => 'misuperplugin_widget', 'description' => "Widget super para tu barra lateral." );
        wp_register_sidebar_widget('misuperplugin_widget', 'SuperPlugin', 'misuperplugin_widget', $widget_ops);
    {
    add_action('plugins_loaded','misuperplugin_loaded');

function mycoolplugin_loaded()

{

$widget_ops = array('classname' => 'misuperplugin_widget', 'description' => "Widget super para tu barra lateral." );

wp_register_sidebar_widget('misuperplugin_widget', 'SuperPlugin', 'misuperplugin_widget', $widget_ops);

{

add_action('plugins_loaded','misuperplugin_loaded');

En el widget debes reemplazar “misuperplugin” con el nombre que tenga tu plugin, claro está. Y la descripción también es cosa tuya.

El código para mostrar tu Widget

En el código anterior especificamos misuperplugin_widget como la función de llamada que WordPress usará cuando quiera mostrar tu widget. Así que tendremos que declarar esta función y utilizarla par generar el código HTML de nuestro widget.

function misuperplugin_widget($args) { extract($args); // extracts before_widget,before_title,after_title,after_widget echo $before_widget . $before_title . 'SuperPlugin' . $after_title . "<ul>"; for ($i=0; $i<10; $i++) { echo "<li>Elementos $i</li>"; } echo "</ul>" . $after_widget; }

1	function misuperplugin_widget($args) { extract($args); // extracts before_widget,before_title,after_title,after_widget echo $before_widget . $before_title . 'SuperPlugin' . $after_title . "<ul>"; for ($i=0; $i<10; $i++) { echo "<li>Elementos $i</li>"; } echo "</ul>" . $after_widget; }

Este widget solo mostrará un encabezado llamado “SuperPlugin” y luego una lista de 10 elementos. Por supuesto, debes hacer el tuyo mucho mas completo, pero eso ya es cosa tuya.

Gracias

Si te gusta este contenido prueba tambien a suscribirte al canal en YouTube.

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.