Contents
Introducción
Este tutorial explica, con todo lujo de detalles, cómo crear una página de administración con un menú propio en WordPress usando PHP. Verás dos enfoques: el método directo usando add_menu_page/add_submenu_page y la alternativa con la Settings API. También incluiré buenas prácticas de seguridad, carga de assets en el área de administración y ejemplos completos listos para usar como plugin.
Requisitos previos
- Instalación de WordPress (local o remota) con permisos para activar plugins.
- Conocimientos básicos de PHP y del ciclo de carga de WordPress.
- Editor de código y acceso al directorio wp-content/plugins.
1. Crear un plugin base
El primer paso es crear un archivo PHP dentro de wp-content/plugins, por ejemplo: wp-content/plugins/mi-admin-page/mi-admin-page.php. Incluye la cabecera del plugin y un hook para añadir el menú.
2. Crear la función que renderiza la página (formulario y guardado)
En la callback mostraremos un formulario seguro usando nonce, validaremos y guardaremos con update_option. Nunca confíes en datos sin sanitizar.
Ya hemos incluido add_submenu_page en el ejemplo anterior. La callback map_render_ajustes puede reutilizar el mismo patrón o usar la Settings API. Aquí un ejemplo simple de callback para el submenú.
4. Encolar scripts y estilos en el área de administración
Para cargar CSS o JS solo en tu página de administración usa admin_enqueue_scripts y comprueba el hook de la pantalla (hook_suffix). Así evitas cargar recursos innecesarios.
admin_url( admin-ajax.php ), nonce => wp_create_nonce( map_ajax_nonce ), ) ) }/ assets/admin.css / .wrap h1 { margin-bottom: 1em }5. Seguridad: capacidades, nonces, sanitización y escape
- Capacidades: Usa capabilities como manage_options o una capability personalizada. Evita usar administrator directamente.
- Nonces: Usa wp_nonce_field y wp_verify_nonce para proteger envíos de formularios.
- Sanitización: En el servidor usa sanitize_text_field, wp_kses_post, esc_url_raw, intval, etc., según el tipo de dato.
- Escape en salida: Usa esc_html, esc_attr, esc_textarea, wp_kses para HTML permitido.
Ejemplo de sanitización/escape rápido
// Guardar valor = isset( _POST[valor] ) ? sanitize_text_field( wp_unslash( _POST[valor] ) ) : // Mostrar echo. esc_html( valor ) .
6. Alternativa: Usar la Settings API (recomendado para ajustes)
La Settings API ayuda a gestionar registros, secciones y campos con validación centralizada. A continuación un ejemplo mínimo de registro de settings y campos.
. esc_html__( Ajustes generales de Mi Panel., mi-admin-page ) .
}
function map_field_titulo_cb() {
options = get_option( map_options, array() )
titulo = isset( options[titulo] ) ? options[titulo] :
echo
}
function map_sanitize_options( input ) {
output = array()
if ( isset( input[titulo] ) ) {
output[titulo] = sanitize_text_field( input[titulo] )
}
return output
}
En la página usas settings_fields(map_options_group), do_settings_sections(mi-panel) y submit_button() para mostrar el formulario y que WordPress gestione el guardado automáticamente.
7. Consideraciones sobre roles y capacidades
- Si necesitas que solo determinados roles accedan, crea una capability personalizada y asígnala a roles específicos con add_role / add_cap.
- Evita usar capabilities demasiado permisivas. Para la mayoría de ajustes use manage_options.
8. Internacionalización y buenas prácticas
- Envuelve cadenas con __(), _e(), esc_html__(), etc., y define Text Domain en la cabecera del plugin.
- Documenta el código y separa assets en carpetas (assets/admin.css, assets/admin.js).
- Utiliza prefijos únicos para funciones, hooks y opciones para evitar colisiones (ej. map_ para Mi Admin Page).
9. Ejemplo completo y mínimo de plugin (archivo único)
Este es un ejemplo compacto que incluye menú, guardado, nonce y encolado de assets.
10. Lista de comprobación antes de lanzar
- Verifica permisos y capacidades.
- Asegúrate de usar nonces en formularios y comprobación con wp_verify_nonce.
- Sanitiza y valida todos los datos entrantes antes de guardarlos.
- Escapa la salida con esc_html, esc_attr, esc_textarea o funciones apropiadas.
- Encola assets solo en las pantallas que necesites.
- Usa prefijos únicos en opciones y nombres de funciones para evitar conflictos.
Conclusión
Crear una página de administración con menú propio en WordPress es directo si sigues las APIs de WordPress: add_menu_page/add_submenu_page, nonces, sanitización y el encolado correcto de assets. Para opciones y formularios más complejos, la Settings API proporciona un marco estructurado. Usa los ejemplos anteriores como plantilla inicial y adáptalos a tus necesidades específicas.
Enlaces de referencia
|
|
Acepto donaciones de BAT's mediante el navegador Brave :) |