Gestión de referencias de formularios en WordPress con Admin-Post y Admin-AJAX

WordPress le brinda un soporte increíble para trabajar con referencias de formularios en su aplicación. Ya sea que agrega un formulario en administración o áreas públicas, el mecanismo incorporado con scripts admin-pos y admin-AJAX le permitirá administrar de manera efectiva las solicitudes de formulación. En este artículo, le mostraré cómo administrar las referencias de formularios personalizados utilizando la API de WordPress. Le guiaré por el proceso de agregar un formulario personalizado en el área de administración de un complemento, administraré el formulario del formulario a través de una solicitud HTML, y también procesaré el formulario de entrada.
Aunque permaneceré en el campo administrativo de WordPress, los mismos conceptos son aplicables cuando se trabaja con formularios en áreas públicas. También usaré construcciones de programación orientadas en objetos de complemento; Sin embargo, puede obtener el mismo resultado utilizando el código de procedimiento. El complemento de práctica se puede descargar desde aquí para seguirlo con el artículo. Nota: Este artículo está destinado a desarrolladores de WordPress intermedios y avanzados. Se supone que debe tener conocimiento práctico sobre HTML, JavaScript, JQuery, PHP y WordPress Plugin API. Si desea una actualización, le recomiendo leer lo siguiente:
Desarrollo de WordPress para principiantes: nociones introductorias
Desarrollo de WordPress para principiantes: complementos de construcción
JavaScript para desarrolladores de WordPress: usando AJAX
Desarrollo del desarrollo avanzado: Introducción a la programación orientada a objetos
Comencemos primero entendiendo el mecanismo de WordPress incorporado para administrar una solicitud regular de un formulario. Enviar formularios con admin.php en WordPress El rango de ganchos disponibles en WordPress le brinda un control especial sobre el flujo de ejecución de su aplicación. Esto no es diferente cuando se trata de formularios de procesamiento. Todo lo que necesita es el gancho correcto en el que “conectarse” y agregar un controlador de formulación personalizado. Los ganchos para procesar los formularios personalizados son de naturaleza dinámica, lo que significa que el nombre del gancho depende de usted.
Enviar formulario de WordPress con Admin-Post.php

Esto se realiza dirigiendo el formulario al formulario al archivo admin-pos.php ubicado en el director WP-admin de WordPress e incluyendo un nombre de acción personalizado en el formulario. Al hacer esto, WordPress activará dos ganchos de acción de acuerdo con el estado de conexión del usuario:
Admin_post _ {$ Action} para usuarios conectados
administración
Donde $ acción es el nombre de la acción transmitida por el formulario.
Luego puede usar add_action para vincular el formulario PHP que se gestionará a los ganchos activados, donde tendrá control completo para procesar los datos del formulario con las variables $ _get y $ _post.Como probablemente ya haya adivinado, a pesar de su nombre, Admin-Post.php puede administrar POST y obtener solicitudes, así como solicitudes para las áreas administrativas y no administrativas de la aplicación.Exploremos esto con la ayuda de un complemento personalizado.La estructura del complemento orientado a objetos es ayudarlo a comprender todo detrás del procesamiento de formas personalizadas en WordPress con y sin AJAX.Para este artículo, he preparado un complemento personalizado que puede descargar desde aquí para seguir.Le recomiendo que lo abra en un editor apropiado e instálelo solo en una configuración local de WordPress.
Construí el complemento utilizando prácticas de programación orientadas con un complemento Boilerplate. Los puntos de partida estándar se encuentran entre las mejores prácticas enumeradas en el manual del complemento de WordPress. Son una excelente manera de garantizar la consistencia entre sus complementos y ahorrarse durante mucho tiempo al escribir el código estándar. En un período, incluso puede escribir su propia calderera personalizada, en función de sus preferencias de codificación. Esto es lo que he hecho. El complemento se basa en su propia plantilla de complemento, que es una bifurcación del proyecto original de calderas de complemento de WordPress. Es similar al proyecto original en muchos aspectos, pero también tiene soporte para los nombres y la carga automática. De esta manera, no tengo que tener prefijos únicos para cada clase o función y no alcanzo muchas instrucciones también incluye. Sin embargo, la versión mínima de PHP requerida para mi complemento es 5.6.0. Notas: si no usa espacios de nombre o utiliza código de procedimiento, debe prefijo todo. Así es como el complemento está estructurado en el Backynd:
Inc/Core/* – Funcionalidad básica del complemento
Inc/admin/* – funcionalidad relacionada con el área de administración
Inc/frontand/* – funcionalidad relacionada con áreas públicas de cara
Inc/Common/* – Funcionalidad compartida entre el administrador y la interfaz
La estructura del complemento en el back -end
El complemento tiene un menú de administración de nivel superior con dos elementos de menú para las páginas de formulario.

La estructura del menú de administración de complementos
Para ver cómo agregué las páginas del menú de administración, eche un vistazo al método define_admin_hooks () en inc/core/class -it.php y el add_plin_admin_men () en inc/admin/class -admin.php del complemento. Si usted Desea obtener más información sobre cómo agregar páginas de administración a su complemento, eche un vistazo a nuestro artículo sobre la creación de páginas de administración de WordPress aquí. Agregar el formulario a la página de administración del complemento Cuando agregué la página del menú “Formulario HTML” para el complemento, tuve que especificar la llamada inversa para cargar el contenido de la página. Esto se agrega el formulario.

Se cargan los elementos esenciales del Nucansignstudio/AFC5DAC6BC5C36291B824E21A283255.
Sin embargo, en lugar de escribir HTML directamente en el método html_form_page_content, utilicé otro archivo parcials-html-form-view.php ubicado en inc/admin/vistas para el formulario HTML y lo cargué en la devolución de llamada como se muestra MIA. Down:
Se cargan los elementos esenciales del Nucansignstudio/9361C83A07F8C63A79A59BFBB09D41.
Esto es simplemente una preferencia de codificación. Me permite mantener mi código legible separando el código HTML y no hace ninguna diferencia en términos del resultado del formulario en la página del complemento.
Formulario HTML en la página de administración de complementos
Comprender la seguridad de los formularios, la estructura y la transmisión de la forma que se ha agregado anteriormente tiene un campo de selección con los usuarios existentes de WordPress y dos campos de texto para ingresar al usuario. Sin embargo, este simple ejemplo ocurre muchas detrás de escena. La forma de la forma a continuación se explica por sí misma, así que pasemos por los elementos importantes:
Los elementos esenciales del Nucansignstudio/48EBF27160BCC2A99E20CA0845B252E3 El formulario de seguridad más importante se debe tener en cuenta cuando se trata de tratar los formularios en WordPress IS Security Is Security. Haga su forma utilizando una combinación de WordPress Nonces y Current_User_can ($ Capacidad). En mi ejemplo, restringí la entrada al formulario con if (current_use_can (‘edit_users’)), es decir, el formulario se cargará solo si el usuario conectado tiene capacidad edit_users. También generé un nonce personalizado usando wp_create_non () y luego lo agregué como un campo de forma oculta. En su lugar, puede usar wp_nonce_field () para agregarlo directamente. Aquí hay un gran artículo para comprender en detalle.

La estructura del formulario ha prefijo todos los elementos de formulario con el nombre del complemento para garantizar la singularidad. Esta es nuevamente una preferencia de codificación personal, porque puedo estar seguro de que solo apuntaré a mi forma a través de JavaScript. También utilicé el atributo HTML5 requerido para dejar la validación del formulario en el navegador.
Inspeccionar el formulario de administración
El envío del formulario El envío del formulario se realiza en Admin-Post.php utilizando la función Admin_url (‘admin.phost.php’), en lugar de la codificación de la URL. Cuando WordPress recibe el formulario, buscará el valor del campo de acción para activar los ganchos de formulario. En mi caso, generará el gancho addmin_post_nds_form_esponse. Si hubiera sido una página abierta al público, habría activado el gancho admin_post_nopriv_nds_form_esponse. El administrador de formularios para la solicitud de publicación en esta etapa, si envía el formulario, será redirigido a una página vacía con la URL de la página establecida en Admin-Post.php. Esto se debe a que todavía no hay un controlador de formulario para procesar la solicitud. Para procesar la solicitud, registré The_Form_Response the_Form_Response en define_admin_hooks () una clase-it.php como sigue: $ this-> looader-> add_action (‘admin_post_form_response’, $ plugin_admin, ‘the_form_response’); Si usó el código de procedimiento, simplemente se add_action (‘admin_post_nds_form_esponse’, ‘the_form_response’); se carga lo esencial de la nuancedenstudio/058d846d2b1059a097475e6e327499d7.
The_Form_Response () es el lugar donde tendré acceso completo a los datos del formulario a través de los superglobals $ _post o $ _get. Como se muestra a continuación, agregué un punto de interrupción a la llamada inversa en mi IDE para asegurarme de que el gancho funcionará como se esperaba.
Inspeccionar la forma de forma con xdebug

Validación del formulario y saneamiento de las entradas Antes de realizar cualquier operación, debe validar las NONC y desinfectar correctamente la entrada del usuario. Utilicé la función wp_verify_nonce ($ nonce_name, $ nonce_action) para verificar nonce y sanitize_key () y sanitize_text_field () para desinfectar la entrada del usuario disponible. Si Nonce verifica, el usuario recibirá un mensaje de error en respuesta al servidor, utilizando la función WordPress WP_DIE (). Nota: Hemos accedido a los datos del formulario utilizando la variable $ _post. Si hubiera enviado el formulario usando el método Get, usaría la variable global $ _get o $ _Request. Solo cuando estoy seguro de que todo está en orden, realizaría una operación de WordPress, como agregar al usuario al usuario seleccionado. Para obtener más información sobre el saneamiento de las entradas, recomiendo leer el Códice de WordPress: valorar la desinfectación y escapar del usuario aquí. Enviar la respuesta del servidor después de las operaciones del servidor es importante para enviar el servidor al usuario. Para hacer esto, primero tendrá que redirigir al usuario a una página de administración o una que proporcione comentarios. Redirigí al usuario nuevamente a la página del complemento y utilicé Admin Aviso de WordPress para mostrar los comentarios del servidor. La respuesta del servidor de mi ejemplo está simplemente fuera
Mejora progresiva En esta etapa, tengo una forma completamente funcional en el área de administración de mi complemento de WordPress. Está asegurado y se envía correctamente a mi administrador de formulación, donde los datos de entrada se desinfectan y finalmente, la respuesta del servidor es visible. El formulario funcionará inmediatamente en todos los navegadores que tengan apoyo para HTML5. Pero puedo hacer mucho para mejorar la experiencia del usuario, como agregar soporte AJAX. Este enfoque para establecer un nivel básico de experiencia del usuario que está disponible en todos los navegadores y luego agregar funcionalidades avanzadas para los navegadores que lo aceptan se llama mejora progresiva. Nota: Asumí que mis usuarios usan soporte HTML5 moderno. Sin embargo, si el formulario se reproduce en un navegador más antiguo, se interrumpiría la validación de entrada HTML5 para los campos obligatorios. Puedo usar es un excelente sitio web que puede usar para comparar funciones web que están disponibles en todos los navegadores y versiones de los navegadores. Enviar formularios con AJAX (Admin-AJAX.PHP) a WordPress AJAX en WordPress se gestiona mediante el archivo WP-Admin/Admin-AJAX.PHP. Aquí hay una presentación general de cómo se pueden procesar los formularios personalizados a través de AJAX en WordPress: envío de formularios con soporte AJAX en WordPress

Notará que es bastante similar a cómo se procesan los formularios usando Admin.Php. Cuando WordPress reciba una solicitud AJAX, creará dos ganchos basados ​​en la acción proporcionada:
WP_AJAX _ {$ Action} para usuarios conectados

WP_AJAX_NOPRIV _ {$ Action} para usuarios innecesarios
Donde $ acción es el nombre de la acción que se ha aprobado. Agregar el soporte AJAX al formulario del complemento de la página del menú de la segunda página del complemento “Formulario AJAX Enviar” carga el formulario que se envía a través de una solicitud AJAX. Se agrega a la página del menú de la misma manera que la que se discutió anteriormente y utiliza el archivo parcials-jax-form-view.php para cargar el contenido del formulario. Si observa este archivo, notará que es casi idéntico al formulario anterior, las únicas diferencias son el valor de la identificación del formulario y el título. Ahora que puedo identificar una forma de la otra, solo pueden procesar la segunda forma a través de AJAX usando JavaScript. Para agregar soporte de AJAX, damos los siguientes pasos: coloque un archivo JavaScript en la cola para cargar jquey

El controlador de eventos de envío de jquey se ha utilizado para evitar la presentación normal del formulario
Usó jquey. AJAX () para enviar el formulario a admin-ajax.php en lugar de admin-pos.php

Nota: Si por alguna razón, JavaScript está deshabilitado en el navegador, JQuey o Ajax tampoco estarán disponibles, pero el formulario continuará siendo normal. Esto se debe a que dejé la URL para enviar el formulario como Admin.php en el formulario HTML. Usando JavaScript y JQuey para publicar el formulario aquí, utilicé JavaScript para enviar el formulario a través de AJAX.
Cargue el esencial NuancedenStudio/C1A29B1433FD4DB658FB4181505A3E6
Event.preventDefault (); Es lo que realmente previene el depósito normal de la forma. Hemos reunido los datos de formulario utilizando la función Serialize () jquey, pero hay muchas otras formas de hacerlo. Uno de ellos usa la forma de la forma de HTML5. Supere el alcance de este artículo, pero definitivamente vale la pena considerarse. Var ajax_form_data = $ (“#nds_add_user_meta_ajax_form”). Serialize (); También agregué parámetros de URL adicionales a los datos serializados, para que luego pueda distinguir entre un AJAX y una solicitud regular en la gestión de los formularios PHP. AJAX_FORM_DATA = AJAX_FORM_DATA+’& AJAXREQUEST = True & Subt = Subt+Form’; Por lo general, el encabezado HTTP X-Request-con el encabezado se establece automáticamente en XMLHTTPRequest por AJAX Biblioteca. Esto también se puede usar para identificar una solicitud AJAX, pero no siempre es confiable. El método AJAX () de JQuery enviará la solicitud al servidor. Los elementos esenciales del Nucansignstudio/9FB35CD0C0CD80A9E53B7EA51365F2C7
Para enviar el formulario a Admin-AJAX.PHP, utilicé una matriz de Params.AJAXURL que se transmitió desde el PHP usando wp_localise_cript. Nota: El formulario del formulario en mi ejemplo incluye la acción que WordPress lo usará para generar ganchos para la solicitud AJAX. WordPress activará los siguientes ganchos:
Wp_ajax_nds_form_esponse para usuarios conectados
WP_AJAX_NOPRIV_NDS_FORM_ESPONDE para usuarios sin nombre
El archivo JavaScript se coloca en la cola en el enqueSe_Scripts () a class-admin.php como sigue:
Se cargan los elementos esenciales del Nucansignstudio/99A46C09D583A65C2D054F781AB6B85.
La variable global Ajaxurl también puede usar una variable global JavaScript Ajaxurl en lugar de transmitir URL para admin-AJAX.PHP de PHP. Sin embargo, la variable solo está disponible cuando se trata del final de la administración y no está disponible cuando se trata de AJAX en el frente. Dependiendo de la respuesta del servidor, .Done () Ajax prometido .Done () y .fail () se ejecutará en consecuencia. En mi ejemplo, para una solicitud exitosa, agregué la respuesta al contenedor Div Goland_Form_Feedback que era parte de mi formulario HTML. Finalmente, los campos se eliminan restableciendo el formulario. El administrador de formulación para la solicitud AJAX adjunté el mismo controlador de formulación, The_Form_Response a solicitud de AJAX. El esencial NuanceesignStudio/7DC320DB5B1787F6CB25B48B2970E
Y al administrar los formularios, utilicé $ _post [‘AjaxRequest’] que se estableció manualmente en JavaScript para distinguir entre una solicitud normal y AJAX.
Cargue el esencial NuancedenStudio/EC6FE7654FDFCB93C7AA50041DF8EC03
Validación de la solicitud AJAX utilizando un punto de interrupción
Eso es todo. Con Ajax, la respuesta se muestra sin que la página sea recargada o redirigida. Si JavaScript se ha desactivado o no cargado por algún motivo, $ _post [‘AjaxRequest’] no sería válido, y el formulario normalmente se enviaría if (isset ($ _post [‘AjaxRequest’]) && $ _Post [‘AjaxRequest’] === ‘verdadero’) AJAX específico if (isset ($ _post [‘AjaxRequest’]) && $ _Post [‘AjaxRequest’] == ‘True’) bloque de código. Definitivamente, puede hacer mucho más para mejorar la experiencia del usuario y le recomiendo leer la documentación de la API de JQUEY para AJAX aquí. Recursos adicionales que cubrí muchas tierras aquí. Ajax es un tema bastante vasto y se implementa de varias maneras. Aquí hay algunos ejemplos de uso de Ajax en WordPress: Cargar publicaciones de WordPress dinámicamente con AJAX
Uso de AJAX con PHP en su sitio web de WordPress sin un complemento
Cómo usar Ajax en WordPress para cargar los resultados de búsqueda
¿Utiliza formularios personalizados en su sitio? Háganos saber en los comentarios a continuación.
Etiquetas:
Ajax
desarrollo