Cómo hacer que su complemento de WordPress responda usando AJAX

Última actualización - 8 de julio de 2021

AJAX es la última metodología de desarrollo y la que poco a poco está ganando impulso debido a la facilidad de uso que brinda a sus desarrolladores. Simplemente integrando AJAX dentro de sus complementos de WordPress, esencialmente está reduciendo la necesidad de recargar constantemente toda la página web. En otras palabras, AJAX hará que su complemento de WordPress sea receptivo y permitirá a los usuarios obtener nueva información recargando solo esa parte específica mientras mantiene el resto de la página estática.

Esto no solo hace que las páginas web o los complementos respondan, sino que también reduce el tiempo de espera a la mitad. Existen varios complementos y aplicaciones que emplean Ajax para crear mejores experiencias para los usuarios. Por ejemplo, WooCommerce usa la función Ajax para mejorar el comportamiento de Agregar al carrito.

Teniendo en cuenta sus beneficios, le enseñaremos cómo hacer que sus complementos de WordPress respondan a través de AJAX.

Crear un complemento

Antes de que pueda trabajar su magia con AJAX, debe tener una base básica de complemento que pueda usar para crear un producto avanzado y receptivo.

Crear un complemento no es difícil, ya que todo lo que necesita es la creación de un archivo que contenga contenido de una sola línea. Para este propósito, el primer paso es navegar hasta el archivo wp-content/plugins y crear una nueva carpeta con el nombre de su elección. Abra la carpeta y cree un nuevo archivo name_of_the_plugin.php. Ahora, visualice el archivo en cualquier editor de texto y escriba la siguiente información:

<?php

/*

Nombre del complemento: Coolness Inducer

URI del complemento: http://coolness-inducer.com

descripción: >-

un complemento perfecto para hacer que su sitio web sea más genial.

Versión: 1.3

Autor: Sra. Vader

Autor URI: http://msvader.com

Licencia: GPL2

*/

?>

Antes de hacer esto, cree un directorio ajaxloadpost en la instalación del complemento de WordPress. Una vez que hagas esto, crea el complemento y actívalo. Después de esto, incluya la siguiente información dentro de su ajaxloadpost.

define('AJAXLOADPOSTURL', WP_PLUGIN_URL.”/”.dirname(plugin_basename(__FILE__))));

función ajaxloadpost_enqueuescripts() {

wp_enqueue_script('ajaxloadpost', AJAXLOADPOSTURL.'/js/ajaxloadpost.js', array('jquery'));

wp_localize_script( 'ajaxloadpost', 'ajaxloadpostajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

}

add_action('wp_enqueue_scripts', ajaxloadpost_enqueuescripts);

Luego, defina la variable AJAXLOADPOSTURL porque la necesitará para dirigir WordPress a la URL de su complemento. Ahora debe poner en cola sus scripts, lo que puede hacer agregando ajaxloadpost_enqueuescripts a wp_enqueue_scripts de WordPress.

Tenga en cuenta que AJAX nunca se puede usar en su forma original. Siempre se utilizará en combinación con otros lenguajes de programación, es decir, jQuery o JavaScript. En este caso, trabajaremos con JavaScript, por lo que debe tener una comprensión básica del mismo.

Continuando, agregue JavaScript a ajaxloadpost.js que encontrará en la carpeta \wp-content\plugins\ajaxloadpost\js\. Siga esta acción creando una carpeta JS y coloque ajaxloadpost.js en ella.

Ahora, use WordPress wp_localize_script para agregar la variable JS requerida. Esta acción proporcionará una estructura a su directorio y pondrá en cola sus scripts.

Escritura del controlador AJAX

Para escribir el controlador AJAX, necesitará los siguientes códigos:

función ajaxloadpost_ajaxhandler() {

si ( !wp_verify_nonce( $_POST['nonce'], “ajaxloadpost_nonce”)) {

exit(“Nonce incorrecto”);

}

$resultados = ”;

$content_post = get_post($_POST['postid']);

$resultados = $contenido_post->post_content;

morir ($resultados);

}

add_action('wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');

add_action('wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');

Completar esta acción dará como resultado dos resultados. Primero, creará la ID de las publicaciones que requieren los usuarios y segundo es que creará nonce. ¡Pero eso no viene al caso! Una vez que los códigos del controlador AJAX estén en su lugar, debe pasar al siguiente paso que es registrar el controlador AJAX en el directorio de WordPress. Hacer esto hará que el complemento de WordPress responda a las llamadas de AJAX. Puedes lograrlo a través de estos códigos:

add_action('wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');

add_action('wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');

Conceptos básicos de JavaScript y AJAX

Con la llamada AJAX y el controlador AJAX en su lugar, debe crear una función JS que conecte los dos puntos. El siguiente JavaScript lo ayudará a lograr esta acción que colocará en su ajaxloadpost.js:

function ajaxloadpost_loadpost(postid,nonce) {

jQuery.ajax({

tipo: 'POST',

URL: ajaxloadpostajax.ajaxurl,

datos: {

acción: 'ajaxloadpost_ajaxhandler',

postid: postid,

momento: momento

},

éxito: función (datos, estado de texto, XMLHttpRequest) {

var loadpostresult = '#loadpostresult';

jQuery(loadpostresult).html(”);

jQuery(loadpostresult).append(datos);

},

error: función (MLHttpRequest, textStatus, errorThrown) {

alerta (error lanzado);

}

});

}

Al igual que el paso mencionado anteriormente, esta acción también creará dos resultados, es decir, nonce e ID de publicación.

El siguiente paso también requiere competencia en jQuery. Entonces, si tus habilidades son un poco rústicas, ¡este artículo te resultará útil!

Continuando, use la función jQuery.ajax para hacer una llamada AJAX a los servidores apropiados. En los códigos anteriores, la URL es la URL admin-ajax.php que se puede encontrar en la variable de JavaScript que registramos al momento de poner en cola los scripts. Además, especifique esta acción con el nombre del controlador de acción que se registró con WordPress y también publique el nonce y la ID de la publicación.

Si todo va bien, puede actualizar <div> del id #loadpostresult y reemplazar el contenido obtenido con el controlador AJAX.

Poner una cara a su código

Ahora es el momento de crear códigos que muestren los títulos de las publicaciones apropiadas y muestren la información que los usuarios desean a través de una llamada AJAX. Aquí están los siguientes códigos:

función ajaxloadpost_show_latest_posts($número = '5'){

$resultados =”;

$the_query = new WP_Query( 'posts_per_page='.$number );

while ( $the_query->have_posts() ) :

$la_consulta->la_publicación();

$nonce = wp_create_nonce(“ajaxloadpost_nonce”);

$argumentos = get_the_ID().”,'”.$nonce.”'”;

$enlace = ' <a onclick=”ajaxloadpost_loadpost('.$argumentos.');”>'. obtener_el_titulo().'</a>';

$resultado.= '<li>' . $enlace . '</li>';

mientras tanto;

wp_reset_postdata();

$resultado.= '<div id=”loadpostresult”></div>';

devolver $resultado;

}

función ajaxloadpost_shortcode_function ($ atts) {

devolver ajaxloadpost_show_latest_posts();

}

add_shortcode('AJAXLOADPOST', 'ajaxloadpost_shortcode_function');

Con suerte, este artículo lo ha ayudado a hacer que su complemento de WordPress sea receptivo. Déjanos un comentario si tienes alguna consulta.

Otras lecturas

• El diseño receptivo lo ayuda a mejorar las tasas de conversión.
• Los mejores temas responsivos de WooCommerce