Widgets de WordPress

Este post resume mi lectura acerca de widgets de wordpress de automattic.com creadores de los mismos. Un widget de wordpress es un trozo pluggleable (que se puede conectar) para un sidebar. A partir de la versión 2.2, el plugin de widget forma parte del core de wordpress.

Tener habilitado wordpress para soportar widgets no es suficiente, se necesia que los temas estén habilitados para utilizarlo, en el artículo “widgetizing themes” hay un tutorial que indica como hacerlo.

Los widget de wordpress como se dijo anteriormente, se usan en los sidebar, lo primero que debemos hacer es identificar como está implementado nuestro sidebar y como está dividida cada sección. En la mayoría de los casos en los temas que nos encontramos en internet, estos widget están implemementados en listas no ordenadas html, esta estructura puede ser fácilmente adaptada via hojas de estilo en cascada (css) para lograr direntes tipos de efectos.

Para hacer un tema conciente de los widget, basta con agregar en la parte de código que genera el sidebar lo siguiente.

<?php if ( !function_exists('dynamic_sidebar')|| !dynamic_sidebar() ) : ?>
 <!-- codigo sidebar estático-->
<?php endif; ?>

La instrucción dynamic_sidebar() esta disponible en wordpress habilitados con widget y permite que el plugin de widgets fije dinámicamente el contenido del sidebar.

El siguiente paso es registrar el sidebar (Wodpress version 2.0 o superior) para ello, edite el ficher function.php (o creelo si no está) y agrege:

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

Esto permitirá al plugin conocer que su tema necesita exactamente un sidebar y agregará en la parte administrativa presentación de wordpress un botón widget que le permitirá configurar dinámicamente su barra lateral de manera gráfica usando drag & drop.

El plugin de widget soporta además otras formas de sidebar y permite configurar el contenedor del título y del widget, para personalizar las salidas de los widget, usamos una versión extendida de register_sidebar.

<?php

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<div class="title">',
        'after_title' => '</div>',
    ));
?>

La estructura de before_widget es un poco más compleja, el valor por defecto es incluye las directivas %1$s y %2$s que corresponden al id y a la clase respectivamente (El ID debe ser único en todo el documento html). De esta forma, el registro del sidebar sería:

if ( function_exists('register_sidebar') )

    register_sidebar(array(

    'before_widget' => '<div id="%1$s" class="widget %2$s">',

    'after_widget' => '</div>',

    'before_title' => '<div class="title">',

    'after_title' => '</div>',

    ));

?>

Para registrar varios sidebars use register_sidebars(n) y en el sidebar indique el sidebarque desea usar en la instrucción dynamic_sidebar(Número Sidebar).

Finalmente, para implementar nuestros propios widgets, creamos una función en el tema y la registramos como widget.

function widget_mytheme_search() {
?>
    << PASTE YOUR SEARCH FORM HERE >>
<?php
}
if ( function_exists('register_sidebar_widget') )
register_sidebar_widget(__('Search'), 'widget_mytheme_search');

Para más información sobre como hacer widgets puede leer el documento How I do Develop a Widget. Yo luego estaré escribiendo algo del tema, ahora me voy a jugar un rato con mi temas para widgetizarlos… que termino más raro. :-).

About these ads

  1. Acerca de los widget:
    Tengo una cuenta en youtube con algunos videos que he subido y me gustaria ponerlos en mi blog; quise hacerlo atravez de un widget pero no existe un widget en mi presentacion para poder los videos.
    Talvez me pudes ayudar pues veo que tu tienes algunos videos en tu blog.
    ¿Como lo puedo hacer?

  2. dacosta51

    Hoja jcalderon.

    Puedes encontrar un plugin para videos de youtube en http://wordpress.org/extend/plugins/wordtube/, con el cual puedes agregar los videos en tus post, yo aun no lo he probado, pero si he utilizado el que viene integrado en los sitios que se crean con wordpress.

    Widget como tal, no lo he visto para que te salga en una barra vertical como el que está en este sitio, pero podria ser una buena aportación a la comunidad wordpress.

  3. interiores3d

    hola dacosta
    he topado contigo buscando los widget en wordpress por problemas con la migración de flickr a mi blog, es realmente imposible agregarlo.
    Pero he notado que te pasa algo parecido en este blog, las fotos no salen, solo nombres de otros flickrqueros y sin imagenes. si lo consigues no dudes en contestarme.
    gracias y saludos.
    interiores3d.

  4. dacosta51

    Hola Interiores3D.

    En este blog, uso el widget que viene o que ofrece wordpress, en las aplicaciones que tengo, aún no he instalado el plugin flick, pero si se algo, con mucho gusto te lo comunico.

  5. Migo®

    Hola, llegué a esta página buscando información acerca de los famosos widgets. Estuve viendo algunos blogs y vi que ponen imágenes en el side bar. Como lo hacen? y de paso estas imagenes son link para alguna otra página. Quizás con HTML?
    Gracias por la información.

  6. dacosta51

    Hola Migo.

    En este blog, los imágense que ves en el sidebar las saca un widget de videos. Esta característica es permitida por el tema que estoy usando en wordpress, pero no todos los temas que hay lo soportan.

    El código html está filtrado en wordpress, he intentado poner algunos widget que tengo sencillos con divs e iframe pero se los carga.

    Gracias por tu comentario.

  7. Migo®

    Sip :) está comprobado, en el Widget “texto” se puede colar uno que otro codigo HTML por lo menos para colgar algunas imágenes o imágenes que tengan enlace.

    Saludos!

  8. sombra5

    WAU_classic(‘kdvvur1ulrmi’)
    KIERO KOPIAR EE CODIOOO




Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s



Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

A %d blogueros les gusta esto: