Cómo crear un widget de wordpress.

Widget RSSSiguiendo con el manual de crear tu propio theme de wordpress, es posible que te encuentres con que quieres agregar nuevos módulos al sidebar, más conocidos como widgets.

Hay varias formas de hacer esto, por un lado, puesto y que tienes la opción de escoger entre un sidebar dinámico y otro estático, podrías escoger lo segundo y programar en php el sidebar de una sola pieza, aunque no será configurable desde el panel de administración. Otra opción es entrar al panel de administración y crear un widget de tipo texto, en el que podrías meter código html o javascript.

Pero el problema de todo esto, es que en caso de querer modificar el sidebar sin tocar el código fuente, de que algún widget de problemas, queramos hacer un backup o actualizar a una nueva versión, el mantenimiento resulta más costoso. Por ello la opción más lenta pero también más segura a largo plazo consiste en crear nuevos widgets e incorporarlos a través del panel de administración.

¿Cómo creo un nuevo widget?

Crear un nuevo widget es sencillo, sólo tienes que seguir estos pasos:

  1. Crear un archivo php para meter tu widget, por ejemplo miwidget.php
  2. Incluir y editar en ese archivo las líneas de código que te pongo mas abajo.
  3. Colocar el archivo miwidget.php en la carpeta wp-content/plugins/
  4. En el panel de administración, activar el widget en el apartado de plugins.
  5. En el panel de administración, arrastrar el widget al sidebar en el apartado de design->widgets.

Éste es el código que debes introducir en el archivo miwidget.php:

<?php
/*
Plugin Name: MiWidget - Feed RSS
Plugin URI: http://www.entrecodigos.com/
Description: Enlaces para suscribirse al feed del blog
Author: Rubén Cantón
Version: 1
Author URI: http://www.entrecodigos.com/
*/

function miwidget_rss() {
    echo "<div class='sidebar-rss'>";
    echo "<img src='./wp-content/plugins/miwidget/rss.gif' alt='rss'/>";
    echo "<a href = \"http://feeds.feedburner.com/entrecodigos/ \">Feed de artículos</a>";
    echo "</div>";
}

function init_miwidget_rss(){register_sidebar_widget("Mi Widget - Feed RSS", "miwidget_rss");}

add_action("plugins_loaded", "init_miwidget_rss");
?>

Al igual que cuando creamos el style.css, los comentarios del principio sirven para identificar tu widget en el panel de administración, en este caso, de administración de plugins.

Los métodos utilizados son los siguientes:

add_action: Establece que cuando se produzca un evento determinado (en este caso, tras la carga de los plugins), se ejecute el método establecido.

register_sidebar_widget: Registra un widget estableciendo un nombre para el mismo (que será el que se muestre en el panel de administración de widgets) y la función a la que se debe llamar cuando se ejecute.

Lo que no debemos olvidar

  • No olvides que existen widgets ya creados para wordpress.
  • Cuando crees tus propias funciones, recuerda poner siempre algún prefijo imposible de igualar, no sea que generes un conflicto con funciones del wordpress o con otro plugin.
  • Puedes crear una carpeta para tu plugin, y meter imágenes, estilos o cualquier cosa en ella, como he hecho yo en el ejemplo.

Fuentes:
Emanuele Feronato
WordPress Widgets API

24 thoughts on “Cómo crear un widget de wordpress.”

  1. Hola
    Disculpa si no estribo donde hay que
    Buscó algún quien entiende bien en posicionamiento de web
    tengo web que esta en 3 ra página de google
    Y buscó alguien que puedo subir mi pagina rápido(como 3, o 3 mes o menos) en primeros
    Contácteme por favor

  2. Muchisimas graxias! Me a dando una gran ayuda. Bien resumidito como lo que necesitaba.

    Te lo agradezco mucho!

  3. Hola,
    Estoy intentando incrustar un formato de ejercicios dinámicos en un blog de educación que estoy poniendo en marcha. Me preguntaba si esto me serviría para subir los ejercicios al cuerpo del post. de hecho mis dudas són:
    ¿Como subir los ejercicios al cuerpo del post, no a la barra lateral?
    ¿Si tengo el programa (codigo libre) en mi ordenador, donde tengo que guardar los ejercicios que genera (crea un fichero htm y otro js) para que el widget los pueda leer?
    Muchas gracias por la ayuda

  4. Si son algoritmos en JS puedes subirlos a una carpeta llamada ejercicios, llamarla con un include y colocar la parte HTML en la entrada. Es lo mejor que se me ocurre, pero explicarte paso a paso cómo subir archivos a tu servidor (¿tienes hosting o es en wordpress.com?), cómo crear una carpeta, como hacer includes en JS, etc. es demasiado, tan solo te puedo decir que investigues el tema de “hacer includes en javascript” y alojes las librerías (código JS) en algún sitio.

  5. Hola de nuevo.

    Terminé de diseñar mi Widget, pero me surge un problema. Cuando quiero hacer login me salta un error:

    Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress284\wp-content\plugins\miWidget\miWidget.php:1) in C:\xampp\htdocs\wordpress284\wp-login.php on line 290

    Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpress284\wp-content\plugins\miWidget\miWidget.php:1) in C:\xampp\htdocs\wordpress284\wp-login.php on line 302

    He revisado que los ficheros no tengan espacios en blanco después del ?>, así que lo he descartado.

    En cuanto elimino el widget de la carpeta plugin, el error desaparece.

    Mi widget lo único que hace es usar esta función:

    http://codex.wordpress.org/Template_Tags/wp_tag_cloud

    para crear una nube de etiquetas simple, sacando el listado ordenado alfabéticamente.

    ¿Sabes de qué puede ser?

    Muchas gracias y un saludo.

  6. Pues como bien dices lo más probable es que sea un error de sintaxis, ya sea que hay algo después del ?> o antes del <?php. Revísalo bien porque algún problema hay.

  7. Ya lo resolví. Al principio lo editaba con Notepad++, asegurándome de que estaba en UTF-8. Ahora lo edité con UltraEdit-32, y me aparecía un caracter raro antes del <?php. Lo eliminé y listo ;).

    Otra preguntita, a ver si me puedes ayudar. Con el plugin he implementado una nube de etiquetas personalizada. Estoy utilizando un theme que añade un marco alrededor de los widgets que tenga mi página. Pero, en mi plugin no los pone por defecto. Los he tenido que añadir yo dentro del código del plugin. ¿Hay alguna forma de separarlo para que pueda usar el plugin en cualquier blog independientemente del theme?

    Gracias y un saludo.

  8. Lo que tendrías que mirar es cómo añade ese borde el theme, es posible que los otros widgets tengan algun div con algún class o algo que genere ese border y tu widget no lo tenga. Utiliza Firebug para ver estas cosas que es más cómodo.

    Todos los plugins son personalizables (open source) así que puedes liberar la versión estándar y quedarte con una copia personalizada con el borde… 😉

  9. Si por adaptar te refieres a aprovechar el código fuente, todo es aprovechable. Si por adaptar te refieres a insertar en una web como si fuese el blog, no.

  10. Gracias por este articulo. mi intencion es crear Widget para mi Propio Gestor Merlyna CMS y esto me aclara el panorama en un dia en que se me ocurrio esta idea de los widgets

  11. Hola, necesito editar el WIDGET de entradas recientes para que no muestre una etiqueta, pero no sé donde está el archivo en wordpress 3, alguien tiene idea?. Slds

  12. Hola. no entiendo muy bien lo de los plugins… Cuando instalo un plugins,, como hago para que se vea en l pagina? Alguien me puede decir, si hay un manual o algo que me pueda recomendar,, no lo he podido lograr.. Gracias

Comments are closed.