Cómo crear un widget de escritorio personalizado en WordPress

En esta publicación, te mostraremos un ejemplo real de cómo añadir un widget de escritorio personalizado a tu sitio en WordPress.

Integraremos este proceso en el plugin que desarrollamos para localizar fácilmente imágenes grandes en WordPress, permitiéndote profundizar en las imágenes para SEO. Prepárate para aprender, paso a paso, cómo enriquecer tu experiencia en WordPress con widgets de escritorio útiles y personalizados.

Analizando las necesidades del widget de escritorio

Crear un widget de escritorio para WordPress comienza con una planificación cuidadosa. Deberemos de enfocarnos en datos críticos y beneficiosos para el usuario.

En nuestro widget, diseñado con Figma, mostramos una distribución de imágenes que refleja las optimizadas (tamaño óptimo), las que están bien (tamaño aceptable), y las que necesitan atención (tamaño a revisar). Además, es importante señalar las imágenes que carecen de texto alternativo (ALT), un factor clave para la accesibilidad y el SEO.

Nuestro objetivo es proporcionar una herramienta que permita a los administradores de WordPress supervisar y mejorar rápidamente estos aspectos.

Creando estructura del widget para tu plugin de WordPress

Para desarrollar nuestro panel en el dashboard de WordPress, emplearemos la API Dashboard Widgets. Haciendo uso del gancho (hook) «wp_dashboard_setup», una herramienta clave en este proceso.

Nuestro objetivo es presentar datos esenciales, como el número de imágenes categorizadas según su tamaño y la presencia de texto alternativo ALT, directamente en el panel de administración de WordPress.

A continuación, veremos cómo implementar este hook mediante un ejemplo de código práctico y sencillo. Este paso es fundamental para entender cómo tu widget interactuará con el escritorio de WordPress y cómo puedes personalizarlo para satisfacer necesidades específicas.

if ( ! defined( 'ABSPATH' ) ) exit;
class Custom_widget_dashboard {
    public function __construct() {
        add_action('wp_dashboard_setup', array($this, 'add_dashboard_widget'));
    }
    public function add_dashboard_widget() {
        wp_add_dashboard_widget(
            'url_widget_escritorio', // Widget slug
            'Título Widget de escritorio',
            array($this, 'render_dashboard_widget') // función al aque llamaremos para renderizar el widget
        );
    }
    public function render_dashboard_widget() {
        echo "Texto que muestra el widget";
    }
}

Vamos a ver paso a paso el detalle del código.

1. Verificar el entorno de WordPress: Comenzamos con if ( ! defined( 'ABSPATH' ) ) exit; para asegurarnos de que el archivo solo se ejecute dentro de WordPress.
2. Definir la clase del widget: Creamos la clase Custom_widget_dashboard que contendrá toda la lógica del widget.
3. Constructor de la clase: Dentro del constructor, usamos add_action para vincular nuestra función add_dashboard_widget al hook wp_dashboard_setup.
4. Registrar el widget: En add_dashboard_widget, llamamos a wp_add_dashboard_widget, definimos un identificador único para el widget con el slug (url_widget_escritorio), el título del widget, y la función que renderizará el contenido (render_dashboard_widget).
5. Renderizar el widget: La función render_dashboard_widget se encarga de generar el contenido que se mostrará en el widget, en este caso, simplemente un texto.

Integrando datos con una UX mejorada en el widget de escritorio de WordPress

Ahora vamos a ver cómo integrar los datos y cómo mejorar su presentación, pensando siempre en la experiencia de usuario.

Tomaremos los estilos que ya funcionan en otros elementos del plugin, como el reporte, y así mantendremos la misma línea de estilo. En lugar de cargar un CSS externo, incorporaremos los estilos directamente en las etiquetas HTML, simplificando el proceso sin sacrificar la calidad de la experiencia del usuario.

Esta técnica no solo es más sencilla, sino que también ayuda a que tu widget funcione más rápido y sin problemas. Vamos a ver de una forma práctica cómo mejorar tanto la apariencia como el funcionamiento del widget con el siguiente código.

<?php
public function render_dashboard_widget() {
        // Datos de prueba.
        $img_sizes = array(
            'good' => 344,
            'medium' => 60,
            'bad' => 11
        );
        $alt_images = 406;
        ob_start();
		?>
        
            <div class="bml-dashboard-widget">
                <h3><?php esc_html_e('Number of images according to their optimal size', 'Text Domain'); ?></h3>
                <div style="display:grid;gap: 14px;grid-template-columns: 1fr 1fr 1fr;align-items: center;">
                    <p style="border-radius:4px;padding:20px;text-align:center;background:#76C3C5;margin-top:0;">
                        <strong style="display:block;font-size:32px;"><?php echo $img_sizes['good'];?></strong>
                        <small><?php esc_html_e( 'Good size', 'Text Domain'); ?></small>
                    </p>
                    <p style="border-radius:4px;padding:20px;text-align:center;background:#EDCC88;margin-top:0;">
                        <strong style="display:block;font-size:32px;"><?php echo $img_sizes['medium'];?></strong>
                        <small><?php esc_html_e( 'Medium size', 'Text Domain'); ?></small>
                    </p>
                    <p style="border-radius:4px;padding:20px;text-align:center;background:#F09878;margin-top:0;">
                        <strong style="display:block;font-size:32px;"><?php echo $img_sizes['bad'];?></strong>
                        <small><?php esc_html_e( 'Bad size', 'Text Domain'); ?></small>
                    </p>
                </div>
                
                <h3 style="margin-top:10px;"><?php esc_html_e('Number of images without alternative text (ALT)', 'Text Domain'); ?></h3>
                <div style="display:grid;gap:14px;grid-template-columns: 1fr 2fr;align-items: center;">
                    <p style="border-radius:4px;padding:20px;background:#ededed;margin-top:0;">
                        <?php esc_html_e( 'Images without ALT attribute and not accessible', 'Text Domain'); ?>
                    </p>
                    <p style="border-radius:4px;padding:20px;background:#ededed;margin-top:0;">
                        <strong style="font-size:32px;"><?php echo $alt_images;?></strong>
                    </p>
                </div>
            </div>
        
        <?php
        echo ob_get_clean();
    }
?>

Ahora veremos cómo implementar un código PHP para mostrar datos en nuestro widget de escritorio de WordPress. Este código te permitirá presentar la información de una manera visualmente atractiva, funcional y segura.

1. Función render_dashboard_widget: Aquí es donde definimos lo que se mostrará en el widget.
2. Establecimiento de datos de imágenes: Definimos un array $img_sizes con datos de prueba que representan el número de imágenes según su tamaño. También establecemos $alt_images para el conteo de imágenes sin texto alternativo ALT. Estos datos podrían provenir de otras funciones del plugin o de una base de datos.
3. Inicio del buffer de salida: Utilizamos ob_start() para empezar a capturar la salida del HTML que se generará a continuación.
4. Estructura HTML del widget: Construimos la estructura HTML del widget, utilizando estilos CSS directamente en las etiquetas para simplificar.
5. Presentando los datos de imágenes: Con echo, mostramos los valores de $img_sizes y $alt_images. Usamos la función esc_html_e para la traducción y escapado seguro de texto, especificando «Text Domain» para el dominio de texto de traducción.
6. Obteniendo y mostrando el resultado: Al final, con echo ob_get_clean();, liberamos el contenido capturado y lo enviamos al navegador.

Incorporando scripts de JavaScript y hojas de estilo CSS al dashboard de WordPress

Anteriormente, integramos estilos directamente en el HTML para simplificar. Sin embargo, la mejor práctica es crear un archivo CSS para los estilos y agregarlo a los archivos de la administración de WordPress. Utilizaremos el hook «admin_enqueue_scripts» y lo aplicaremos específicamente en «index.php», el corazón del escritorio de WordPress. Esto nos asegura que nuestros cambios no impacten otras áreas de la administración. A continuación, exploraremos cómo añadir correctamente ficheros CSS y JavaScript.

add_action( 'admin_enqueue_scripts', 'custom_scripts' );
function custom_scripts( $hook ) {
	if ( 'index.php' === $hook ) {
		wp_enqueue_script( 'custom_script', plugin_dir_url( __FILE__ ) . 'path/to/script.js', array( 'jquery' ), '1.0', true );
		wp_enqueue_style( 'custom_style', plugin_dir_url( __FILE__ ) . 'path/to/style.css', array(), '1.0' );
	}
}

Otra forma efectiva de asegurarnos de que los archivos se encolen solo en la pantalla de escritorio es utilizar la función «get_current_screen». Este método nos permite verificar la identificación actual de la pantalla y así restringir la carga de scripts y estilos solo al escritorio de WordPress. Con el código que mostraremos a continuación, podrás ver cómo implementar esta técnica para un mayor control y eficiencia.

add_action( 'admin_enqueue_scripts', 'custom_scripts' );
function custom_scripts( $hook ) {
	$screen = get_current_screen();
	if ( 'dashboard' === $screen->id ) {
		wp_enqueue_script( 'custom_script', plugin_dir_url( __FILE__ ) . 'path/to/script.js', array( 'jquery' ), '1.0', true );
		wp_enqueue_style( 'custom_style', plugin_dir_url( __FILE__ ) . 'path/to/style.css', array(), '1.0' );
	}
}

Si te ha resultado interesante esta sección sobre encolar scripts y estilos en WordPress, te recomendamos nuestro artículo «Cómo añadir JavaScript a un plugin de WordPress: Estrategia sin dependencias de Archivos». En él, veras técnicas avanzadas y estrategias para incorporar JavaScript en tus plugins, optimizando el rendimiento sin depender de archivos externos. Es una lectura interesante para aquellos que deseen ampliar sus habilidades en el desarrollo de plugins de WordPress.

Personalizando la posición de tu widget en el dashboard de WordPress

Modificar la ubicación de tu widget en el escritorio de WordPress puede ser importante para mejorar la visibilidad de los datos si son importantes para el usuario. Con el uso del hook «wp_dashboard_setup», puedes definir fácilmente la posición de tu panel.

Para aquellos que prefieran no usar la clase de PHP que hablamos antes, mostraremos cómo realizar esto mediante una función separada.

El código a continuación te enseña el proceso.

function custom_dashboard_widget() {
    global $wp_meta_boxes;
    // Nos traémos los widget del panel 
    $dashboard_array = $wp_meta_boxes['dashboard']['normal']['core'];
    // copíamos nuestro widget y lo eliminamos.
    $widget_backup =  array( 'url_widget_escritorio' => $dashboard_array['url_widget_escritorio'] );
    unset($dashboard_array['url_widget_escritorio']);
    // Unomos los dos array para que el nuestro widget vaya al principio
    $dashboard_sorted = array_merge($widget_backup, $dashboard_array);
    // Guardamos el array ordenada en los meta_boxes originales 
    $wp_meta_boxes['dashboard']['normal']['core'] = $dashboard_sorted;
} 
add_action('wp_dashboard_setup', 'custom_dashboard_widget');

Este código nos muestra en el proceso de mover la posición de nuestro widget, vamos a ver que hace.

1. Iniciar la función: Con function custom_dashboard_widget(), definimos la función que manipulará la posición del widget.
2. Acceder a los widgets del dashboard: Utilizando global $wp_meta_boxes, obtenemos acceso a los widgets del dashboard.
3. Obtener los widgets actuales: $dashboard_array almacena los widgets existentes en la sección ‘normal’ del dashboard.
4. Respaldar y eliminar nuestro widget: Hacemos una copia de nuestro widget específico ('url_widget_escritorio') en $widget_backup y luego lo eliminamos del array original.
5. Reordenar los widgets: Usamos array_merge para combinar $widget_backup con $dashboard_array, colocando nuestro widget al principio.
6. Actualizar el dashboard con el nuevo orden: Asignamos nuestro array reordenado a $wp_meta_boxes['dashboard']['normal']['core'].
7. Agregar la función al hook: Con add_action('wp_dashboard_setup', 'custom_dashboard_widget'), aseguramos que nuestra función se ejecute en el momento adecuado.

Nota Importante: Mientras que este código permite posicionar tu widget al principio en el dashboard de WordPress, es fundamental reflexionar sobre cómo esto afecta la experiencia del usuario. Colocar un widget en esta posición puede ser visto como invasivo y poco ético si no se maneja adecuadamente. Recomendamos esta práctica únicamente si crees que tu widget ofrece un valor significativo o información esencial para el usuario. La utilidad y la ética deben ser siempre la prioridad en el diseño de tu widget.

Personaliza escritorio de WordPress con plugins útiles

El escritorio de WordPress, aunque esencial, a menudo no se le saca todo el partido que se le debería. Normalmente, se encuentran widgets estándar como las últimas noticias de WordPress, Bienvenido, Actividad o De un vistazo. Por ejemplo WooComerce hace un buen uso de los Widget añadiendo resúmenes de ventas y valoraciones de la tienda online dando una utilidad significativa al escritorio.

Os muestro algunos plugin para enriquecer el escritorio:

• WPVulnerability: plugin esencial para administradores web, desarrolladores y cualquier persona interesada en mantener un entorno WordPress seguro. En su widget muestra vulnerabilidades del core, plugins y themes de tu WordPress.
• Google Analytics Dashboard for WP: Este plugin agrega un widget con estadísticas detalladas de Google Analytics, convirtiendo tu escritorio en una herramienta de análisis poderosa.
• WP Dashboard Notes: nos permite añadir notas estilo Post-It con los mensajes que queramos. 
• Dashboard Widget Suite: un plugin que nos provee de nada menos que nueve widgets de escritorio superútiles. Control Panel, User Notes, Feed Box, Social Box, List Box, Widget Box, System Info, Debug Log, Error Log y Control Panel.

Estos ejemplos demuestran cómo plugins específicos pueden enriquecer y personalizar tu escritorio de WordPress, mejorando la gestión y la eficiencia de tu sitio web.

Consideraciones clave al crear un panel personalizado en el escritorio de WordPress

Al aventurarte en la creación de un panel personalizado para el escritorio de WordPress, es esencial recordar que el código proporcionado aquí es una base simplificada, diseñada para facilitar el aprendizaje.

No es exactamente el mismo que usamos en nuestro plugin, pero te ofrece las herramientas fundamentales para comenzar.

Siguiendo nuestras pautas, podrás crear un panel útil que incorpore tanto contenido estático como dinámico, como datos de APIs externas, enriqueciendo así la funcionalidad y la eficiencia de tu sitio en WordPress.

Si la idea de crear un panel personalizado en el escritorio de WordPress ha capturado tu interés y buscas soluciones específicas, estamos aquí para ayudarte. Contacta con nosotros si necesitas de un desarrollo de plugin más específico o avanzado para WordPress o WooCommerce. Confía en nuestra experiencia para convertir tus ideas en soluciones efectivas y personalizadas.