Entre Códigos


El blog de Rubén Cantón

Reflexiones de un cerebro en fuga y artículos sobre posicionamiento, e-marketing, usabilidad y otros tecnicismos.

greyimg

Cómo crear un widget de wordpress.

Escrito por Ruben Cantón el Friday, 23 de January del 2009
Más del mismo tema: blog, taller

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

Ya hay 19 comentarios. ¡Falta el tuyo!

Escríbe aquí tu opinión

Nombre (necesario)

Email (no se mostrará)

Web (opcional)

mygif
1. Sandra
January 29th, 2009 at 8:27 pm

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

mygif
2. Anibal
April 27th, 2009 at 5:39 pm

muchisimas gracias, estaba buscando algo asi y me solucionaron un monton !!!

mygif
3. Yeow
July 1st, 2009 at 6:16 pm

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

Te lo agradezco mucho!

mygif
4. Pere
September 17th, 2009 at 7:10 pm

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

mygif
September 18th, 2009 at 9:48 am

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.

mygif
October 9th, 2009 at 12:55 am

he hecho todo lo que dices… logro activarlo desde la zona plugins pero no aparece en la zona widget… que hago?

mygif
October 9th, 2009 at 4:46 pm

Asegúrate de no haberte comido ninguna letra, esas cosas pasan más de lo que te imaginas.

mygif
October 19th, 2009 at 11:58 am

Muchas gracias. Es muy simple y me ha resuelto lo que necesitaba. Un saludo.

mygif
October 20th, 2009 at 11:45 am

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.

mygif
October 20th, 2009 at 1:59 pm

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.

mygif
11. Javier
October 20th, 2009 at 2:48 pm

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.

mygif
October 20th, 2009 at 4:26 pm

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… ;)

mygif
13. cusco
January 3rd, 2010 at 3:17 am

oe una pregunta ???? los plugin o widget de wordpress se podran adaptar a paginas web no a blog??

mygif
January 3rd, 2010 at 4:56 am

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.

mygif
January 21st, 2010 at 12:03 am

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

mygif
June 23rd, 2010 at 9:16 am

Buen articulo…

mygif
August 6th, 2010 at 10:38 pm

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

Escríbe aquí tu opinión

Nombre (necesario)

Email (no se mostrará)

Web (opcional)

Pingback y Trackback

Pingback y trackback de varios blogs:
December 31st, 2009 at 1:48 am

[...] Cómo crear un widget de wordpress [...]

September 2nd, 2010 at 4:23 am

[...] is a translation from my original post in spanish. I hope you enjoy [...]

¿Quieres más?

Temas del blog

Busca por Entre Códigos

 

Últimos comentarios

Últimos artículos

Lo más comentado

Blogroll

Mis proyectos