Técnicas Ajax Mejoradas para WordPress Programación de Procedimientos

Hace unos años, escribí una serie de publicaciones sobre cómo usar Ajax en la interfaz de WordPress. El propósito de la serie es simple:

Vamos a dar una breve descripción de lo que es Ajax, cómo funciona, cómo configurarlo en el frente y cómo entender los enganches que proporciona WordPress. También construiremos un pequeño proyecto que ponga la teoría en práctica. Veremos el código fuente y también nos aseguraremos de que esté disponible en GitHub,.

En términos generales, la serie se mantiene bien pero, al igual que con todo el software en constante desarrollo, las técnicas, las API y los enfoques cambian. Además, a medida que pasan los años y continuamos perfeccionando nuestras habilidades, mejoramos el desarrollo y mejoramos al emplear nuevas API.

Debido a todo lo anterior, quiero revisar el concepto de Ajax en WordPress para que vea algunas de las nuevas API y cómo emplearlas en su trabajo diario o cómo refactorizar parte del código en el que está trabajando. con ahora.

Una advertencia antes de ir demasiado lejos en este tutorial: asumo que ya ha leído las series vinculadas en la introducción de este artículo y que tiene experiencia en la creación de complementos de WordPress..

Definiendo el plugin

Al igual que con cualquier complemento de WordPress, es importante asegurarse de definir el encabezado para que WordPress pueda leer el archivo con el fin de introducir la nueva funcionalidad en la aplicación principal..

Estoy llamando a esta variación del plugin Simple Ajax Demo, y se encuentra en wp-content / plugin / wp-simple-ajax. El primer archivo que estoy creando reside en el directorio raíz de wp-simple-ajax y se llama wp-simple-ajax.php.

Se parece a esto:

El código debe explicarse por sí mismo, especialmente si está acostumbrado a trabajar con los complementos de WordPress; Sin embargo, lo más importante que hay que entender es que toda la información anterior es lo que impulsará lo que el usuario ve en el panel de WordPress..
Es decir, los usuarios verán el nombre, la descripción y la versión del complemento, así como el nombre del autor (que se vinculará a la URL especificada) cuando se les presente la opción de activar el complemento..
Agregando el archivo Ajax de WordPress
En este punto, el complemento aparecerá en el panel del complemento de WordPress, pero en realidad no hará nada porque no hemos escrito ningún código. Para hacer que eso suceda, abordaremos este complemento en particular utilizando el enfoque de programación de procedimientos en lugar del enfoque orientado a objetos que he usado en la mayoría de mis tutoriales..
Cómo agregamos originalmente el soporte de Ajax
La razón para evitar la programación orientada a objetos en este momento es doble:
 
Esto es porque el plugin va a ser muy simple. Estoy más interesado en centrarme en las API especificadas proporcionadas por WordPress para que pueda centrarse en las cosas más importantes en las que centrarse en su trabajo.
 
La segunda parte de esta serie se centrará en refactorizar este código en un sistema orientado a objetos para que pueda ver cómo se ve todo esto dentro del contexto de un sistema más grande utilizando clases..
 
En última instancia, esta serie cubrirá ambos tipos de programación soportados por PHP y WordPress.
Lo más probable es que si ha trabajado con Ajax en el pasado, entonces haya hecho algo como esto para brindarle a su complemento el soporte para realizar llamadas asíncronas:
  
Este método en particular no es intrínsecamente incorrecto, pero descuida algunas de las API más nuevas que cubriré momentáneamente. También mezcla PHP, HTML y JavaScript en una sola función..
No es muy bueno ya que hace el trabajo, pero hay una forma más limpia de hacerlo.
Cómo añadimos soporte Ajax
Primero, para asegurarse de que nadie pueda acceder directamente al complemento, agregue el siguiente condicional justo debajo del encabezado del complemento:
Tenga en cuenta que la etiqueta PHP de apertura no será necesaria ya que este código vendrá más adelante en un archivo PHP preexistente (es necesario para el resaltado de sintaxis en este momento).
A continuación, configuremos una función para incluir el soporte de WordPress para Ajax mediante el uso de algunas de las API existentes que no implican mezclar idiomas. 
Esto es lo que tendremos que hacer:
 
Vamos a crear una función responsable de agregar soporte Ajax..
 
Engancharemos la función a la wp_enqueue_script acción.
 
Aprovecharemos el wp_localize_script Llamada API para poner en cola el soporte de WordPress para Ajax (que proviene de admin-ajax.php).
 
Parece bastante sencillo, ¿no es así? Tenga en cuenta que si tiene alguna pregunta, siempre puede agregarlas en los comentarios. Revisa el siguiente código para ver si puedes seguirlo:
 admin_url ('admin-ajax.php'))); 
De nuevo, tenga en cuenta que la etiqueta PHP de apertura no será necesaria en la versión final del complemento, ya que está aquí solo para aprovechar la funcionalidad de resaltado de sintaxis..
Con eso dicho, eche un vistazo a wp_localize_script. Antes de examinar cada parámetro, revisemos el propósito de esta función. Desde el Codex, la versión corta es la siguiente:
Localiza un script registrado con datos para una variable de JavaScript.
La descripción más larga es importante, sin embargo:
Esto le permite ofrecer traducciones localizadas correctamente de las cadenas utilizadas en su script. Esto es necesario porque WordPress actualmente solo ofrece una API de localización en PHP, no directamente en JavaScript.
Aunque la localización es el uso principal, se puede usar para hacer que los datos estén disponibles para su script que normalmente solo puede obtener desde el lado del servidor de WordPress.
Ahora revise los parámetros que acepta:
 
El primer parámetro se conoce como el encargarse de y se utiliza para identificar de forma única el script que se agrega a la página.
 
El segundo parámetro es el nombre, y esto es importante ya que es cómo identificarás el script a lo largo de tu código. Verás esto con mucho más detalle más adelante en el tutorial..
 
El tercer parámetro es el datos parámetro. Se refiere a una matriz que se enviará al navegador como un objeto de JavaScript. Ya que estamos pasando la URL de una ruta a un archivo, se proporcionará soporte Ajax.
 
Note que el primer parámetro es ajax-script. Tenga esto en cuenta cuando prestemos atención a la redacción y puesta en cola de nuestro propio JavaScript, ya que necesitaremos usar este controlador una vez más.. 
También recuerde tomar nota del nombre que seleccionó para su llamada a la API, ya que lo usaremos cuando trabajemos con el código del lado del cliente más adelante en este tutorial..
Una nota importante sobre el soporte de Ajax
Note que solo estamos usando el wp_enqueue_script gancho y no estamos usando admin_enqueue_script. Esto es porque ajaxurl Ya está definido en el panel de control..
Esto significa que si está buscando realizar solicitudes de Ajax en el área de administración de WordPress, entonces no necesita poner en cola nada. Todo lo que estamos haciendo en el contexto de este tutorial es específicamente para la parte delantera del sitio web..
Configuración de su código del lado del servidor
Ahora es el momento de escribir una función a la que llamará JavaScript a través de Ajax. Esto puede ser cualquier cosa que desee, pero a los efectos de este complemento, vamos a configurar una función que devolverá información sobre el usuario que ha iniciado sesión en el sitio..
El plugin hará lo siguiente:
 
Haga una solicitud al servidor solicitando información sobre el usuario actual.
 
Si el usuario ha iniciado sesión en el sitio, devolverá una respuesta JSON de la información del usuario.
 
Si el usuario no ha iniciado sesión, devolverá un código de error.
 
Estaremos usando el consola Objeto que está disponible en la mayoría de los navegadores modernos, así que asegúrese de estar usando Chrome, Safari o Firefox cuando trabaje con la fuente de JavaScript que va a escribir..
Hacer una solicitud
Ahora que hemos descrito exactamente cómo funcionará el código cada vez que un usuario realice una solicitud de Ajax al servidor, comencemos a escribir una función para hacer exactamente eso. Lo llamaremos sa_get_user_information.
La implementación de la función vendrá más adelante en este tutorial, pero la conclusión principal del código anterior es que nos hemos enganchado a ambos wp_ajax_get_current_user_info y wp_ajax_nopriv_get_current_user_info. 
Estos dos enganches están bien documentados en el Codex, pero el primer enganche permitirá a aquellos que están conectados al sitio acceder a esta función. El segundo gancho permitirá a los que están no Inicia sesión en este sitio para acceder a esta función..
También nota todo después wp_ajax_ y wp_ajax_nopriv_ Depende de usted, como desarrollador, definir. Este será el nombre de la función a la que llama desde el lado del cliente, como verá más adelante en este tutorial..
Manejo de solicitudes erróneas
Antes de implementar la función, se ha llamado al archivo fuente de JavaScript (que aún no se ha escrito), y debemos asegurarnos de que podemos manejar cualquier error que pueda ocurrir.
En nuestro caso, los posibles errores pueden ser:
 
Nadie ha iniciado sesión.
 
El ID de usuario no existe en el sistema..
 
Es muy poco probable que el segundo caso sea cierto, pero nos ayudará a aprender más acerca de algunas más de las API de WordPress y cómo podemos aprovecharlas para manejar solicitudes erróneas..
Lo primero que hay que entender es WP_Error. Al igual que con muchas API, esto está disponible en el Codex:
Las instancias de WP_Error almacenan códigos de error y los mensajes que representan uno o más errores, y si una variable es una instancia de WP_Error se puede determinar utilizando la función is_wp_error ().
El constructor aceptará hasta tres parámetros (aunque solo usaremos los dos primeros):
 
El primer argumento es el código de error. Esto es lo que podemos usar en el lado del cliente para analizar y determinar qué salió mal. También nos permite escribir información en un archivo de registro, etc..
 
El segundo argumento es un mensaje que puede acompañar el código de error. Esto es útil si queremos mostrar un mensaje al usuario..
 
El argumento final es una matriz de información, generalmente códigos de error y mensajes. En cualquier caso, no usaremos esto durante nuestro código.
 
A continuación, enviaremos los resultados de los errores al cliente usando una función llamada wp_send_json_error. Esto es realmente fácil de usar:
Envíe una respuesta JSON a una solicitud Ajax, lo que indica un error. El objeto de respuesta siempre tendrá una clave de éxito con el valor falso. Si se pasa algo a la función en el parámetro $ data, se codificará como el valor para una clave de datos.
Combinando ambos WP_Error y wp_send_json_error, podemos crear funciones que nos ayudarán a proporcionar códigos de error al JavaScript que llama al servidor.
Por ejemplo, digamos que tenemos una función que proporciona un error si el usuario no está conectado al sitio web. Esto se puede lograr utilizando la siguiente función:
Observe que la función está marcada como privada aunque se encuentre en el espacio de nombres global. Su prefijo con un guión bajo para denotar esta función se debe considerar privado.
Revisaremos esto en el próximo artículo..
En segundo lugar, tenemos que manejar el caso si el usuario no existe. Para hacer esto, podemos crear una función que haga lo siguiente:
Ahora tenemos dos funciones, cada una de las cuales enviará información al cliente si algo falla, pero ¿qué hacemos si ambas funciones pasan??
Manejo de solicitudes exitosas
Si las funciones anteriores no producen ningún error, entonces debemos tener una manera de enviar la solicitud al cliente con un mensaje exitoso y la información que solicita..
Es decir, debemos enviar la información al cliente que incluye la información del usuario actual en el formato JSON.
Para ello, podemos aprovechar el wp_send_json_success mensaje. También hace exactamente lo que crees que haría:
Envía una respuesta JSON a una solicitud de Ajax, que indica el éxito. El objeto de respuesta siempre tendrá una clave de éxito con el valor verdadero. Si se pasa algo a la función, se codificará como el valor para una clave de datos.
Combinemos el trabajo que hemos hecho hasta ahora para escribir una función a la que finalmente llamará JavaScript y que aproveche las dos funciones más pequeñas que hemos colocado arriba. De hecho, esta será la implementación de la función que omitimos anteriormente en este tutorial:
Si el usuario ha iniciado sesión y el usuario existe, enviaremos un mensaje de éxito al cliente que contiene la representación JSON del usuario. En este punto, es hora de escribir algo de JavaScript..
La solicitud del lado del cliente
Primero, agregue un archivo llamado frontend.js a la raíz de su directorio de plugins. Inicialmente, debe incluir el siguiente código:
; (function ($) 'use strict'; $ (function () );) (jQuery);
La implementación de la función se cubrirá momentáneamente, pero también debemos asegurarnos de que estamos insertando este archivo JavaScript en el complemento. Volver a la funcion sa_add_ajax_support y agregue lo siguiente encima de la llamada a wp_localize_script:
Recuerde que este script debe tener el mismo identificador que el definido en wp_localize_script. Ahora podemos volver a visitar nuestro archivo JavaScript y realizar una llamada al código del lado del servidor en el que hemos estado trabajando a lo largo de todo este artículo..
En frontend.js, añade el siguiente código:
/ ** * Este archivo es responsable de configurar la solicitud Ajax cada vez que se carga una página de WordPress. La página podría ser la página de índice principal, * una sola página o cualquier otro tipo de información que WordPress muestre. * * Una vez que el DOM esté listo, realizará una llamada de Ajax al servidor donde está definida la función 'get_current_user_info' y luego manejará la respuesta * en función de la información devuelta de la solicitud. * * @since 1.0.0 * /; (function ($) 'use strict'; $ (function () / * Haga una llamada Ajax a través de una solicitud GET a la URL especificada en la llamada * wp_enqueue_script. Para los datos parámetro, pase un objeto con * el nombre de acción de la función que definimos para devolver la información del usuario. * / $ .ajax (url: sa_demo.ajax_url, método: 'GET', datos: acción: 'get_current_user_info' ) .done (función (respuesta) / * Una vez que se realiza la solicitud, determine si fue exitosa o no. * Si es así, analice el JSON y luego procésela a la consola. De lo contrario, * muestre el contenido de la solicitud fallida a la consola. * / if (true === response.success) console.log (JSON.parse (response.data)); else console.log (response.data););); ) (jQuery);
Dado el número de comentarios en el código y suponiendo que está familiarizado con la escritura de complementos de WordPress y tiene algo de experiencia con Ajax, debería ser relativamente fácil de seguir.
En resumen, el código anterior realiza una llamada al servidor cuando se carga la página y luego escribe información en la consola del navegador acerca del usuario actual.. 
Si un usuario ha iniciado sesión, entonces la información se escribe en la consola en forma de un objeto JavaScript ya que se está analizando desde JSON..
Si, por otro lado, el usuario es no conectado, se escribirá otro objeto mostrando un código de error junto con el mensaje, todo lo cual podrá ver en la consola.
Conclusión
En este momento, debe tener una comprensión clara de las API que WordPress tiene disponibles para trabajar con las solicitudes de Ajax para los usuarios que han iniciado sesión en el sitio y para aquellos que no están.
En última instancia, nuestro objetivo debe ser escribir el código más limpio y fácil de mantener posible para que podamos continuar trabajando con este código a medida que avanzamos hacia el futuro. Además, deberíamos escribir un código como este para que otros que puedan tocar nuestro código base tengan una comprensión clara de lo que estamos tratando de hacer y también estén usando las mejores prácticas de nuestro entorno..
En este tutorial, usé una forma de programación de procedimiento para todo el código que se compartió, demostró y proporcionó a través de GitHub. Como se mencionó anteriormente, esto no tiene nada de malo, pero creo que vale la pena ver cómo se ve esto desde una perspectiva orientada a objetos..
En el siguiente tutorial, veremos cómo refactorizar este código en un paradigma orientado a objetos que también utiliza los Estándares de codificación de WordPress para documentar aún más nuestro trabajo, y que utiliza la organización de archivos claros para que nuestra escritura sea lo más clara y clara posible..
Recuerde, puede ver todos mis cursos y tutoriales en mi página de perfil, y puede seguirme en mi blog y / o Twitter en @tommcfarlin, donde hablo sobre el desarrollo de software en el contexto de WordPress y disfruto conversando con otros sobre el mismo. temas (así como otras cosas, también).
Mientras tanto, no dude en dejar sus preguntas o comentarios en el feed a continuación y trataré de responder a cada una de ellas.. 



		
			
	   
	




Código