Un tutorial sobre el uso de AJAX en WordPress

AJAX es una tecnología web notable que nos ha llevado más allá de lo simple. “haga clic en el enlace, vaya a otra página” estructura de Internet 1.0.

AJAX, que significa Javascript asíncrono y XML, permite a los sitios web obtener y mostrar contenido de forma dinámica sin que el usuario se aleje de la página actual. Esto lleva a una experiencia de usuario mucho más interactiva, y puede acelerar las cosas también, ya que no es necesario cargar una página web completamente nueva. Por suerte, hacer uso de AJAX es bastante fácil de hacer desde el entorno de WordPress, y hoy les mostraré cómo.

Este tutorial de Ajax debe considerarse bastante avanzado, y continúa desde la última vez que aprendimos cómo usar tablas de bases de datos personalizadas Trabajando con tablas de bases de datos personalizadas en WordPress Trabajando con tablas de bases de datos personalizadas en WordPress Algunas de las muchas formas exclusivas y especiales de hacer que tu blog trabaje más. ¿Qué sucede si ya tiene una base de datos de ... Lea más desde una plantilla de WordPress? En mi ejemplo, se usó una tabla simple de datos de clientes existentes. Sin embargo, cuando se trata de volver a insertar cosas en la base de datos, vamos a utilizar un poco de magia AJAX en WordPress..

Por lo tanto, todo el código en el tutorial de hoy hará referencia a lo que escribimos la última vez, pero si solo está buscando cómo hacer AJAX en WordPress, entonces es igual de relevante..

Por qué usar AJAX?

El uso más común de AJAX está relacionado con los formularios: verificar si se toma un nombre de usuario o rellenar el resto del formulario con diferentes preguntas según la respuesta particular que proporcione. Básicamente, sin embargo, usas AJAX cuando quieres un evento (como un usuario haciendo clic en algo, o escribiendo algo) atado a un lado del servidor acción que se produce en el fondo.

Vamos a usarlo para agregar nuevas entradas a nuestra importante tabla personalizada de base de datos de clientes, pero probablemente pueda encontrar algo más emocionante.

Descripción general de cómo usar AJAX en WordPress

1. Edite su plantilla personalizada para incluir un formulario o evento javascript que enviará datos a través de jQuery AJAX a admin-ajax.php incluyendo cualquier dato de publicación que quieras pasar. Asegúrate de que jQuery se está cargando.
2. Define una función en tu tema function.php; lea las variables de publicación y devuelva algo al usuario si lo desea.
3. Añadir un Gancho de acción AJAX para su función.

Creando el formulario

Comencemos por crear un formulario simple en el front-end para ingresar nuevos detalles del cliente. No es nada complicado, simplemente reemplace la parte principal de su plantilla personalizada con este código que comenzamos la semana pasada, alrededor del lugar donde se realiza la comprobación is_user_logged_in ():

if (is_user_logged_in ()):?> 
 Nombre:  Email:  Teléfono:  Dirección:    
 

 
 

Lo único que le puede parecer extraño es que existe el uso de un campo de entrada oculto llamado acción - Esto contiene el nombre de la función que activaremos a través de AJAX..

El receptor PHP

A continuación, abre funciones.php y agregue la siguiente línea para asegurarse de que jQuery se está cargando en su sitio:

wp_enqueue_script ('jquery');

La estructura básica para escribir una llamada AJAX es la siguiente:

function myFunction () // hacer algo die ();  add_action ('wp_ajax_myFunction', 'myFunction'); add_action ('wp_ajax_nopriv_myFunction', 'myFunction');

Esas dos últimas líneas son ganchos de acción que le dicen a WordPress “Tengo una función llamada myFunction, y quiero que la escuches porque se llamará a través de la interfaz AJAX” - El primero es para usuarios de nivel de administrador, mientras que wp_ajax_nopriv_ es para usuarios que no han iniciado sesión. Aquí está el código completo para funciones.php que vamos a utilizar para insertar datos en nuestra tabla de clientes especiales, que explicaré brevemente:

wp_enqueue_script ('jquery'); function addCustomer () global $ wpdb; $ nombre = $ _POST ['nombre']; $ phone = $ _POST ['phone']; $ email = $ _POST ['email']; $ dirección = $ _POST ['dirección']; if ($ wpdb-> inserte ('clientes', matriz ('nombre' => $ nombre, 'correo electrónico' => $ correo electrónico, 'dirección' => $ dirección, 'teléfono' => $ teléfono)) === FALSO) echo "Error";  else echo "Customer '". $ name. "'agregado correctamente, el ID de fila es". $ wpdb-> insert_id;  die ();  add_action ('wp_ajax_addCustomer', 'addCustomer'); add_action ('wp_ajax_nopriv_addCustomer', 'addCustomer'); // no es realmente necesario

Al igual que antes, estamos declarando el $ wpdb global Para darnos acceso directo a la base de datos. Entonces estamos agarrando el ENVIAR Variables que contienen los datos del formulario. Rodeado de una sentencia IF está la función $ wpdb-> insertar, que es lo que usamos para insertar datos en nuestra tabla. Dado que WordPress proporciona funciones específicas para insertar publicaciones regulares y metadatos, esto $ wpdb-> insertar El método generalmente solo se usa para tablas personalizadas. Puede leer más sobre esto en el Codex, pero básicamente toma el nombre de la tabla para insertar, seguido de un formación de pares columna / valor.

los === FALSO comprueba si la función de inserción falló, y si es así, da salida “error“. Si no, solo estamos enviando un mensaje al usuario que Cliente X fue agregado, y haciendo eco del $ wpdb-> insert_id variable, que indica la variable de incremento automático de la última operación de inserción que sucedió (Suponiendo que haya establecido un campo que se incremente automáticamente, como una ID).

Finalmente, morir() anulará el valor predeterminado morir (0) proporcionado por WordPress - esto no es esencial como tal, pero sin él obtendrás 0 adjunto al final de todo lo que envíe a la plantilla.

El Javascript

El paso final es el bit mágico, el Javascript real que iniciará la llamada AJAX. Notará que en el formulario que agregamos anteriormente, el campo de acción se dejó en blanco. Eso es porque estaremos anulando esto con nuestra llamada AJAX. La forma general de hacer esto sería:

jQuery.ajax (type: "POST", url: "/wp-admin/admin-ajax.php", // nuestros datos del archivo de controlador PHP: "myDataString", success: function (results) // haz algo con datos devueltos);

Esa es la estructura básica de la llamada AJAX que usaremos, pero ciertamente no es la única forma en que puede hacerlo. Quizás te preguntes por qué nos referimos wp-admin Aquí, aunque esto estará en la parte frontal del sitio. Aquí es justo donde el Controlador AJAX reside, ya sea que lo esté utilizando para funciones frontales o administrativas, confuso, lo sé. Pegue el siguiente código directamente en la plantilla del cliente:

En la primera línea, adjuntamos nuestra función ajaxSubmit al formulario que creamos anteriormente, por lo que cuando el usuario hace clic en enviar, pasa a través de nuestra función especial AJAX. Sin esto, nuestra forma no hará nada. En nuestro ajaxSubmit () función, lo primero que hacemos es serializar () el formulario. Esto solo toma todos los valores de formulario y los convierte en una cadena larga que nuestro PHP analizará más adelante. Si todo funciona bien, pondremos los datos devueltos en el DIV con el id de retroalimentación.

Eso es. Guarde todo, actualice e intente enviar algunos datos del formulario. Si tiene problemas, puede ver el código completo de la plantilla de página aquí (basado en el tema por defecto de veintiocho), y el código para agregar a functions.php aquí (No reemplace, solo agregue esto al final).

Cosas para tener en cuenta

Seguridad: Este código no está listo para producción y es solo para fines de aprendizaje. Hemos omitido un punto clave, y ese es el uso de un wp-nonce: un código único generado por WordPress que garantiza que la solicitud AJAX solo provenga de donde se diseñó; una contraseña si así lo desea. Sin eso, su función podría ser efectivamente explotada para insertar datos aleatorios. Sin embargo, los ataques de inyección SQL no son un problema porque enrutamos las consultas a través de WordPress $ wpdb-> insertar Función: WordPress limpia cualquier entrada para usted y la hace segura..

Actualización de la tabla de clientes: En este momento, solo enviamos un mensaje de confirmación, pero la tabla de clientes no se actualiza, solo verá las entradas adicionales si actualiza la página (Qué tipo de derrotas el propósito de hacer todo esto a través de AJAX). Vea si puede crear una nueva función AJAX que pueda generar dinámicamente la tabla.

Validación de entrada: debido a que no se realiza ninguna validación con los datos del formulario, en realidad es posible agregar entradas en blanco o múltiples entradas si presiona demasiadas veces. Alguna validación de entrada en los campos del formulario, borrándolos cuando se completen, así como SQL para verificar el correo electrónico o número de teléfono que no existe en la base de datos sería útil.

Esta es mi respuesta esta semana: si has tenido algún problema después de este tutorial, no dudes en ponerte en contacto a través de los comentarios y haré todo lo posible para ayudarte. o si está intentando personalizar esto de alguna manera, siéntase libre de compartir ideas conmigo. Espero que esto realmente muestre cuánto puedes hacer desde WordPress simplemente combinando un poco de JavaScript, PHP y MySQL. Como siempre, no olvides revisar todos nuestros otros artículos de WordPress.

Explorar más sobre: ​​Programación, Herramientas para webmasters, Wordpress.