Ajax y WordPress

La técnica Ajax, como explicamos en nuestro artículo introductorio sobre Ajax, se ha vuelto popular ya que nos permite actualizar una parte del contenido de la página web sin tener que actualizar la página. Esto hace que la experiencia del usuario sea mejorada.

Los sitios de WordPress, por supuesto, no son una excepción. Sin embargo, la forma en que usamos Ajax en WordPress difiere en comparación con el uso en otras aplicaciones web.

¿Qué es admin-ajax y cómo funciona?

WordPress ya ha implementado Ajax para sus propias funciones de administración, como guardado automático, actualizaciones instantáneas, moderación de comentarios, agregar/eliminar publicaciones, etc. Esto significa que está listo para que lo usemos simplemente utilizando las funciones relacionadas proporcionadas por WordPress.

El archivo clave para este propósito es el archivo admin-ajax.php , ubicado en la carpeta wp-admin, que se utiliza para crear una conexión entre el cliente y el servidor.

Dentro de este archivo, alrededor de la línea 159, puedes ver cómo todas las solicitudes de Ajax son registradas por algunos ganchos de acción.

 if ( ! empty( $_GET['action'] ) && in_array( $_GET['action'], $core_actions_get, true ) ) { add_action( 'wp_ajax_' . $_GET['action'], 'wp_ajax_' . str_replace( '-', '_', $_GET['action'] ), 1 ); } if ( ! empty( $_POST['action'] ) && in_array( $_POST['action'], $core_actions_post, true ) ) { add_action( 'wp_ajax_' . $_POST['action'], 'wp_ajax_' . str_replace( '-', '_', $_POST['action'] ), 1 ); }

wp_ajax_{$action} se refiere a los usuarios registrados y wp_ajax_nopriv_{$_REQUEST['action']} a los visitantes del sitio. Si desea crear una solicitud que incluya a todos los usuarios, tendremos que usar ambos ganchos.

Entonces, con la ayuda de estas acciones, puede conectar una función personalizada y pasar sus datos a WordPress para realizar una solicitud Ajax. Echemos un vistazo a esto en acción.

Ejemplo de WordPress Ajax

Usaremos el mismo ejemplo que hicimos en nuestro artículo introductorio de Ajax y crearemos un formulario que permita al usuario buscar en los títulos de los artículos y ver los resultados sugeridos sobre la marcha.

En el espacio de encabezado de nuestro tema, insertaremos la salida HTML para nuestro formulario de búsqueda. Usamos el tema Twenty Twenty-One, por lo que editamos el archivo header.php ubicado debajo de la carpeta principal del tema e insertamos las siguientes líneas antes de la línea <div id=”content” class=”site-content”>.

 <p><b>Search in articles:</b></p> <form> <input type="text" class="userInput"> </form> <p>Articles available: <span class="txtHint"></span></p>

Ahora el formulario que el usuario puede usar debería estar visible en la parte delantera.

NOTA: Aquí, editaremos directamente el archivo header.php del tema sin crear un tema secundario. Esta no es una buena práctica y tiene una serie de inconvenientes. Si desea obtener más información sobre la importancia de los temas secundarios, lea nuestro artículo relacionado. A los efectos de este ejemplo, hemos mantenido el código simple y centrado en el tema. Como tal, no se sugiere que use este código en un sitio web de producción.

Lo siguiente es incluir la función de JavaScript que enviará la solicitud. Usaremos jQuery en su lugar, ya que viene con WordPress y está listo para usar. Por supuesto, tenemos que incluir un script a la manera de WordPress.

Poner en cola nuestro script

Le informaremos a WordPress sobre la existencia del archivo JS, editando el archivo function.php del tema y poniendo en cola el script de esta manera. Nuestro archivo será el custom.js que hemos creado y colocado dentro de una nueva carpeta "js" debajo de la carpeta principal del tema.

 function ajax_search_script() { wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true ); $script_data_array = array( 'url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'search_titles_nonce' ), ); wp_localize_script( 'custom-script', 'ajax_object', $script_data_array ); wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'ajax_search_script' );

En la función ajax_search_script() , registramos y localizamos el script, y luego pusimos en cola los datos localizados con la función wp_enqueue_script() incorporada. Luego conectamos la función ajax_search_script() en wp_enqueue_scripts, que es la acción adecuada para usar cuando se ponen en cola scripts en WordPress.

El uso de wp_localize_script puede resultar confuso aquí porque, como función de WordPress, se diseñó originalmente para traducir cualquier cadena utilizada en su secuencia de comandos. Sin embargo, también se usa con frecuencia para pasar datos genéricos de PHP a JavaScript. En nuestro caso, para pasar la URL de Ajax y el objeto nonce.

El uso de nonce es necesario para que la solicitud jQuery Ajax pueda validarse como una solicitud que proviene del sitio web. Si no está familiarizado con el uso de nonces en WordPress, puede leer más en nuestro artículo relacionado.

El ajax_object es el valor del parámetro requerido $object_name de la función wp_localize_script() y es lo que se usará más adelante en el código jQuery.

¡Excelente! Ahora completemos nuestra función con el contenido correcto.

JavaScript

Dentro del archivo custom.js incluimos nuestro jQuery.

 jQuery(function($) { $('.userInput').on('keyup', function() { var input = $(this).val(); if(input != '') { var data = { 'action': 'get_articles_titles', 'search_text': input, 'nonce': ajax_object.nonce } $.post(ajax_object.url, data, function(response) { $('#txtHint').html(response); }); } }); });

Esta vez usamos jQuery y JSON para pasar los datos deseados, la acción, el texto de búsqueda, el nonce, al script del lado del servidor. La función de devolución de llamada get_articles_titles() será responsable de procesar los datos en el back-end, preparar los resultados y enviar una respuesta.

Además, como puede ver, usamos ajax_object de wp_localize_script con sus dos valores de matriz, nonce y url.

los ganchos

Ahora tenemos que vincular las acciones Ajax autenticadas con los ganchos necesarios que mencionamos anteriormente. Te recordamos que para poder incluir usuarios registrados y no registrados, debes usar ambos ganchos. En su archivo functions.php , agregue estas dos líneas debajo del código agregado antes para poner en cola el script.

 add_action('wp_ajax_get_articles_titles', 'get_articles_titles'); add_action('wp_ajax_nopriv_get_articles_titles', 'get_articles_titles');

Como ya habrás notado, el nombre del gancho es en realidad un prefijo seguido de nuestro nombre de acción. La función enganchada get_articles_titles es donde recuperaremos los títulos de los artículos. Definiremos esta función dentro de functions.php también.

 function get_articles_titles() { check_ajax_referer('ajax_nonce', 'nonce'); $input = $_POST['search_text']; $args = array( 'posts_per_page' => -1, 'post_type' => 'post', ); $the_query = new WP_Query( $args ); $autocomplete = "<br>"; if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); $title = get_the_title( get_the_ID() ); if ( strpos( strtolower($title), strtolower($input) ) !== false ) { $autocomplete .= $title . "<br>" ; } } wp_reset_postdata(); } echo $autocomplete; wp_die(); }

El check_ajax_referer es responsable de verificar que la solicitud de Ajax no se procese externamente.

Los parámetros necesarios aquí son la acción, que está relacionada con 'nonce' => wp_create_nonce( 'ajax_nonce' ) dentro de su función ajax_search_script() , junto con el valor relacionado con nonce.

¡Y eso es! Acabamos de crear un ejemplo muy simple de Ajax-PHP. En este punto, si prueba el código en un entorno de prueba de WordPress, debería funcionar así.

Donde el Servicio 1-5 son los títulos de nuestras publicaciones de prueba.

Conclusión

Este fue un artículo sobre cómo podemos aumentar la capacidad de respuesta y el rendimiento en un sitio web de WordPress aprovechando los beneficios de Ajax. ¡Con suerte, ya está listo para usar técnicas similares en su propio sitio web y disfrutar mejorando la experiencia del usuario!