Cuando creamos sitios de WordPress para clientes, a menudo agregamos widgets personalizados al panel. Es una forma sencilla de mostrar notas útiles, enlaces o instrucciones justo donde el usuario inicia sesión.
El panel predeterminado no siempre muestra la información que la gente realmente necesita. Por eso nos gusta personalizarlo, para que el área de administración se sienta más útil y personal.
Es posible que desees mostrar un mensaje de bienvenida, mostrar información de contacto de soporte o incluir un tutorial rápido. Cualquiera que sea la razón, es fácil de hacer una vez que sepas cómo.
En esta guía, te mostraremos cómo agregar un widget personalizado al panel de WordPress, usando código o un plugin, lo que prefieras.
Respuesta Rápida: Cómo Añadir Widgets Personalizados al Panel de WordPress
Usa la función wp_add_dashboard_widget() con WPCode (método de código) o instala el plugin gratuito Ultimate Dashboard (método sin código). Ambos te permiten añadir mensajes personalizados, enlaces o contenido directamente en el panel de administración de WordPress.
Aquí tienes un resumen rápido de los temas que cubriremos en esta guía.
- ¿Qué son los widgets del panel de administración de WordPress?
- Por qué y cómo usamos widgets personalizados en el panel de WordPress
- Cómo crear widgets personalizados para el administrador de WordPress
- Método 1: Crear widgets para el panel usando código personalizado (más personalizable)
- Método 2: Crear un widget de panel personalizado usando un plugin (más fácil)
- Preguntas Frecuentes
- Llevando tu Experiencia de Administración de WordPress al Siguiente Nivel
¿Qué son los widgets del panel de administración de WordPress?
Los widgets del panel son los pequeños cuadros que ves cuando inicias sesión en tu sitio de WordPress. Muestran información rápida, enlaces útiles y actualizaciones sobre tu sitio web.
Por defecto, WordPress te ofrece widgets como "De un vistazo", "Actividad", "Salud del sitio" y "Borrador rápido". Pero puedes agregar tus propios widgets con contenido personalizado que se ajuste a tus necesidades.
Consejo rápido: Cada usuario en tu sitio puede elegir qué widgets desea ver. Pueden mostrarlos, ocultarlos o reorganizarlos para que coincidan con su flujo de trabajo.
¿Por qué son útiles los widgets del panel?
- Muestran datos útiles en el momento en que inicias sesión.
- Puedes acceder rápidamente a herramientas o contenido sin tener que buscar en los menús.
- Los widgets personalizados te permiten personalizar el panel para tus necesidades específicas.
¿Dónde encontrarlos?
Estos widgets aparecen en la pantalla principal del panel dentro del área de administración de WordPress. Puedes moverlos arrastrando y soltando, u ocultarlos usando la pestaña Opciones de pantalla en la parte superior.
Por qué y cómo usamos widgets personalizados en el panel de WordPress
Los widgets personalizados del panel te permiten personalizar el área de administración de WordPress, lo cual es genial para mostrar a los miembros del equipo información útil o guiar a los clientes a través de su sitio.
- Personalización: Muestra estadísticas clave, mensajes de bienvenida o enlaces rápidos a herramientas importantes.
- Uso para Desarrolladores: Guía a los clientes con accesos directos a tareas comunes como actualizaciones o copias de seguridad.
Cómo los usamos en nuestros sitios:
Confiamos en un conjunto de plugins de WordPress imprescindibles, y muchos de ellos incluyen widgets de panel integrados.
Uno que usamos a menudo es el widget de Resumen de All in One SEO. Muestra las puntuaciones TruSEO de nuestro contenido y proporciona enlaces directos para mejorarlas.
También usamos el widget de MonsterInsights. Nos da una vista rápida de nuestro tráfico web y rendimiento directamente desde el panel.
También es flexible: podemos elegir qué datos mostrar según quién lo esté usando.
Dado que cada miembro del equipo tiene necesidades diferentes, pueden mostrar u ocultar widgets y reorganizar el panel como deseen. Es una pequeña función que marca una gran diferencia en la productividad.
Cómo crear widgets personalizados para el administrador de WordPress
Hay dos formas principales de crear widgets personalizados para el panel de WordPress. Aquí tienes una comparación rápida para ayudarte a decidir:
| Método 1: Código Personalizado (WPCode) | Método 2: Plugin (Ultimate Dashboard) | |
|---|---|---|
| Nivel de Habilidad | Se requieren algunos conocimientos de PHP | No se necesita codificación |
| Flexibilidad | Control total de PHP/HTML/JS | Widgets de icono, texto y HTML |
| Mejor para | Todos los usuarios | Principiantes y usuarios no técnicos |
| Costo | WPCode Lite es gratuito | Versión gratuita de Ultimate Dashboard disponible |
Puedes usar los enlaces rápidos a continuación para saltar al método que deseas usar:
Método 1: Crear widgets para el panel usando código personalizado (más personalizable)
Para este método, necesitará agregar código personalizado a su sitio de WordPress para crear un widget para el panel. Requiere una comprensión básica de la programación de WordPress. Por lo tanto, si no desea escribir código, puede pasar al siguiente método.
Mostramos este método primero porque es más flexible y deja espacio para que agregue cualquier código que desee ejecutar dentro de su widget personalizado.
Le mostraremos el código que necesita, y luego podrá personalizarlo para agregar su código usando PHP, HTML o JS.
Cuando se trata de agregar código personalizado a tu sitio de WordPress, muchos usuarios piensan en el archivo functions.php del tema. Si bien este método funciona, creemos que hay una forma mejor y más segura de manejar fragmentos de código personalizados: usando WPCode.
Editar el archivo functions.php a veces puede hacer que tu sitio se bloquee si hay un error en el código. Además, perderás tu código personalizado si cambias o actualizas el tema sin hacer una copia de seguridad de tus cambios.
WPCode, por otro lado, le permite agregar código personalizado de forma segura sin bloquear su sitio. También facilita la administración de fragmentos de código y su activación o desactivación según sea necesario.
Nota: También hay disponible una versión gratuita llamada WPCode Lite, que puedes usar para este tutorial. Sin embargo, recomendamos actualizar a un plan de pago para desbloquear más funciones.
Primero, necesitas instalar y activar el plugin WPCode. Para más detalles, consulta nuestro artículo sobre cómo instalar un plugin de WordPress.
Una vez activado, debes ir a la página Fragmentos de código » +Agregar Fragmento y seleccionar ‘Agregar tu código personalizado (Nuevo fragmento)’ para crear un nuevo fragmento.
En la siguiente pantalla, necesitas ingresar un nombre para tu código personalizado y elegir ‘Fragmento de PHP’ como el ‘Tipo de código’.
Después de eso, agrega el siguiente código en el cuadro de vista previa del código:
//hooks up your code to dashboard setup
add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');
function my_custom_dashboard_widgets() {
global $wp_meta_boxes;
// Register your custom WordPress admin dashboard widget
wp_add_dashboard_widget('custom_help_widget', 'Theme Support', 'custom_dashboard_help');
}
function custom_dashboard_help() {
// Replace this with any code you want to show in your custom admin widget
echo '<p>Welcome to Custom Blog Theme! Need help? Contact the developer <a href="mailto:yourusername@gmail.com">here</a>. For WordPress Tutorials visit: <a href="https://www.wpbeginner.com" target="_blank">WPBeginner</a></p>';
}
Así es como debería verse en tu interfaz de WPCode:
Aquí hay una pequeña explicación del código:
La función my_custom_dashboard_widgets() registra el widget personalizado usando la función wp_add_dashboard_widget(). Toma tres argumentos. El primero es el ID del widget personalizado, el segundo es el título del widget y el tercer argumento es la función de devolución de llamada.
custom_dashboard_help() es nuestra función de devolución de llamada, y dentro de ella, hemos añadido el código HTML que queremos mostrar cuando se visualiza el widget.
Hemos conectado nuestra función my_custom_dashboard_widgets al hook wp_dashboard_setup usando add_action. Este hook básicamente configura la página del panel para su visualización.
Después de agregar el código personalizado, necesitas desplazarte hacia abajo hasta la sección ‘Inserción’ y seleccionar ‘Solo administrador’ en el menú desplegable de Ubicación.
Finalmente, haz clic en el botón ‘Guardar Fragmento’ y cambia la opción de estado a ‘Activo’.
Eso es todo. Ahora puedes visitar la página del Panel para ver tu widget personalizado del panel de administración de WordPress en acción.
Método 2: Crear un widget de panel personalizado usando un plugin (más fácil)
Este método es más fácil, pero lo colocamos como el segundo método porque es un poco menos flexible que agregar código personalizado.
Para este método, usaremos el plugin Ultimate Dashboard. Es uno de los mejores plugins de panel de administración de WordPress y te ayuda a crear fácilmente widgets de administración personalizados.
Para más detalles, consulta nuestra reseña completa de Ultimate Dashboard.
Primero, necesitas instalar y activar el plugin Ultimate Dashboard. Para más detalles, consulta nuestro artículo sobre cómo instalar un plugin de WordPress.
Tras la activación, tienes que visitar la página Ultimate Dashboard » Add New. Primero, necesitas proporcionar un título para tu widget y luego seleccionar un Tipo de Widget.
Hay tres tipos de widgets que puedes crear:
- Widget de Icono – Muestra un icono grande y apunta a cualquier página de tu sitio.
- Widget de Texto – Utiliza un editor visual donde puedes agregar cualquier texto que desees con algunas opciones básicas de formato.
- Widget HTML – Agrega código HTML a tu widget personalizado.
Veamos cada uno de ellos.
1. Crear un Widget de Icono Personalizado
Selecciona 'Icon Widget' como 'Widget Type' y luego elige el icono que deseas mostrar. Por defecto, viene con un número limitado de iconos para elegir.
Abajo, puedes agregar texto en 'Tool Tip' para explicar a los usuarios qué sucede cuando hacen clic en el icono. Por ejemplo: 'Te lleva a la página de configuración de WordPress.'
Después de eso, agrega el enlace al que deseas enviar a los usuarios cuando hagan clic en el icono.
Finalmente, haz clic en 'Publish' para guardar tus cambios y visita el Dashboard para ver el widget en acción.
Así es como se vería.
2. Crear un Widget de Texto Personalizado
Si aún no estás allí, ve a la página Ultimate Dashboard » Add New. Selecciona 'Text Widget' como tu Tipo de Widget.
El plugin te mostrará un editor de texto visual (el mismo que el editor clásico antiguo) donde puedes agregar cualquier texto que desees mostrar con formato HTML básico.
Cuando hayas terminado, haz clic en 'Publish' para guardar tus cambios.
Ahora puedes visitar tu panel de administración para ver este widget de administración personalizado en acción.
3. Crea un Widget HTML Personalizado
Si aún no estás allí, necesitas ir a la página Ultimate Dashboard » Add New. Selecciona 'HTML Widget' como tu Tipo de Widget.
El plugin te mostrará un editor de HTML donde puedes agregar cualquier código HTML con CSS en línea.
Cuando hayas terminado, haz clic en 'Publish' para guardar tus cambios.
Ahora puedes visitar tu panel de administración para ver este widget de administración personalizado en acción.
Usando Ultimate Dashboard, puedes crear tantos widgets personalizados como quieras y combinar diferentes tipos de widgets para crear una experiencia de panel de administración útil.
Preguntas Frecuentes
¿Puedo mostrar un widget personalizado del panel solo a roles de usuario específicos?
Sí. Envuelve tu llamada a wp_add_dashboard_widget() en una verificación current_user_can(). Por ejemplo, usa current_user_can('manage_options') para mostrar un widget solo a los administradores. El plugin Ultimate Dashboard también tiene visibilidad basada en roles incorporada.
¿Cómo elimino un widget predeterminado del panel de WordPress?
Usa remove_meta_box() dentro del hook wp_dashboard_setup. Por ejemplo, remove_meta_box('dashboard_quick_press', 'dashboard', 'side') elimina el widget Borrador rápido. Cada widget predeterminado tiene un ID único que puedes encontrar en la documentación para desarrolladores de WordPress.
¿Puedo agregar varios widgets personalizados al panel a la vez?
Sí. Llama a wp_add_dashboard_widget() varias veces dentro de tu función wp_dashboard_setup, una por cada widget. Cada widget necesita un ID único, un título y su propia función de devolución de llamada. Los usuarios pueden entonces mostrarlos, ocultarlos o reordenarlos usando Opciones de pantalla.
¿Los widgets personalizados del panel ralentizarán mi sitio de WordPress?
No, los widgets del panel solo se cargan en la página del panel de administración y no tienen ningún impacto en la velocidad del front-end. Si un widget realiza llamadas a la base de datos o a la API, mantenlas ligeras para evitar ralentizar el área de administración para los usuarios conectados.
¿Cómo agrego una imagen o un video dentro de un widget personalizado del panel?
En tu función de devolución de llamada, usa `echo` con HTML estándar. Usa una etiqueta <img> con una URL completa para las imágenes. Para video, incrusta un <iframe> de YouTube o Vimeo. El widget renderiza cualquier HTML que generes, por lo que los elementos incrustados de medios estándar funcionan perfectamente.
Llevando tu Experiencia de Administración de WordPress al Siguiente Nivel
El área de administración de WordPress es donde la mayoría de los propietarios de sitios web pasan mucho tiempo escribiendo contenido, creando páginas, gestionando pedidos y más.
Aquí tienes algunos recursos adicionales para optimizar el panel de administración de WordPress:
- Cómo personalizar el panel de administración de WordPress
- Cómo hacer marca blanca en tu panel de administración de WordPress
- Cómo crear flujos de trabajo automatizados en WordPress
- Plugins y consejos para mejorar el área de administración de WordPress
Esperamos que este artículo te haya ayudado a agregar widgets personalizados al panel en el área de administración de WordPress. También puedes consultar nuestra guía de seguridad de WordPress o echar un vistazo a este tutorial sobre cómo ocultar elementos de menú innecesarios del área de administración.
Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Brandon
Muy útil. Gracias.
Soporte de WPBeginner
¡Me alegra que haya sido útil!
Administrador
Jef Vermeire
¿Se pueden agregar varios widgets del mismo tipo en el panel de WordPress? Por ejemplo: ¿puedo agregar el 'custom_help_widget' personalizado dos veces en mi panel?
Soporte de WPBeginner
You could if you wanted to, you would want to add an additional line of the wp_add_dashboard_widget if you wanted it twice
Administrador
Xavier Barbot
Very useful, thank you, I’ve tried all the plugins but none achieved adding a simple widget for my clients, very slick and easy to replicate by cresting a custom plugin, I give you 5 stars!
Soporte de WPBeginner
Glad our recommendation was helpful
Administrador
Syed Ali Ahmed
Gracias por compartir esto, es demasiado genial, me encanta.
Soporte de WPBeginner
Glad you found our guide helpful
Administrador
Mike
¿Es posible estilizar el widget con atributos personalizados a través de HTML o CSS?
Soporte de WPBeginner
Podrías, pero eso va un poco más allá de lo que cubrimos en nuestros artículos.
Administrador
daan van middendorp
¿Cómo puedo usar esto con un rol personalizado?
Soporte de WPBeginner
Si tu rol personalizado puede ver los widgets del panel, debería poder ver el widget personalizado.
Administrador
haqem
cómo poner este widget personalizado en el área de "Agregar nueva publicación" para escribir
Ron Sierra
Esto se preguntó una vez, pero no pude encontrar la respuesta. ¿Cómo creo múltiples widgets del panel?
Bjornen
¿Cómo agrego la función wp_mail a este widget?
Significa; ¿cómo le proporciono al cliente un formulario de contacto en ese widget?
Vishah
¿Cómo puedo agregar un botón?
Wade
Usé tu código y obtuve la pantalla blanca de la muerte. WP 4.7.2
¿Alguna idea?
Soporte de WPBeginner
Hola Wade,
Puedes eliminar el código usando FTP. También consulta nuestra guía sobre cómo solucionar la pantalla blanca de la muerte en WordPress
Administrador
gobinda das
¿puedo cambiar el encabezado del tema Flowtown por otra cosa?
Javier
Hola, estoy intentando crear widgets personalizados por usuario. Cada usuario necesita tener un widget con texto diferente.
¿Hay alguna manera de lograr esto?
David Guerreiro
¡Eso es muy fácil! Con PHP, obtén el usuario actual en la función que estás usando para mostrar el contenido del metabox y cambia el HTML dependiendo del usuario recuperado. Échale un vistazo a esto:
Lại Đình Cường
Hola Syed Balkhi, ¿cómo puedo agregar un nuevo widget de administrador con orden?
shakun
Cómo agregar múltiples widgets en el panel
Nishant
Intenté insertar un do_shortcode() con un shortcode para un formulario de contacto para dar al usuario acceso rápido para reportar cualquier error o proporcionar comentarios, pero no funciona... ¿alguna idea de cómo hacer que CF 7 funcione con esto?
Gracias
Dustin
Sería genial saber esto. Yo también estoy intentando usar un shortcode en un widget del panel.
Mike
Esto no me funciona en la versión 3.5. ¿Hay alguna actualización para que esto funcione? ¡Gracias!
smayzes
¿Es posible hacer esto usando POO?
por ejemplo:
dentro de una clase:
wp_add_dashboard_widget(‘custom_help_widget’, ‘Ayuda y Soporte’, array($this, ‘customDashboardHelp’));
function customDashboardHelp() {
echo ‘<p>¡Bienvenido a tu CMS personalizado!’;
}
Nick Powers
Sé que tu mensaje es bastante antiguo, pero en beneficio de otros que lleguen aquí y tengan la misma pregunta. Sí, funciona con POO, tal como lo has indicado.
luxsub
¿Es posible poner un widget con adsense en tu panel para un sitio multiusuario?
y3kgeek
Gran idea. ¿Qué pasa si quiero crear un widget de panel personalizado que solo las personas con un rol de usuario específico, digamos Escritor Contribuyente, puedan ver?
Personal editorial
Puedes hacer esto usando la declaración condicional if user_can o incluso roles de usuario.
Administrador
DramaKing
Sé que han pasado tres años, pero si otros llegan aquí buscando una respuesta (como yo), así es como lo hice. No sé mucho de codificación, así que probablemente no esté limpio, pero así es como logré que funcionara:
add_action(‘wp_dashboard_setup’, ‘dashboard_widget_mail’);
function dashboard_widget_mail() { $wp_meta_boxes global; }
if ( current_user_can( ‘delete_users’ ) ) {
wp_add_dashboard_widget(‘custom_mail_widget’, ‘Nombre del widget que aparecerá en el panel’, ‘custom_dashboard_mail’); } return true; }
function custom_dashboard_mail() {
echo ‘Tu texto personalizado aquí.’;
—
Puedes reemplazar ‘delete_users’ por cualquier capacidad que te guste, por supuesto.
Martin
¡Gracias por esto! Funciona muy bien.
Solo una pregunta rápida:
Si quiero agregar 2 o más widgets personalizados en functions.php, ¿tengo que cambiar el nombre de "action" y "function"?
Personal editorial
Sí, tendrías que agregar dos funciones y acciones separadas...
Administrador
ACS04
Suena bien, pero debería ser mejor crear un plugin simple para hacerlo, de esta manera, este widget será independiente de los temas... ¿No crees?
Personal editorial
Bueno, puedes hacerlo, pero en nuestro caso contiene información de soporte que queremos que nuestros clientes sepan. Esto es principalmente para diseños de temas personalizados, por lo que solo es bueno tenerlo cuando nuestro tema está activado.
Administrador
Frankie Jarrett
Thanks a lot for the easy example. I was able to get something up and running in just a few seconds
Stéphane
¡Vaya! Nunca había oído hablar de ese truco... ¡Muy bien, gracias!
Daniel
Worked like a charm. Using this as a workaround for one of my membership site that locked all dashboard menus; this will point members to the appropriate edit posts links again.
richard
al crear dos widgets, ¿cómo haces para que estén uno al lado del otro en lugar de uno encima del otro?
Personal editorial
Hola Richard, puedes hacer que tu widget se muestre en la parte superior usando el código en WordPress Codex Dashboard API. No sabemos cómo colocarlos uno al lado del otro sin entrar manualmente y guardarlo para el cliente. Quizás enviar un correo electrónico a Jake y preguntarle sería una buena idea.
Aunque recuerda, la configuración que estableces en functions.php no anula la configuración normal si el usuario ha cambiado la configuración previamente. Esto solo funciona si el usuario nunca organizó su panel antes.
Administrador
Ash Blue
Usa display block en el elemento más externo y float left, asegúrate de establecer un ancho, pero eso podría romperlo. Esto es muy similar a un diseño de galería. No se recomienda y no es necesariamente cómo WordPress diseñó los widgets para ser utilizados (úsalos bajo tu propio riesgo).
david
wpmu. He encontrado /wp-includes/functions.php pero ¿dónde debo insertar el código? Gracias por tu ayuda
Personal editorial
En realidad, incluyes esto en el archivo functions.php de tu tema, no en el archivo principal.
Administrador
cho
¿a qué te refieres con temas function.php?
no encuentro tal archivo
Personal editorial
Hay un archivo functions.php ubicado en la carpeta de tu tema.
Ash Blue
Interesante, hice todo eso con la línea de abajo. ¿Es una mejor que la otra, o ambas son igual de buenas?
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name'=>'Contacto',
));
}
Personal editorial
Tu código es para registrar Widgets de Barra Lateral. El código que estamos compartiendo en este artículo es para agregar un widget personalizado al panel de control. Cuando uno inicia sesión en su wp-admin, ve estadísticas de publicaciones y otra información. Este cuadro se agregará allí.
Dos temas completamente diferentes.
Administrador
Vivek @ InfoEduTech
Gracias por el tutorial.
Por favor, no te lo tomes a mal, cuando vayas a publicar algún artículo, publícalo con la captura de pantalla apropiada para que sea fácil para los novatos.
Jim
Esto es genial, gracias por compartir.