Esta guía explica cómo se construye el menú de administración del plugin WeLabs usando PHP y React, cómo se guardan las configuraciones mediante la REST API de WordPress y cómo puedes extenderlo paso a paso.
Visión general: en PHP se registra un menú superior con submenús y se imprimen contenedores root para que React monte sus aplicaciones. React monta componentes para Dashboard, Settings, Analytics, Tools y Help sobre esos contenedores. Los endpoints de la REST API manejan la lectura y escritura de ajustes y datos analíticos, y la seguridad se basa en nonces y comprobaciones de capacidades.
Archivos clave: includes/Admin/AdminMenu.php registra menús, encola assets y renderiza los div root; includes/Admin/Settings.php contiene la página clásica de ajustes y la localización de scripts; includes/Admin/REST/SettingsController.php y includes/Admin/REST/AnalyticsController.php definen rutas REST para ajustes y analítica; src/admin.js arranca la aplicación React; src/Components/* guarda los componentes React.
Registro del menú en PHP: la función register_admin_menu agrega el menú top-level WeLabs Plugin y submenús como Dashboard, Settings, Analytics, Tools y Help. En enqueue_admin_scripts solo se encolan script y estilos compilados en assets/build/admin cuando la página activa pertenece al plugin. Es importante localizarlos con datos como apiRoot, nonce y currentPage para que el código JS tenga contexto consistente.
Bootstrapping de React: en src/admin.js se configura apiFetch para usar el nonce y la URL raíz localizados. Es imprescindible que los IDs de los div root impresos desde PHP coincidan con los IDs que busca document.getElementById en JS, de lo contrario la aplicación fallará al montar sin avisos visibles.
Uso de la REST API para ajustes: SettingsController registra rutas GET y POST para leer y actualizar ajustes. Siempre realizar comprobaciones de capacidad con current_user_can manage_options y sanitizar entrada con sanitize_text_field y absint según corresponda. En el cliente React se usan llamadas apiFetch con path hacia customized-plugin-with-react v1 settings para leer y actualizar los valores.
Endpoints adicionales: AnalyticsController puede exponer rutas demo como GET customized-plugin-with-react v1 analytics con query time_range y devolver datos agregados. Para añadir más endpoints crea un nuevo controller siguiendo el patrón WP_REST_Controller, registra las rutas en register_routes e inicia la clase en el flujo de inicialización del plugin.
Seguridad y buenas prácticas: verificar capacidades en cada acción administrativa, usar nonces de WordPress creados con wp_create_nonce wp_rest y configurar apiFetch.createNonceMiddleware en el lado cliente, sanitizar todas las entradas y escapar salidas con esc_html__ esc_attr y esc_url en PHP.
Build y assets: ejecutar npm run build antes de desplegar; el proceso genera assets/build/admin/script.js admin.css y el archivo script.asset.php. Asegurarse que las rutas en PHP apunten a assets/build/admin/* para encolar correctamente.
Pruebas y depuración: registrar respuestas REST en consola, verificar que el middleware de nonce se aplica usando apiFetch.createNonceMiddleware, probar en una instalación limpia de WordPress o en un entorno local, y comprobar que los IDs DOM coinciden para evitar que React no monte.
Problemas comunes y soluciones: si aparece Class not found revisar PSR 4 autoload y namespaces; si React no se monta verificar IDs entre PHP y JS; para errores 401 o 403 en rutas REST asegurar que el nonce esté localizado y que el usuario tenga manage_options; si no cargan assets ejecutar npm run build y comprobar paths de encolado.
Cómo añadir un nuevo submenú y página React en breve: en AdminMenu.php usar add_submenu_page con un slug nuevo y un método render que imprima un div root con un ID único; en src/Components crear el componente y en src/admin.js buscar el div por ID y montar la app con createRoot y root.render.
Sobre Q2BSTUDIO: somos Q2BSTUDIO, una empresa de desarrollo de software y aplicaciones a medida especializada en soluciones a medida, inteligencia artificial aplicada a empresas, ciberseguridad y servicios cloud aws y azure. Ofrecemos servicios de inteligencia de negocio y Power BI, agentes IA y automatizaciones que ayudan a optimizar procesos y mejorar la toma de decisiones. Si buscas desarrollar una aplicación a medida o un software a medida consulta nuestra oferta en desarrollo de aplicaciones y software multiplataforma y si te interesa incorporar inteligencia artificial a tu negocio visita nuestra página de inteligencia artificial.
Palabras clave integradas: aplicaciones a medida, software a medida, inteligencia artificial, ia para empresas, agentes IA, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio y power bi, para mejorar el posicionamiento y conectar la implementación técnica del plugin con las soluciones empresariales que ofrece Q2BSTUDIO.
.jpg)
.jpg)