{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

Assets y UX en admin: carga selectiva y panel de ajustes más usable

Aprendes a encolar CSS/JS solo donde toca, mejorar rendimiento en WP-Admin y diseñar una experiencia de configuración más clara para equipos editoriales.

Muchos plugins cargan CSS y JS en todo el admin, aunque solo tengan una pantalla de ajustes. Eso degrada rendimiento y genera conflictos innecesarios.

En esta lección optimizarás la carga de assets para que WP Avisos Contextuales solo inyecte recursos en sus pantallas.

Además trabajarás la UX del panel: agrupación de campos, estados de guardado y feedback visual útil para reducir errores.

El resultado es un plugin más rápido, más limpio y más fácil de usar por perfiles no técnicos.

  • No encoles assets globalmente si solo se usan en una pantalla.
  • Usa `admin_enqueue_scripts` y comprueba el hook de la página actual (`$hook_suffix`) antes de cargar scripts o estilos.
  • Esto evita que tu plugin afecte otras secciones de WP-Admin y reduce tiempo de carga en paneles ajenos.
  • Caso real: un script global de plugin rompía editor de otro módulo por colisión de nombres; limitar carga al hook correcto eliminó el incidente.
  • Detecta pantalla objetivo.

Carga condicional en admin: menos peso, menos conflictos

No encoles assets globalmente si solo se usan en una pantalla.

Usa `admin_enqueue_scripts` y comprueba el hook de la página actual (`$hook_suffix`) antes de cargar scripts o estilos.

Esto evita que tu plugin afecte otras secciones de WP-Admin y reduce tiempo de carga en paneles ajenos.

Caso real: un script global de plugin rompía editor de otro módulo por colisión de nombres; limitar carga al hook correcto eliminó el incidente.

  • Detecta pantalla objetivo.
  • Encola solo ahí.
  • Versiona assets con constante del plugin.

Pasar datos a JS de forma segura

Evita hardcodear URLs y nonces en scripts.

Para acciones AJAX/admin, pasa datos con `wp_localize_script` o `wp_add_inline_script` controlado.

Incluye nonce, URL de endpoint y textos traducibles para mantener seguridad e internacionalización.

No expongas más datos de los necesarios en el objeto global.

UX del panel: claridad operativa

Un panel claro reduce soporte y acelera decisiones del equipo.

Agrupa ajustes por bloques lógicos: contenido del aviso, comportamiento, visibilidad y mantenimiento.

Usa etiquetas descriptivas, ayudas breves y estados de error/éxito visibles tras guardar.

Añade acciones de mantenimiento (por ejemplo, limpiar caché) con feedback inmediato para evitar dudas de operación.

Caso real: admin lento por assets globales

Rendimiento de backoffice también importa.

En una web con varios plugins, cada módulo cargaba scripts en todo WP-Admin y el tiempo de interacción se volvió incómodo para el equipo de contenidos.

La solución fue auditar hooks de encolado y limitar cada asset a su pantalla. El panel recuperó fluidez y desaparecieron conflictos de JavaScript.

Tu plugin debe comportarse como buen ciudadano del ecosistema WordPress.

WordPress Plugin
11

Assets y UX en admin: carga selectiva y panel de ajustes más usable

Aprendes a encolar CSS/JS solo donde toca, mejorar rendimiento en WP-Admin y diseñar una experiencia de configuración más clara para equipos editoriales.

¿Cuánto sabes de WordPress Plugin?

Código del tema: admin_enqueue_scripts

📘 Teoría

Carga condicional en admin: menos peso, menos conflictos

No encoles assets globalmente si solo se usan en una pantalla.

Usa `admin_enqueue_scripts` y comprueba el hook de la página actual (`$hook_suffix`) antes de cargar scripts o estilos.

Esto evita que tu plugin afecte otras secciones de WP-Admin y reduce tiempo de carga en paneles ajenos.

Caso real: un script global de plugin rompía editor de otro módulo por colisión de nombres; limitar carga al hook correcto eliminó el incidente.

  • Detecta pantalla objetivo.
  • Encola solo ahí.
  • Versiona assets con constante del plugin.

Pasar datos a JS de forma segura

Evita hardcodear URLs y nonces en scripts.

1

Para acciones AJAX/admin, pasa datos con `wp_localize_script` o `wp_add_inline_script` controlado.

2

Incluye nonce, URL de endpoint y textos traducibles para mantener seguridad e internacionalización.

3

No expongas más datos de los necesarios en el objeto global.

UX del panel: claridad operativa

Un panel claro reduce soporte y acelera decisiones del equipo.

Agrupa ajustes por bloques lógicos: contenido del aviso, comportamiento, visibilidad y mantenimiento.

Usa etiquetas descriptivas, ayudas breves y estados de error/éxito visibles tras guardar.

Añade acciones de mantenimiento (por ejemplo, limpiar caché) con feedback inmediato para evitar dudas de operación.

1

Panel con ruido

Campos mezclados sin contexto.

  • Usuarios inseguros al guardar.
  • Configuraciones inconsistentes.
  • Más incidencias internas.
2

Panel usable

Estructura, ayuda y feedback claro.

  • Menos errores de uso.
  • Mayor autonomía editorial.
  • Menos tickets de soporte.

Caso real: admin lento por assets globales

Rendimiento de backoffice también importa.

1

En una web con varios plugins, cada módulo cargaba scripts en todo WP-Admin y el tiempo de interacción se volvió incómodo para el equipo de contenidos.

2

La solución fue auditar hooks de encolado y limitar cada asset a su pantalla. El panel recuperó fluidez y desaparecieron conflictos de JavaScript.

3

Tu plugin debe comportarse como buen ciudadano del ecosistema WordPress.

🧪 Aprende probando

Ejemplo Ejemplo guiado: encolado selectivo con `hook_suffix` Solo cargamos recursos en la página de ajustes del plugin y añadimos nonce para acciones JS.
⌄

🏁 Retos

Reto Reto real: evita carga en pantallas de edición Añade lógica para no encolar assets de ajustes en pantallas de `post.php` y `post-new.php`.
⌄

🧰 Recursos

Enlaces útiles

admin_enqueue_scripts wp_enqueue_script() wp_enqueue_style() WordPress Plugin: ajustes en admin WordPress Plugin: AJAX y REST Tailwind: formularios UX accesible
Test

Comprueba tus conocimientos con un test sobre WordPress Plugin.

Test de WordPress Plugin
Recursos del curso 15
📘 Glosario 🎬 Vídeos 🔗 Enlaces
‹
Lección 10
AJAX y REST API en plugins: interacción moderna con seguridad
Lección 12
Bloque dinámico en Gutenberg: reutilizar lógica sin duplicar código
›

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com