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.

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.

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.

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

Share