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 las personas realmente necesitan. 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.
¿Qué son los widgets del panel de administración de WordPress?
Los widgets del panel son las pequeñas cajas 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, o 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 son una excelente manera de personalizar la experiencia de administración de WordPress. Los hemos utilizado en muchos sitios de clientes para mostrar información útil, enlazar a herramientas importantes o simplificar el proceso de incorporación.
Ya sea que administres tu propio sitio o varios para clientes, los widgets personalizados pueden ahorrar tiempo y hacer que el área de administración sea más útil.
Casos de uso en la vida real:
- Personalización: Agrega un mensaje de bienvenida, muestra estadísticas clave o enlaza a páginas que tu equipo usa con frecuencia.
- Uso para desarrolladores: Los desarrolladores a menudo crean widgets que guían 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 de 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. Puede usar los enlaces rápidos a continuación para ir al método que desea usar:
- Método 1: Crear widgets para el panel usando código personalizado (más personalizable)
- Method 2: Create Custom Dashboard Widget Using Plugin (Easier)
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 su 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: usar WPCode.
Editar el archivo functions.php a veces puede hacer que su sitio se bloquee si hay un error en el código. Además, perderá su código personalizado si cambia o actualiza el tema sin hacer una copia de seguridad de sus 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 está 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 wpb_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 agregado el código HTML que queremos mostrar cuando se muestre 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 para el panel de administración de WordPress y te ayuda a crear fácilmente widgets personalizados para el panel.
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, debes visitar la página Ultimate Dash…» 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 Dash…» Add New. Selecciona 'Text Widget' como tu Widget Type.
El plugin te mostrará un editor de texto visual (el mismo que el antiguo editor clásico) 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 ahí, necesitas ir a la página Ultimate Dash…» Agregar Nuevo. Selecciona 'Widget HTML' 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.
Llevando tu panel 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 de administración de WordPress. También te puede interesar nuestra guía de seguridad de WordPress o echar un vistazo a este tutorial sobre cómo ocultar elementos innecesarios del área de administración.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener 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, por favor, 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.