Rutarelativa

Publicidad

Anotaciones reducidas

  • La vida en un día: Película de un día en la Tierra La vida en un día: Película de un día en la Tierra

    La vida en un día -Life in a day- es una película hecha por los propios usuarios de Youtube, que durante el día 24 de Julio del 2010 grabaron las cosas que pasaban en su vida durante ese día, y el director Kevin McDonald ha reunido en forma de película de un día en la Tierra.

    De una hora y media de duración, veremos todo tipo de escenas en todas las partes del mundo, con una emotiva visión del mundo real tanto con sus cosas bellas y buenas, como con la más cruda visión del ser humano y su realidad.

    [La vida en un día: Película de un día en la Tierra]

  • Video: Las posibilidades de Kinect Video: Las posibilidades de Kinect

    Cuando oímos hablar de Kinect, no podemos evitar pensar en un "simple" aparato de detección de movimientos para videojuegos, y en cierto modo es así.

    Lo bueno es que Microsoft ha lanzado una SDK de Kinect para que los usuarios puedan crear aplicaciones que exploten las capacidades del dispositivo, dando lugar a miles de ideas.

    El siguiente video es al fin y al cabo con fines publicitarios, pero nos da que pensar acerca de las aún sin explotar posibilidades de Kinect. Disfrutadlo.

    [Video: Las posibilidades de Kinect]

  • La historia de los Exploradores Web La historia de los Exploradores Web

    Desde prácticamente los comienzos de Internet los Exploradores Web o Navegadores web nos han acompañado, haciendo las veces de herramientas indispensables para una navegación que a cada año que pasa se hace más cómoda y más intuitiva.

    En Testking encuentro una imágen que contiene un gran esquema de la historia de los Exploradores Web desde el primer Nescape en 1994 hasta los navegadores modernos de este año 2011.

    Una imágen interesante para conocer cuál ha sido la evolución en éste área.

    [La historia de los Exploradores Web]

Últimos comentarios

  • Avatar del usuario Alberto Alberto Hola Sergio, Excelente tu post, llegué a ti debido que quiero...
  • Avatar del usuario aiko aiko Hola, yo uso esta calculadora saber cuánto para enviar y recibir:...
  • Avatar del usuario Samir Jalabe Samir Jalabe Buenas quien me ayuda hacer un rombo en Php por favor de antemano...
  • Avatar del usuario andres andres y como los recibes en javascript?
  • Avatar del usuario sdasdas sdasdas WINDOWS 7 ---> C:\Program Files\Common Files\Adobe\OOBE\PDApp\UWA
  • Avatar del usuario Mariano Fuenzalida Mariano Fuenzalida Disculpa, cuando despliego el menú de ayuda en photoshop...
  • Avatar del usuario Metztli Metztli Ese código de php, ¿funciona para magento?
  • Avatar del usuario daniel daniel Buenas tardes quisiera saber como se escribe mi nombre...
  • Avatar del usuario Omar Omar Hola: Estoy rehaciendo mi web que es un gran catálogo y quiero...
  • Avatar del usuario carlos carlos muchas por tu aporte

Lo más comentado

Lo más visto

Post al azar

WordPress: Como crear un Widget

(26)
23 / Diciembre / 2009
WordPress: Como crear un Widget

En este tutorial veremos como crear un Widget para WordPress. Pondremos como ejemplo el Widget “Editores de Ruta Relativa” (puedes verlo en nuestro sidebar), en el que mostraremos los editores del Blog con sus últimas X entradas publicadas. La explicación del código se encuentra comentada en los archivos, aquí mostrare sólo de forma global como crear un Widget.

¿Que necesitamos para empezar a crear nuestro Widget?

Necesitamos ante todo disponer de un theme que soporte Widgets, tal y como aprendimos en el tutorial “WordPress: Crear theme para usar Widgets“. Recomiendo hacer las pruebas en nuestro servidor local por las posibles incidencias que podrían ocurrir mientras realizamos nuestro Wiget y una vez terminado se actualizaría en el servidor de producción. Podremos continuar cuando tengamos un theme que soporte Widgets.


Nombre para nuestro Widget

Como hemos comentado anteriormente, nuestro Widget mostrará los editores del Blog con sus últimas X entradas publicadas. Un nombre por ejemplo seria “Últimos post por autor”. Tendremos que comprobar si dicho nombre existe ya para otro plugin, para evitar posibles incompatibilidades si tenemos los dos instalados. Podríamos usar el buscador de plugins de WordPress o el propio Google para verificar si existe un plugin con el mismo nombre.

Empezamos a crear el Widget

Comenzamos creando un directorio con el nombre de nuestro Widget en el directorio “wp-content/plugins/”. Aquí es donde WordPress almacena los plugins. Recomiendo crear un directorio siempre que se crea un Widget, aunque éste contenga sólo un archivo, ya que más tarde podrías incorporarle más archivos y te verías obligado a tocar porciones del código del Widget. En nuestro caso vamos a crear el directorio “ultimos-post-por-autor” y dentro de él un archivo llamado “widget-ultimos-post-por-autor.php”

La cabecera de nuestro Widget

<?php
/*
Plugin Name: NOMBRE_DE_NUESTRO_PLUGIN
Plugin URI: URL_DONDE_EXISTE_INFORMACION_DE_NUESTRO_PLUGIN
Description: DESCRIPCION_DE_NUESTRO_PLUGIN
Version: VERSION_DEL_PLUGIN
Author: AUTOR_DEL_PLUGIN
Author URI: URL_DEL_AUTOR
*/
?>

Toda esta información se utilizará para identificar nuestro Widget en la administración de plugins para WordPress, como podemos ver en la siguiente imagen.

Wordpress: Como crear un Widget

Estructura principal de nuestro Widget

// Cuando se inicializa el widget llamaremos al metodo register de la clase Widget_ultimosPostPorAutor
add_action( "widgets_init", array( "Widget_ultimosPostPorAutor", "register" ) );

// Clase Widget_ultimosPostPorAutor
class Widget_ultimosPostPorAutor
{
    // Panel de control que se mostrara abajo de nuestro Widget en el panel de configuración de Widgets
    function control()
    {
        echo "Hola, soy el panel de control.";
    }

    // Metodo que se llamara cuando se visualize el Widget en pantalla
    function widget($args)
    {
        echo $args["before_widget"];
        echo $args["before_title"] . "Editores de " . get_option( "blogname" ) . $args["after_title"];

        echo "Hola soy tu Widget";
        echo $args["after_widget"];
    }

    // Meotodo que se llamara cuando se inicialice el Widget
    function register()
    {
        // Incluimos el widget en el panel control de Widgets
        register_sidebar_widget( "Últimos post por autor", array( "Widget_ultimosPostPorAutor", "widget" ) );

        // Formulario para editar las propiedades de nuestro Widget
        register_widget_control( "Últimos post por autor", array( "Widget_ultimosPostPorAutor", "control" ) );
    }
}

Una vez guardado nos dirigiremos al Panel de Control de plugins y lo activaremos. Una vez activado, vamos a las opciones de los Widgets, dentro del submenú apariencia, y lo añadiremos a nuestro sidebar. En nuestro template aparecerá nuestro Widget.

Wordpress: Como crear un Widget

Datos dinámicos para nuestro Widget

Se añadirá fuera de la clase del Widget las llamadas a “register_activation_hook” y “register_deactivation_hook”, que serán las encargadas de llamar a los métodos de la clase cuando se active o desactive el plugin. Tambien se añadirán dos nuevas funciones llamadas “activate” y “deactivate” que serán para los métodos llamados.

// Cuando se active el plugin se llamara al metodo activate de la clase Widget_ultimosPostPorAutor
// donde añadiremos los argumentos por defecto para que funcione el plugin
register_activation_hook( __FILE__, array( "Widget_ultimosPostPorAutor", "activate" ) );

// Cuando se desactive el plugin se llamara al metodo desactivate de la clase Widget_ultimosPostPorAutor
// donde se eliminaran los argumentos anteriormente guardados, para tener una DB limpia
register_deactivation_hook( __FILE__, array( "Widget_ultimosPostPorAutor", "deactivate" ) );
function activate()
{
    // Argumentos y sus valores por defecto
    $aData = array( "SIZE_AVATAR" => 50, "NUMERO_POST" => 5 );

    // Comprobamos si existe opciones para este Widget, si no existe las creamos por el contrario actualizamos
    if( ! get_option( "ultimosPostPorAutor" ) )
        add_option( "ultimosPostPorAutor" , $aData );
    else
        update_option( "ultimosPostPorAutor" , $data);
}

function deactivate()
{
    // Cuando se desactive el plugin se eliminaran todas las filas de la DB que le sirven a este plugin
    delete_option( "ultimosPostPorAutor" );
}

Como se puede apreciar, hemos creado dos datos que son dinámicos para nuestro Widget. Uno llamado “SIZE_AVATAR” que será el que contenga el tamaño para el avatar de los editores. Y otro llamado “NUMERO_POST” que es el encargado de mostrar el número máximo de posts por editor.

Crear el panel de control para nuestro Widget

Usaremos el método control para la visualización y actualización de las opciones de nuestro Widget.

// Panel de control que se mostrara abajo de nuestro Widget en el panel de configuración de Widgets
function control()
{
    $aData = get_option( "ultimosPostPorAutor" );

    // Mostraremos un formulario en HTML para modificar los valores del Widget
    ?>
        <p>
            <label>Tamaño del avatar:</label>
            <input name="ultimosPostPorAutor_SIZE_AVATAR" type="text" value="<?php echo $aData["SIZE_AVATAR"]; ?>" />
        </p>
        <p>
            <label>Numero máximo de post:</label>
            <input name="ultimosPostPorAutor_NUMERO_POST" type="text" value="<?php echo $aData["NUMERO_POST"]; ?>" />
        </p>
    <?php

    // Si se ha enviado uno de los valores del formulario por POST actualizaremos los datos
    if( isset( $_POST["ultimosPostPorAutor_SIZE_AVATAR"] ) )
    {
        $aData["SIZE_AVATAR"] = attribute_escape( $_POST["ultimosPostPorAutor_SIZE_AVATAR"] );

        $aData["NUMERO_POST"] = attribute_escape( $_POST["ultimosPostPorAutor_NUMERO_POST"] );

        update_option( "ultimosPostPorAutor", $aData );
    }
}

En el Panel de Control de Widgets, dentro de “apariencia”, nos mostrará el sidebar con nuestro Widget en él. Si desplegamos las opciones podremos editarlas como se aprecia en la imagen a continuación.

Wordpress: Como crear un Widget

Funcionalidad del Widget

<?php
function widget($args)
{
	// Variables
	$aData     = get_option( "ultimosPostPorAutor" );
	$aUsuarios = null;
	$aUsuario  = null;
	$aPosts    = null;
	$aPost     = null;
	global $wpdb;

    // Cargamos en un array todos los editores del blog
    $aUsuarios = $wpdb->get_results( "SELECT ID, user_login, user_nicename, user_email FROM " . $wpdb->users . " WHERE user_login != "admin"" );

    // Recorremos todos los editores
    foreach( $aUsuarios as $aUsuario )
    {
        echo "<li>
				  <a class="avtr" rel="nofollow" title="Avatar del autor " . $aUsuario->user_login . "" href="/author/" . $aUsuario->user_nicename . "/">
					 " . get_avatar( $aUsuario->user_email, $aData["SIZE_AVATAR"] ) . "
				  </a>
				  <div>
					  <a rel="nofollow"  title="Perfil del autor " . $aUsuario->user_login . "" href="/author/" . $aUsuario->user_nicename . "/">" . $aUsuario->user_login . "</a>
					  <a onclick="document.getElementById(\"slde-edit" . $aUsuario->user_nicename . "\").style.display = (document.getElementById(\"slde-edit" . $aUsuario->user_nicename . "\").style.display == \"block\" ? \"none\" : \"block\");" class="mas" href="javascript:void(0);"><span>[+]</span> Ver las últimas entradas publicadas</a>
					  <div class="post" id="slde-edit" . $aUsuario->user_nicename . "">
						  <ul>";

        // Cargamos en un array todos los post de un editor
        $aPosts = $wpdb->get_results( "SELECT ID, post_title, post_date, comment_count
                                       FROM " . $wpdb->posts . "
                                       WHERE post_status = "publish" and post_type = "post" AND post_author = " . $aUsuario->ID . "
                                       ORDER BY post_date DESC
                                       LIMIT " . $aData["NUMERO_POST"] );

        // Recorremos todos los post del editor
        foreach( $aPosts as $aPost )
        {
            // Obtenemos el permalink del post
            $sSlug = get_permalink( $aPost->ID );

            echo "<li>
                      <a title="" . $aPost->post_title . "" href="" . $sSlug . "">" . $aPost->post_title . "</a>
                      <span>" . date( "d/m/Y", strtotime( (string)$aPost->post_date ) ) . " - <a title="Comentarios para " . $aPost->post_title . "" href="" . $sSlug . "#comments">" . $aPost->comment_count . " comentario" . ($aPost->comment_count > 0 ? "s" : "") . "</a></span>
                  </li>";
        }

        echo "</ul></div></div></li>";
    }
}
?>

En el método “widget” hemos añadido la funcionalidad del Widget, es decir mostrar los editores de Blog junto con sus X post que han escrito. Como dije antes en el código fuente del Widget que podéis descargaros al final del tutorial se encuentra todo documentado para no perderse.

Hemos aprendido a crear un Widget, usar el objeto “$wpdb” de WordPress para realizar nuestros consultas y añadir opciones al Panel de Control de Widgets en nuestra administración de WordPress. Ésta es la forma que he utilizado yo para crear el Widget “últimos post por autor”, seguramente existan muchos caminos mejores o peores para crearlo, así que eres libre de modificarlo a tu antojo. Se pueden añadir más funcionalidades como por ejemplo un efecto slide para visualizar los post, como se puede ver en Ruta Relativa. Si usas este Widget puedes modificar el CSS dentro del plugin.

Enlace: Demo Widget últimos post por autor
Enlace: Descargar Widget últimos post por autor
Fuente: Valums

votar

Artículos relacionados

Sobre KeLDroX

296

Desarrollador en entornos web y Diseñador de profesión, muy activo, que busca siempre enfrentarse a retos cada vez más dificiles. Si un día no hago algo nuevo o no he superado alguna dificultad para mi es un día vacío. Cuento con dos titulaciones: Técnico en Explotación de Sistemas Informáticos y Técnico Superior en Desarrollo de Aplicaciones Informáticas. Fundé rutarelativa porque siempre quise tener un sitio en donde compartir mis experiencias profesionales y a los problemas que me enfrento día a día en el ámbito profesional.

Sigue a Ruta Relativa

Trackback en WordPress: Como crear un Widget

  1. [...] de Rutarelativa me envia un artículo que ha publicado sobre como crear un widget para Wordpress sacado de un caso real que usan en su web. Sin duda una buena base para afrontar la nueva API de [...]
  2. [...] Hacer un nuevo widget es muy fácil, y en Ruta relativa nos avisan que han realizado un post en el que lo explican paso a paso. [...]
  3. Social comments and analytics for this post... This post was mentioned on Twitter by keldrox: Como crear tu primer Widget en Wordpress http://bit.ly/894IcH Buen tutorial ^^!...
  4. [...] de Rutarelativa me envia un artículo que ha publicado sobre como crear un widget para Wordpress sacado de un caso real que usan en su web. Sin duda una buena base para afrontar la nueva API de Widgets. ← [...]
  5. [...] el sitio Ruta relativa han confeccionado un manual sobre cómo llevar a cabo el proceso de confección de un widget para [...]
  6. [...] el sitio Ruta relativa han confeccionado un manual sobre cómo llevar a cabo el proceso de confección de un widget para [...]
  7. [...] http://www.rutarelativa.com/plugins/wordpress-como-crear-widget/ [...]
  8. [...] Como crear widgets Posted Enero 4th, 2010 by Canaro Si tienes que hacer un widget para wordpress,Ruta relativa te lo va a poner fácil, han creado un completo tutoríal para crear widgets, en este tutoríal creación widgets , te encontraras todo lo relativo a la creación de widgets, con el consiguiente beneficio para tu blog en wordpress.Sigan el link [...]
  9. [...] Platz haben sie relativer Weg ein Handbuch hergestellt auf wie den Anfertigungsprozess eines Widget für [...]
  10. [...] месте относительный Путь они произвели учебник, на как осуществлении процесса [...]
  11. [...] l'endroit la Route relative ils ont confectionné un manuel sur comment réaliser le processus de confection d'un widget pour le [...]
  12. [...] anieto2k he arribat a un artícle de ruta relativa sobre com crear widgets per a WordPress. Allà està tot molt ben explicat: què necessitem, capçalera, estructura principal del widget, [...]
  13. [...] el sitio Ruta relativa han confeccionado un manual sobre cómo llevar a cabo el proceso de confección de un widget para [...]
  14. [...] crear un widget para wordpress http://www.rutarelativa.com/plugins/wordpress-como-crear-widget/ [...]
  15. […] WordPress: Como crear un WidgetPublicado por KeLDroX el día 23/12/2009Guardado en Desarrollo,Plugins,Tutoriales,WordPress […]

Comentarios en WordPress: Como crear un Widget

1
Avatar del usuario manuxplore

Eres un maquina con los tutoriales Sampedro! Como te lo curras ^^

manuxplore 23/12/2009 22:06:19
2
Avatar del usuario Diego

tengo una duda…
como hago lo mismo pero con el widget “ultimos comentarios”. el que tienes tu esta personalizado, en mi pagina solo sale el nombre de la persona que comento y en que entrada y nada mas…

Diego 29/01/2010 08:24:49
3
Avatar del usuario Sampedro

@Diego Para realizar el widget “últimos comentarios” tienes que seguir los mismos pasos que este tutorial, pero en lo que es la parte de obtener los datos y pintarlo es diferente, para explicártelo tendría que realizar un tutorial. Si este fin de semana tengo algo de tiempo realizare un tutorial para crear el widget “últimos comentarios”. Saludos!

Sampedro 29/01/2010 13:50:12
4
Avatar del usuario Miroslav

Hola amigos como estan:
Tengo un problema con los widgets. Conclui el blog (http://miroslavmorant.com/prueba2) me despliega correctamente, pero al ingresar al administrador de WordPress http://miroslavmorant.com/prueba2/wp-admin, y querer editar los widgets que inserté, desaparecieron del Side Bar, porque sucedió esto? y como edito nuevamente mis widgets?. Agradeceria su respuesta. Muchas Gracias

Miroslav 04/08/2010 03:03:18
5
Avatar del usuario Sergiocius

Así de pronto se me ocurre que, al tener que activarlos, los debes de buscar entre todos los widgets y arrastrarlos al sidebar.
De todas formas a ver si a Keldrox se le ocurre algo, que sabe más de esto.

¡Saludos!

Sergiocius 04/08/2010 09:15:26
6
Avatar del usuario Miroslav

Hola Sergius:

Gracias por responder, les cuento que hallé la falla, es una falla o defecto del tema mio, que viene en la pagina del Cpanel (themes)functions.php.Hay que quitar la linea 15 : ‘id’ => ‘sidebar-$i’, y funcionó, asi que a los que les pueda ayudar esto, ahi les va. Muchas Gracias

Miroslav 04/08/2010 14:45:09
7
Avatar del usuario Sergiocius

Gracias Miroslav por hacerlo saber y enhorabuena.

Sergiocius 05/08/2010 12:08:29
8
Avatar del usuario Juanma

Hola! muy buen post pero….
¿Como puedo hacer para que los widgets pueda ponerlos mas de una vez?

He modificado mi tema para poder poner una sidebar para cada página(y tambien archivo, 404, buscador..) por ahora al no tener ningun widget, le puse que salgan los de barra lateral principal, pero si dejo la misma barra para todos no tendria logica mi trabajo.
Gracias de antemano.

Juanma
20/09/2010 20:06:55
9
Avatar del usuario Francisco

Me genera muchos caracteres de salida inválidos y al momento de tratar de modificar los valores por defencto no me aparece nada…. solo me aparece al visualizarlo las palabras “Hola, soy el panel de control.” que se han puesto al principio… alguna idea de que pasa?

Francisco
05/08/2011 23:49:20
10
Avatar del usuario Francisco

Supongo que se debe a que tiene ya su tiempo… algunas funciones seguramente han cambiado o cosas así…

Francisco
05/08/2011 23:53:58
11
Avatar del usuario Laura Hernández

Está muy bien, pero podrías actualizar el código a la nueva versión de wordpress?

saludos y gracias

Laura Hernández
25/02/2013 16:23:31

Escribir comentario en WordPress: Como crear un Widget

¡Tu opinión nos interesa!. Escribe tu opinión lo más clara posible para que todos podamos entenderla, evita el spam, comentarios ofensivos, etc. ya que serán eliminados. Tu opinión sera moderada antes de ser publicada, por lo que su aparición en la web puede tardar unos minutos. Si deseáis ponerse en contacto para sugerencias o críticas podéis hacerlo desde el formulario de contacto.

Sigue a rutarelativa en twitter
Editores de Ruta Relativa
Avatar del editor KeLDroX KeLDroX Desarrollador en entornos web y Diseñador de profesión, muy activo, que busca siempre enfrentarse a retos cada vez más dificiles. Si un día no hago algo nuevo o no he superado alguna dificultad para mi es un día vacío. Cuento con dos titulaciones: Técnico en Explotación de Sistemas Informáticos y Técnico Superior en Desarrollo de Aplicaciones Informáticas. Fundé rutarelativa porque siempre quise tener un sitio en donde compartir mis experiencias profesionales y a los problemas que me enfrento día a día en el ámbito profesional.
Avatar del editor sergiocius sergiocius Soy un desarrollador en entornos web y escritorio, entusiasta y amante de mi trabajo del que cada día espero aprender algo nuevo. Tengo una titulación de Técnico Superior en Desarrollo de Aplicaciones Informáticas y actualmente curso el primer año de Carrera Universitaria con el poco tiempo que me deja el trabajo. Fundé rutarelativa porque quiero que mi esfuerzo y tiempo invertidos en aprender y poner en práctica algo le resulte útil y fácil a otro usuario, del mismo modo que yo aprendo y ahorro tiempo con la ayuda de los demás.
Avatar del editor Victor Victor Desarrollador de aplicaciones informáticas con altos objetivos y ambiciones. Busco cada día aprender algo nuevo, ya que mi mundo se encuentra en constante actualización. Cuento con una titulación de Técnico Superior en Desarrollo de Aplicaciones Informáticas y una larga experiencia profesional.