Cómo utilizar AJAX en WordPress

1. ¿Qué es AJAX?
   1. Cómo no utilizar AJAX
2. Cómo funciona AJAX en WordPress de forma nativa
3. Implementando AJAX en WordPress
   1. Preparándose para enviar la llamada AJAX
   2. Manejando la acción sin JavaScript
   3. Agregar JavaScript a la mezcla
4. Conclusión
   1. Otras lecturas

En este artículo, Daniel Pataki presenta un tutorial rápido sobre el uso de AJAX en WordPress. ¡Aprenda cómo agregar correctamente la funcionalidad AJAX a los complementos!

En los últimos años, AJAX se ha introducido en los sitios web y poco a poco se ha convertido en LA forma de crear sitios web dinámicos, fáciles de usar y responsivos. AJAX es la tecnología que te permite actualizar el contenido de una página sin tener que recargarla en un navegador. Por ejemplo, Google Docs utiliza esta tecnología al guardar su trabajo cada pocos minutos. Este artículo ha sido revisado y actualizado el 14 de julio de 2017.

Si bien hay varias formas de usar AJAX en WordPress (y todas son “correctas”, en el sentido amplio de la palabra), hay un método que debes seguir por varias razones: WordPress lo admite, está preparado para el futuro. , es muy lógico y le ofrece numerosas opciones desde el primer momento.

¿Qué es AJAX?

AJAX es una combinación de código HTML, CSS y JavaScript que le permite enviar datos a un script y luego recibir y procesar la respuesta del script sin necesidad de recargar la página.

Si no está familiarizado con AJAX, le sugiero continuar hasta el final de este artículo y luego leer el artículo de Wikipedia sobre AJAX , seguido de algunos tutoriales de AJAX . Este es un caso raro en el que recomiendo leer lo menos posible sobre él antes de probarlo, porque al principio me confundió muchísimo; y la verdad es que rara vez interactuarás con AJAX en su estado "sin formato"; normalmente utilizarás ayudas como jQuery.

Si está creando una página en su sitio web donde los usuarios pueden modificar su perfil, puede usar AJAX para actualizar el perfil de un usuario sin necesidad de recargar constantemente la página cada vez que envían el formulario. Cuando el usuario hace clic en el botón, los datos que ingresó en el formulario se envían a través de AJAX al script de procesamiento, que guarda los datos y devuelve la cadena "datos guardados". Luego puede enviar esos datos al usuario insertándolos en la página.

Lo que hay que entender acerca de AJAX es cuán diferente es de lo que ya estás haciendo. Si tiene un formulario de contacto, es probable que el formulario esté marcado con HTML, se le apliquen algunos estilos y un script PHP procese la información. La única diferencia entre esto y AJAX es cómo la información que ingresa el usuario llega al script y regresa al usuario; todo lo demás es igual.

Para explotar todo el potencial de AJAX y sacar el máximo provecho de este artículo, necesitarás estar familiarizado con JavaScript (jQuery será suficiente), así como con HTML, CSS y PHP. Si su conocimiento de JavaScript es un poco dudoso, no se preocupe; aún podrás seguir la lógica. Si necesitas ayuda, envía un comentario e intentaré ayudarte.

Cómo no utilizar AJAX

Un método que ha existido, y que yo mismo usé en los viejos tiempos, es simplemente cargar el archivo wp-load.php en la parte superior de su script PHP. Esto le permite utilizar las funciones de WordPress, detectar el usuario actual, etc. Pero esto es básicamente un truco y, por lo tanto, no está preparado para el futuro. Es mucho menos seguro y no le ofrece algunas de las opciones interesantes que ofrece el sistema WordPress.

Cómo funciona AJAX en WordPress de forma nativa

Debido a que AJAX ya se usa en el back-end de WordPress, básicamente se ha implementado para usted. Todo lo que necesitas hacer es utilizar las funciones disponibles. Veamos el proceso en general antes de profundizar en el código.

Cada solicitud AJAX pasa por el archivo admin-ajax.php en la wp-admincarpeta. Que este archivo se llame admin-ajax puede resultar un poco confuso. Estoy bastante de acuerdo, pero así es como resultó el proceso de desarrollo. Por lo tanto, deberíamos usar admin-ajax.php para AJAX de back-end y de cara al usuario.

Cada solicitud debe proporcionar al menos un dato (utilizando el método GETo POST) llamado action. En base a esta acción, el código en admin-ajax.php crea dos enlaces wp_ajax_my_actiony wp_ajax_nopriv_my_action, donde my_actionestá el valor de la variable GETo .POSTaction

Agregar una función al primer enlace significa que esa función se activará si un usuario que inició sesión inicia la acción. Con el segundo enlace, puede atender a los usuarios desconectados por separado.

Implementando AJAX en WordPress

Construyamos un sistema de votación rudimentario como ejemplo rápido. Primero, cree un complemento vacío y actívelo. Si necesita ayuda con esta parte, consulte el tutorial sobre cómo crear un complemento . Además, busque el archivo single.php de su tema y ábralo.

Preparándose para enviar la llamada AJAX

Creemos un enlace que permita a las personas aprobar nuestros artículos. Si un usuario tiene JavaScript habilitado, utilizará JavaScript; si no, seguirá el enlace. En algún lugar de tu archivo single.php , quizás cerca del título del artículo, agrega el siguiente código:

?php $votes = get_post_meta($post-ID, "votes", true); $votes = ($votes == "") ? 0 : $votes;?This post has div id='vote_counter'?php echo $votes ?/div votesbr?php $nonce = wp_create_nonce("my_user_vote_nonce"); $link = admin_url('admin-ajax.php?action=my_user_votepost_id='.$post-ID.'nonce='.$nonce); echo 'a data-nonce="' . $nonce . '" data-post_id="' . $post-ID . '" href="' . $link . '"vote for this article/a';?

Primero, extraigamos el valor de la votesclave meta relacionada con esta publicación. Este metacampo es donde almacenaremos el recuento total de votos. También asegurémonos de que si no existe (es decir, su valor es una cadena vacía), mostremos 0.

También hemos creado un enlace normal aquí. El único extra es una pizca de seguridad, usando nonces , para asegurarse de que no haya ningún acto sucio. De lo contrario, esto es simplemente un enlace que apunta al archivo admin-ajax.php , con la acción y el ID de la publicación en la que se encuentra el usuario especificados en forma de cadena de consulta.

Para atender a los usuarios de JavaScript, hemos agregado una user_voteclase a la que adjuntaremos un evento de clic y una data-post_idpropiedad que contiene el ID de la publicación. Los usaremos para pasar la información necesaria a nuestro JavaScript.

Manejando la acción sin JavaScript

Si hace clic en este enlace ahora, debería acceder al script admin-ajax.php , que generará -1o 0. Esto se debe a que aún no se ha creado ninguna función para manejar nuestra acción. Entonces, ¡pongámonos manos a la obra!

En su complemento, cree una función y agréguela al nuevo enlace que se creó para nosotros. Así es cómo:

add_action("wp_ajax_my_user_vote", "my_user_vote");add_action("wp_ajax_nopriv_my_user_vote", "my_must_login");function my_user_vote() { if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_vote_nonce")) { exit("No naughty business please"); } $vote_count = get_post_meta($_REQUEST["post_id"], "votes", true); $vote_count = ($vote_count == ’) ? 0 : $vote_count; $new_vote_count = $vote_count + 1; $vote = update_post_meta($_REQUEST["post_id"], "votes", $new_vote_count); if($vote === false) { $result['type'] = "error"; $result['vote_count'] = $vote_count; } else { $result['type'] = "success"; $result['vote_count'] = $new_vote_count; } if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { $result = json_encode($result); echo $result; } else { header("Location: ".$_SERVER["HTTP_REFERER"]); } die();}function my_must_login() { echo "You must log in to vote"; die();}

En primer lugar, hemos verificado el nonce para asegurarnos de que la solicitud sea agradable y legítima. Si no es así, simplemente dejamos de ejecutar el script. De lo contrario, seguimos adelante y obtenemos el recuento de votos de la base de datos; asegúrese de configurarlo 0si aún no hay recuento de votos. Luego le sumamos 1para encontrar el nuevo recuento de votos.Te recomendamos 🍌 Películas Porno en Español, Estrenos, Inglés, Parodias, Hentai XXX Online Gratis

Usando la update_post_meta()función, agregamos el nuevo recuento de votos a nuestra publicación. Esta función crea los metadatos de la publicación si aún no existen, por lo que podemos usarlos para crear, no solo actualizar. La función regresa truesi tiene éxito y falsesi falla, así que creemos una matriz para ambos casos.

Me gusta crear estas matrices de resultados para todas las acciones porque estandarizan el manejo de acciones y nos brindan buena información de depuración. Y, como veremos en un segundo, la misma matriz se puede usar en llamadas AJAX y no AJAX, lo que hace que el manejo de errores sea muy sencillo.

Esta matriz es rudimentaria. Contiene sólo el tipo de resultado (error o éxito) y el recuento de votos. En caso de falla, se utiliza el conteo de votos antiguo (descontando el voto del usuario, porque no fue agregado). En caso de éxito, incluimos el nuevo recuento de votos.

Finalmente, detectamos si la acción se inició mediante una llamada AJAX. Si es así, usamos la json_encode()función para preparar la matriz para nuestro código JavaScript. Si la llamada se realizó sin AJAX, simplemente enviamos al usuario de regreso al lugar de donde vino; obviamente, se les debería mostrar el recuento de votos actualizado. También podríamos poner el array en una cookie o en una variable de sesión para devolvérselo al usuario de la misma manera, pero esto no es importante para este ejemplo.

Siempre finalice sus scripts con una die()función, para asegurarse de obtener el resultado adecuado. Si no incluye esto, siempre obtendrá una -1cadena junto con los resultados.

La función para manejar usuarios desconectados es obviamente pobre, pero es simplemente un ejemplo. Puede ampliarlo haciendo que redirija al usuario a una página de registro o mostrando más información útil.

Agregar JavaScript a la mezcla

Debido a que ahora hemos manejado la acción del usuario usando métodos regulares, podemos comenzar a construir en JavaScript. Muchos desarrolladores prefieren este orden porque garantiza una degradación elegante. Para que nuestro sistema utilice AJAX, necesitaremos agregar jQuery, así como nuestro propio código JavaScript. Para hacer esto, al estilo WordPress, simplemente vaya a su complemento y agregue lo siguiente.

add_action( 'init', 'my_script_enqueuer' );function my_script_enqueuer() { wp_register_script( "my_voter_script", WP_PLUGIN_URL.'/my_plugin/my_voter_script.js', array('jquery') ); wp_localize_script( 'my_voter_script', 'myAjax', array( 'ajaxurl' = admin_url( 'admin-ajax.php' ))); wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'my_voter_script' );}

Esta es la forma en que WordPress incluye archivos JavaScript. Primero, registramos el archivo JavaScript para que WordPress lo sepa (así que asegúrese de crear el archivo y colocarlo en algún lugar del complemento). El primer argumento de la wp_register_script()función es el "identificador" de nuestro script, que es un identificador único. El segundo es la ubicación del guión. El tercer argumento es una serie de dependencias. Nuestro script requerirá jQuery, así que lo agregué como una dependencia. WordPress ya registró jQuery, por lo que todo lo que necesitábamos agregar era su identificador. Para obtener una lista detallada de los scripts que registra WordPress, consulte el Códice de WordPress .

Localizar el script no es estrictamente necesario, pero es una buena forma de definir variables para que las utilice nuestro script. Necesitamos usar la URL de nuestro archivo admin-ajax.php , pero como es diferente para cada dominio, debemos pasarla al script. En lugar de codificarlo, usemos la wp_localize_script()función. Agregamos el identificador del script como primer argumento, un nombre de objeto como segundo argumento y podemos agregar miembros del objeto como una matriz en el tercer parámetro. Todo esto se reduce a que, en nuestro archivo my_voter_script.js , podremos usar myAjax.ajaxurl, que contiene la URL de nuestro archivo admin-ajax.php .

Una vez que nuestros scripts se hayan registrado, podemos agregarlos a nuestras páginas poniéndolos en cola. No necesitamos seguir ningún orden en particular; WordPress utilizará el orden correcto según las dependencias.

Una vez hecho esto, en el archivo JavaScript my_voter_script.js , pegue el siguiente código:

jQuery(document).ready( function() { jQuery(".user_vote").click( function(e) { e.preventDefault(); post_id = jQuery(this).attr("data-post_id") nonce = jQuery(this).attr("data-nonce") jQuery.ajax({ type : "post", dataType : "json", url : myAjax.ajaxurl, data : {action: "my_user_vote", post_id : post_id, nonce: nonce}, success: function(response) { if(response.type == "success") { jQuery("#vote_counter").html(response.vote_count) } else { alert("Your vote could not be added") } } }) })})

Volvamos a lo básico. Este sería un buen momento para que aquellos de nosotros que somos nuevos en AJAX entendamos lo que está pasando. Cuando el usuario hace clic en el botón de votar sin usar JavaScript, abre un script y le envía algunos datos usando el GETmétodo (la cadena de consulta). Cuando se utiliza JavaScript, les abre la página. Al script se le proporciona la URL para navegar y los mismos parámetros, por lo que, aparte de algunas cosas menores, desde el punto de vista del script que se ejecuta, no hay diferencia entre que el usuario haga clic en el enlace y se envíe una solicitud AJAX.

Usando estos datos, la my_user_vote()función definida en nuestro complemento debería procesarlos y luego enviarnos de vuelta la matriz de resultados codificada en JSON. Debido a que hemos especificado que nuestros datos de respuesta deben estar en formato JSON, podemos usarlos muy fácilmente simplemente usando la respuesta como un objeto.

En nuestro ejemplo, lo único que sucede es que el contador de votos cambia su valor para mostrar el nuevo conteo de votos. En realidad, también deberíamos incluir algún tipo de mensaje de éxito para asegurarnos de que el usuario reciba comentarios obvios. Además, el cuadro de alerta de un fallo quedará muy feo; siéntete libre de modificarlo a tu gusto.

Conclusión

Con esto concluye nuestro rápido tutorial sobre el uso de AJAX en WordPress. Aún se podrían agregar muchas funciones, pero el objetivo principal de este artículo era mostrar cómo agregar correctamente la funcionalidad AJAX a los complementos. En resumen, los cuatro pasos involucrados son:

1. Realiza la llamada AJAX;
2. Cree la función que manejará la acción;
3. Agregue la función al gancho, que se creó dinámicamente para nosotros con el parámetro de acción;
4. Cree controladores de éxito según sea necesario.

Como se mencionó, asegúrese de que todo funcione bien sin JavaScript antes de agregarlo, para que el sitio web se degrade adecuadamente para las personas que lo han desactivado.

Tenga en cuenta que, debido a que usamos ganchos, también podemos vincular funciones existentes de WordPress a nuestras llamadas AJAX. Si ya tiene una función de votación increíble, puede vincularla después adjuntándola a la acción. Esto, y la facilidad con la que podemos diferenciar entre estados de inicio de sesión, hacen que el sistema de manejo AJAX de WordPress sea realmente muy poderoso.

Otras lecturas

• Jerga y términos web de la industria del diseño web
• Por qué AJAX no es suficiente
• Cómo convertirse en uno de los mejores desarrolladores de WordPress
• Una guía para principiantes para crear un sitio web de WordPress

(al, señor)Explora más en

• WordPress
• PHP
• javascript

Tal vez te puede interesar:

1. ¿Deberían abrirse los enlaces en ventanas nuevas?
2. 24 excelentes tutoriales de AJAX
3. 70 técnicas nuevas y útiles de AJAX y JavaScript
4. Más de 45 excelentes recursos y repositorios de fragmentos de código

Cómo utilizar AJAX en WordPress

¿Qué es AJAX?Cómo funciona AJAX en WordPress de forma nativaImplementando AJAX en WordPressConclusiónClase magistral de CSS moderno avanzado, con Manuel Ma

programar

es

2025-01-14

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente