• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Crear un Widget para el dashboard de WordPress

Crear un Widget para el dashboard de WordPress

Widget para el dashboard de WordPress

[ 24 agosto 2016 ] [ Actualizado: 3 mayo 2017 ]
[ Autor: Jhon Marreros Guzmán ][ Plugins - Avanzado] [ ]

dashboard

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿Te has preguntado cómo hacer para mostrar información en el tablero de inicio o dashboard de WordPress?, en este artículo te explico cómo realizarlo de manera sencilla, creando un Widget para el dashboard de WordPress.

 

1- Creamos el Plugin

De antemano debemos tener un plugin creado, este plugin tendrá la funcionalidad de Widget para el Dashboard. En el siguiente código se muestra un ejemplo de metadata para nuestro plugin:


/*
Plugin Name: Mi Dashboard Widget
Plugin URI: https://decodecms.com
Description: Ejemplo para mostrar un dashboard Widget
Version: 1.0
Author: Jhon Marreros Guzmán
Author https://decodecms.com
License: GPLv2 or later
*/

Este código lo colocaremos en un archivo dentro de la carpeta plugins de nuestro WordPress, no olvidar activar el plugin.

 

2- Mostar contenido en el Widget

Luego de tener un plugin activo, entonces empezaremos a codificar, para esto usaremos el siguiente código:


//Accion Hook
add_action('wp_dashboard_setup','dcms_agregar_widget');

//Agregar Widget
function dcms_agregar_widget(){
	wp_add_dashboard_widget('id_mi_widget','Mi Widget de Ejemplo','dcms_mostrar_widget');
}

//Mostrar Widget
function dcms_mostrar_widget(){
	echo "Hola desde mi nuevo Widget";
}

En el código anterior:

  • Definimos el Action Hook, en este caso será wp_dashboard_setup y la función de entrada.
  • La función de entrada dcms_agregar_widget usa la función de WordPress wp_add_dashboard_widget
  • En la función wp_add_dashboard_widget estamos usando los primeros tres parámetros, el ID, el título y el nombre de la función usada para mostrar contenido.
  • La función para mostrar contenido es dcms_mostrar_widget y en esta función se mostrará el contenido del Widget.

 
Con el código anterior aplicado, si nos dirigimos a la pantalla de inicio del dashboard de WordPress veremos algo similar a la siguiente imagen:

Widget Dashboard contenido

 

3- Opción de Configuración en el Widget

Para usar la opción de configuración para el Widget del dashboard de WordPress, necesitamos definir un parámetro adicional a la función wp_add_dashboard_widget, en el siguiente código se muestra la modificación a la función y la función agregada



//Agregar Widget Modificado
function dcms_agregar_widget(){
	wp_add_dashboard_widget('id_mi_widget','Mi Widget de Ejemplo','dcms_mostrar_widget','dcms_configurar_widget');
}


//Configurar Widget
function dcms_configurar_widget()
{

	if ( isset($_POST['dcms_texto']) )
	{
		$dcms_texto = $_POST['dcms_texto'];
		update_option('dcms_text_bd', $dcms_texto); 
	}

	$dcms_texto = get_option('dcms_text_bd');

?> 
<label> Ingrese texto : 
<input type="text" name="dcms_texto" id="dcms_texto" value="<? echo $dcms_texto; ?>" /> 
</label> <?php
}

En el código anterior:

  • Se agregó el parámetro adicional, la función dcms_configurar_widget.
  • La función dcms_configurar_widget permite almacenar un valor dentro de un campo de texto.
  • Para almacenar y recuperar el valor en la base de datos se usan las funciones de WordPress update_option y get_option, respectivamente.

 
Aplicando el código anterior veremos el siguiente Widget con su pantalla de configuración:

Widget Dashboard configuración

 

4- Conclusión

Siguiendo las pautas indicadas anteriormente hemos visto cómo realizar un Widget para el Dashboard de WordPress que puede servir de base para utilizar nuestro propio contenido, ya sea contenido estático o contenido externo proporcionado por alguna API.
El código completo del plugin se puede descargar desde: Widget base dashboard WordPress

 

¿Aún con dudas?, en el siguiente vídeo se detalla cada uno de los puntos anteriores.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Yordan Soares

    27 noviembre, 2017

    Hola Jhon, he seguido tu artículo, sin embargo me pregunto, cómo hago para mostrar luego los datos almacene en la base de datos en otra área del sitio Web, ¿tendrás una entrada donde lo expliques? Gracias.

    • Jhon Marreros Guzmán

      27 noviembre, 2017

      Hola, supongo que te refieres al dashboard y no al front-end, tendrías que detallar en qué área quieres mostrar datos adicionales,

  2. Carlos Cruz

    1 diciembre, 2017

    Creo que lo que se refiere es que por ejemplo quieres mostrar los hits en paginas o presentar analyticos …

  3. Juan Lopez

    20 noviembre, 2021

    ¿Saludos,
    Como puedo poner que este widget sea el primero de la lista?

    Gracias

    • Jhon Marreros Guzmán

      20 noviembre, 2021

      Hola, revisa la sintaxis de la función para agregar un Widget, hay un parámetro de prioridad que puedes probar: https://developer.wordpress.org/reference/functions/wp_add_dashboard_widget/ . Saludos.

  4. Jean Barreau

    30 marzo, 2022

    Hola Jhon, lo primero enhorabuena por tú gran trabajo y aportación de conocimientos, me gustaría poder incluir los widgets personalizados para cada cliente o usuario, pero me pierdo bastante, podrías orientarme o si hay algún tutorial?. Gracias por adelantado.

    • Jhon Marreros Guzmán

      1 abril, 2022

      Hola, quieres widgets diferentes por cada usuario?, o quieres un widget pero que muestre diferente información por usuario?

      • Jean Barreau

        4 abril, 2022

        Hola Jhon, aclarar que me refiero al, 3- Opción de Configuración en el Widget, para cada cliente / usuario y así facilitar distinta información. Muchas Gracias por adelantado.

        • Jhon Marreros Guzmán

          8 abril, 2022

          Hola, entiendo, en este caso tendríamos que guardar un mensaje por usuario en la BD de esta forma mostrar el mensaje correcto cuando el usuario esta conectado. También podríamos obtener el mensaje por usuario desde una API externa. Evaluaré hacer un artículo sobre esto.

  5. Jean Barreau

    8 abril, 2022

    Hola Jhon, guardar un mensaje por usuario en la BD y mostrar el mensaje correcto cuando el usuario está conectado, es lo que estaba buscando, Muchas Gracias una vez más.

  6. Jean Barreau

    25 noviembre, 2022

    Hola Jhon, espero y deseo estés bien, me gustaría saber como llevas este asunto sobre definir los mensajes “para cada usuario en la BD de esta forma mostrar el mensaje correcto cuando el usuario está conectado”, propuesto hace algún tiempo? Muchas Gracias y cuidese mucho.

    • Jhon Marreros Guzmán

      26 noviembre, 2022

      Hola Jean, si lo estuve evaluando, para agregar el mensaje por usuario sería en su perfil, tal como se comenta en: https://decodecms.com/agregar-campos-adicionales-al-perfil-de-usuario/ , luego ya sólo sería mostrar el mensaje en el widget o si se quiere que este visible todo el tiempo, sería con: https://decodecms.com/mostrar-mensajes-en-la-administracion-de-wordpress-y-en-gutenberg/ . Voy a ver si hago un artículo para mostrar un mensaje personalizado al usuario, pero aún no defino como mostrarlo.

    • Jhon Marreros Guzmán

      28 noviembre, 2022

      Hola Jean.
      He creado un artículo relacionado con la idea que me diste: https://decodecms.com/mostrar-notificaciones-por-usuario-en-la-administracion-de-wordpress/ , espero te pueda servir. Saludos.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Cambiar el prefijo de las tablas de WordPress

Modo oscuro (Dark mode) en WordPress

Ajax en WordPress de manera correcta

Heartbeat API de WordPress, aprende a configurarla

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados