Un tutorial sobre el uso ajax en wordpress

AJAX es una notable tecnología web que nos mueve más allá de la simple “haga clic en enlace, ir a otra página" estructura de Internet 1.0.

AJAX, acrónimo de javascript asíncrono y XML, permite a los sitios web para acarrear dinámicamente y contenido de la pantalla sin que el usuario se aleja de la página actual. Esto lleva a una experiencia de usuario mucho más interactivo, y puede acelerar las cosas también, ya que una nueva página web entera no necesita ser cargado. Por suerte, haciendo uso de AJAX es bastante fácil de hacer desde el entorno de WordPress, y hoy voy a mostrar cómo.

Este tutorial Ajax debe considerarse bastante avanzada, y continúa desde la última vez en que hemos aprendido Cómo usar las tablas de bases de datos personalizados desde el interior de una plantilla de WordPress - en mi ejemplo, se utilizó una sencilla tabla existente de datos de clientes. Cuando se trata de la inserción de las cosas de nuevo en la base de datos, sin embargo, vamos a estar haciendo uso de un poco de magia de AJAX dentro de WordPress. Trabajando con la costumbre Tablas base de datos en WordPressTrabajando con la costumbre Tablas base de datos en WordPressUn análisis rápido de lo mejor de la página de WordPress Plugins revelará algunas de las muchas maneras únicas y de nicho que puede hacer su trabajo más duro del blog. ¿Qué pasa si usted ya tiene una base de datos de ...Lee mas

Todo el código en el tutorial de hoy lo tanto, se refiriendo a lo que escribimos la última vez, pero si lo que buscas es cómo hacer AJAX en WordPress, entonces es igual de relevante.

¿Por qué utilizar AJAX?

El uso más común de AJAX se relaciona con las formas - comprobar si se toma un nombre de usuario, o poblar el resto del formulario con preguntas diferentes en función de una determinada respuesta que das. Básicamente, sin embargo, se utiliza AJAX cada vez que desee un evento (como un usuario haga clic en algo, o escribir algo) atado a una lado del servidor acción que se produce en el fondo.

Vamos a usarlo para agregar nuevas entradas a nuestra base de datos de clientes importantes tabla personalizada, pero es probable que pueda llegar a algo más emocionante.

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

1. Editar su plantilla personalizada para incluir un formulario o javascript caso de que se presenten los datos a través de jQuery AJAX para admin-ajax.php incluyendo cualquier dato puesto que desea pasar. Asegúrese de jQuery se está cargando.
2. Definir una función en el tema de function.php- leer las variables de correos, y devolver algo a cambio para el usuario si lo desea.
3. Añadir una gancho de la acción AJAX para su función.

Crear el formulario

Vamos a empezar por la creación de una forma sencilla en el front-end para introducir nuevos datos del cliente. No es nada complicado, basta con sustituir la parte principal de su plantilla personalizada con este código que comenzamos la semana pasada, alrededor de donde se produce la is_user_logged_in () cheque:

si (is_user_logged_in ()) :? gt;

La única cosa que podría parecer extraño para usted es que no es el uso de un campo de entrada oculto llamado acción - contiene el nombre de la función que disparará a través de AJAX.

Vídeo: WordPress AJAX Tutorial

El receptor de PHP

A continuación, abrir functions.php y añadir la siguiente línea para asegurar jQuery está siendo cargado en su sitio:

wp_enqueue_script ( `jquery`) -

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

myFunction función () {// hacer somethingdie () - add_action} ( `wp_ajax_myFunction`, `myFunction`) - add_action ( `wp_ajax_nopriv_myFunction`, `myFunction`) -

Estas dos últimas líneas son ganchos de acción que le dicen a WordPress “Tengo una función llamada myFunction, y yo quiero que escuchen a cabo por ella porque va a ser llamado a través de la interfaz AJAX” - La primera es para los usuarios de nivel de administrador, mientras wp_ajax_nopriv_ es para los usuarios que no se ha identificado. Aquí está el código completo de functions.php que vamos a utilizar para insertar datos en nuestra tabla de clientes especiales, que explicaré en breve:

wp_enqueue_script ( `jquery`) - AddCustomer function () {$ nombre global wpdb- $ = $ _POST [ `nombre`] - $ telefónico = $ _POST [ `teléfono`] - $ email = $ _POST [ `email`] - $ address = $ _POST [ `dirección`] - if ($ wpdb-gt; inserte (, array ( `nombre` `clientes` = gt; nombre $, `email` = gt; $ email, `dirección` = gt; $ dirección, `teléfono` = gt; $ teléfono)) === FALSO) {echo "Error"-} else {echo "Cliente `". $ Name. "`Agregado con éxito, fila ID es ". $ Wpdb-gt; insert_id-} die () - add_action} ( `wp_ajax_addCustomer`, `AddCustomer`) - add_action ( `wp_ajax_nopriv_addCustomer`, `AddCustomer`) - // No realmente se necesita

Al igual que antes, estamos declarando la $ Wpdb mundial para darnos acceso directo a la base de datos. entonces estamos agarrando el ENVIAR variables que contienen los datos del formulario. Rodeado de una instrucción IF es la función $ Wpdb-gt; insertar, que es lo que utilizamos para insertar datos en nuestra mesa. Desde WordPress ofrece funciones específicas para la inserción de mensajes regulares y de metadatos, este $ Wpdb-gt; insertar método generalmente sólo se usa para las tablas personalizadas. Puede leer más sobre esto en el Codex, pero básicamente se toma el nombre de la tabla a ser insertado en, seguida de una formación de pares de columna / valor.

los === FALSO comprueba si la función de inserción no, y si es así, se emite “error“. Si no es así, sólo estamos enviando un mensaje al usuario que se añadió al cliente X, y haciéndose eco de la $ Wpdb-gt; insert_id variable, que indica el la variable de incremento automático de la última operación de inserción que pasó (Suponiendo que haya establecido un campo que auto-incrementos, como un ID).

Finalmente, morir() anulará el valor por defecto morir (0) proporcionado por WordPress - esto no es esencial como tal, pero sin que se va a conseguir 0 anexa al final de todo lo que envíe de vuelta a la plantilla.

el javascript

El paso final es la parte mágica - el javascript real que va a iniciar la llamada AJAX. Se dará cuenta de que en la forma que añadimos anteriormente, el campo de acción se deja en blanco. Esto se debe a que vamos a ser de primer orden esto con nuestra llamada AJAX. La forma general de hacer esto sería:

jQuery.ajax ({type:"ENVIAR", Url: "/wp-admin/admin-ajax.php", // manipulador de nuestra filedata PHP: "myDataString", El éxito: function (resultados) {// hacer algo con los datos devueltos})} -

Esa es la estructura básica de la llamada AJAX que va a utilizar, pero ciertamente no es la única manera que puede hacerlo. Tal vez se pregunte por qué nos estamos refiriendo a wp-admin aquí, a pesar de que esto estará en el front-end del sitio. Esto es justo donde el manejador de AJAX reside, si usted lo está utilizando para las funciones de administración laterales delanteros o - confuso, lo sé. Pegue el siguiente código directamente en la plantilla del cliente:

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

Vídeo: Ajax en WordPress de manera correcta

Eso es. Guarde todo, refrescarse y tratar de presentar algunos datos del formulario. Si usted está teniendo problemas, puede ver el código completo de la plantilla de página aquí (Basado en el vigésimo las once de tema por defecto), y el código para añadir a functions.php aquí (No sustituir, sólo tiene que añadir esta en el extremo).

Cosas a tener en cuenta

Seguridad: Este código no puede ser de producción y es a los efectos de aprendizaje única. Hemos dejado de lado un punto clave, y eso es el uso de un wp-nonce - un código único generado por WordPress que asegura la petición AJAX sólo se está viniendo de donde fue intended- una clave de acceso si se quiere. Sin eso, su función con eficacia podría ser explotado para insertar datos aleatorios. ataques de inyección SQL no son un problema, sin embargo, debido a que derrotamos consultas a través del WordPress $ Wpdb-gt; insertar función - WordPress limpia cualquier entrada para usted y los hace seguros.

Actualización de la tabla de clientes: En este momento, solo enviamos de vuelta un mensaje de confirmación, pero la tabla de clientes no se actualiza - sólo verá las entradas adicionales si actualiza la página (Que tipo de derrota el propósito de hacer esto todo a través de AJAX). Ver si se puede hacer una nueva función AJAX que pueden dinámicamente la salida de la mesa.

Validación de entrada: Porque no hay validación pasando con los datos del formulario, en realidad es posible añadir entradas en blanco, o varias entradas si pulsa demasiadas veces. Algunos de validación de entradas en los campos del formulario, borrarlos una vez terminado, así como SQL para comprobar el correo electrónico o número de teléfono que no tenga ya existe en la base de datos sería útil.

Eso es todo de mi parte esta semana - si ha tenido algún problema siguiendo este tutorial entonces no dude en ponerse en contacto a través de los comentarios y voy a hacer mi mejor esfuerzo para ayudar a You- o si está tratando de personalizar esto de alguna manera , no dude en compartir ideas conmigo. Espero que esto realmente va a demostrar lo mucho que se puede hacer desde dentro de WordPress, simplemente mediante la combinación de un poco de javascript, PHP, y MySQL. Como siempre, no se olvide de revisar todos nuestros otros artículos de WordPress.