Crear un Widget para WordPress

WordPress   |   24 Comentarios

Crear un Widget para WordPress

Muchas veces nos gustaría mostrar cierta información en nuestra barra lateral (o Sidebar) de WordPress, y recurrimos a añadir un Widget de texto plano con HTML. Esto está bien, es simple y cómodo, pero sólo para texto estático. En el momento en que queremos algo más dinámico, no podemos (pues no podemos insertar código PHP). Es por ello que lo ideal es crear un Widget para WordPress con el contenido que queramos.

Vamos a empezar con un ejemplo simple, y lo iremos complicando poco a poco.

Creando el Widget

Un Widget se compone de dos partes:

• Una función que instancia al Widget.
• Una clase para nuestro Widget, que extiende al objeto WP_Widget.

Ya hemos explicado en más de una ocasión que lo ideal es crear un plugin para nuestro Widget, pero debo decir que sí, que también podéis añadir la función que instancia el Widget en el archivo functions.php. Nosotros crearemos un nuevo plugin, cuyo código es simplemente este:

<?php

/*
Plugin Name: Mi primer Widget
Plugin URI: https://www.codigonexo.com/
Description: Crea un Widget para añadir a cualquier Sidebar.
Version: 1.0
Author: Codigonexo
Author URI: https://www.codigonexo.com/
*/

/**
 * Función que instancia el Widget
 */
function mpw_create_widget(){
    include_once(plugin_dir_path( __FILE__ ).'/includes/widget.php');
    register_widget('mpw_widget');
}
add_action('widgets_init','mpw_create_widget');

?>

Vale, ¿Esto qué hace?

Tras declarar la información del plugin, tenemos la función mpw_create_widget (mpw viene de «Mi Primer Widget», el nombre de la función podéis cambiarlo como queráis, claro). Esta función hace dos cosas:

1. Incluir el archivo widget.php, que crearemos en la carpeta wp-content/<nombre_de_tu_plugin>/includes/widget.php. Esta es mi forma de tener los archivos organizados, quizá vosotros prefiráis no usar la carpeta includes, o usar /includes/widget/widget.php. En nuestro caso, lo haremos así.
2. Registrar el widget en el sistema con la función «register_widget». Como parámetro, recibe el nombre que le daremos a la clase del Widget que vamos a crear, en este caso, mpw_widget.

La clase de nuestro Widget

Si no hemos creado el archivo widget.php, es el momento de hacerlo. Nuestra clase debe extender a la clase WP_Widget, y debe tener cuatro funciones básicas:

<?php

class mpw_widget extends WP_Widget {

    function mpw_widget(){
        // Constructor del Widget.
    }

    function widget($args,$instance){
        // Contenido del Widget que se mostrará en la Sidebar
    }

    function update($new_instance, $old_instance){
        // Función de guardado de opciones
    }

    function form($instance){
        // Formulario de opciones del Widget, que aparece cuando añadimos el Widget a una Sidebar
    }
}

?>

Esta es una plantilla válida para cualquier Widget que os planteéis crear. Ahora, detengámonos a explicarlas una a una.

La primera función debe llamarse igual que la clase. Es la función constructora, la que se instancia una vez que el Widget es llamado. En esta función, lo básico que debemos hacer es llamar al constructor de WP_Widget con las opciones del Widget:

    function mpw_widget(){
        $widget_ops = array('classname' => 'mpw_widget', 'description' => "Descripción de Mi primer Widget" );
        $this->WP_Widget('mpw_widget', "Mi primer Widget", $widget_ops);
    }

Esto hará que nuestro Widget sea visible en la zona de Widgets de WordPress.

La siguiente función es «widget». Esta función es la que genera el contenido que se muestra en la zona del Widget, lo que verán tus usuarios en el Front End. Luego lo complicaremos, pero de momento, veamos un ejemplo simple:

    function widget($args,$instance){
        echo $before_widget;
        ?>
        <aside id='mpw_widget' class='widget mpw_widget'>
            <h3 class='widget-title'>Mi Primer Widget</h3>
            <p>¡Este es mi primer Widget!</p>
        </aside>
        <?php
        echo $after_widget;
    }

Activando el Widget

Llegados a este punto, supongo que habéis activado el plugin desde el gestor de plugins de WordPress. Hecho esto, vamos a Apariencia > Widgets, y encontraremos nuestro Widget en la lista de Widgets disponibles. Tan solo tenemos que arrastrarlo a la Sidebar que mejor nos convenga.

Si no ves tu Widget en la lista, algo has pasado por alto. Revisa las instrucciones hasta aquí.

Finalmente, vamos al Front End y vemos el resultado.

Complicando el Widget con configuración interna

Si nuestro Widget está hecho sólo para mostrar información concreta, y no requiere de configuración interna, habríamos acabado aquí, no serían necesarias más funciones. En el caso de que requiera configuración, entonces debemos crear las funciones update y form.

    function update($new_instance, $old_instance){
        $instance = $old_instance;
        $instance["mpw_texto"] = strip_tags($new_instance["mpw_texto"]);
        // Repetimos esto para tantos campos como tengamos en el formulario.
        return $instance;
    }

La función update se encarga de guardar en la base de datos la configuración establecida para el Widget. Suele seguir una estructura similar a la que vemos siempre, cambiando los parámetros de los campos.

La función form es la que muestra el formulario de configuración del Widget en el Back End de WordPress. Por ejemplo, vamos a mostrar un texto:

    function form($instance){
        ?>
         <p>
            <label for="<?php echo $this->get_field_id('mpw_texto'); ?>">Texto del Widget</label>
            <input class="widefat" id="<?php echo $this->get_field_id('mpw_texto'); ?>" name="<?php echo $this->get_field_name('mpw_texto'); ?>" type="text" value="<?php echo esc_attr($instance["mpw_texto"]); ?>" />
         </p>
         <?php
    }

Las funciones get_field_id y get_field_name las usamos para que el guardado del Widget sea correcto y coherente en cuanto a parámetros.

Ahora debemos adaptar nuestra función widget para que acepte y muestre este texto:

    function widget($args,$instance){
        echo $before_widget;
        ?>
        <aside id='mpw_widget' class='widget myp_widget'>
            <h3 class='widget-title'>Mi Primer Widget</h3>
            <p><?=$instance["mpw_texto"]?></p>
        </aside>
        <?php
        echo $after_widget;
    }

Y podemos comprobar que, efectivamente, aparece el texto que hemos colocado:

Y hasta aquí nuestra clase básica sobre cómo crear un Widget para WordPress. Evidentemente, podemos complicar mucho más el Widget, introducir más opciones y campos, pero como suelo decir, eso ya es parte de nuestra imaginación y nuestras necesidades.

Si necesitáis más información, no dudéis en recurrir al Codex de WordPress, o publicad un comentario y os responderemos lo antes posible.

“Hacer lo simple complicado es bastante corriente;
hacer lo complicado simple, sorprendentemente simple, eso es la creatividad”
    — Charles Mingus

Si necesitas una página web en wordpress, no dudéiss en contactar con nosotros. Descubre más,somos expertos en wordpress.

Si necesitas una página web en wordpress, no dudes en contactar con nosotros. Descubre más,somos expertos en wordpress

¿Te ha gustado el artículo?

(8 votos, promedio: 4,88 sobre 5)

Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes