¿Cuál es la práctica recomendada para assets de admin?

La carga selectiva reduce conflictos y mejora rendimiento.

¿Para qué sirve pasar nonce al JavaScript de admin?

Nonce añade protección de origen, complementando permisos del usuario.

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?

📘 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.

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.

Encolado condicional + datos para JS

add_action('admin_enqueue_scripts', function (string $hook): void {
    if ($hook !== 'toplevel_page_wpac-settings') {
        return;
    }

    wp_enqueue_style('wpac-admin', WPAC_URL . 'assets/css/admin.css', [], WPAC_VERSION);
    wp_enqueue_script('wpac-admin', WPAC_URL . 'assets/js/admin.js', ['jquery'], WPAC_VERSION, true);

    wp_localize_script('wpac-admin', 'WPAC_ADMIN', [
        'ajaxUrl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpac_admin_nonce'),
    ]);
});

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.

Panel con ruido

Campos mezclados sin contexto.

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

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.

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.

1 Carga condicional en admin: menos peso, menos conflictos 2 Pasar datos a JS de forma segura 3 UX del panel: claridad operativa 4 Caso real: admin lento por assets globales

🧪 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.

⌄