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

WordPress es una excelente plataforma para crear sitios web; sin embargo, la herramienta de administración de contenido tiene sus inconvenientes. Si ha creado su sitio web en WordPress, entonces no es raro enfrentar el problema de la velocidad de carga lenta. Debido a la gran cantidad de complementos agregados junto con la afluencia de bases de datos y bases de código, en realidad no es raro. Sin embargo, es importante centrarse en la solución. ¡Usted no quiere que su audiencia se impaciente y se vaya debido a la baja velocidad y pierda negocios potenciales!

¿Qué pasaría si le dijéramos que puede optimizar la velocidad de su sitio web de WordPress integrando una función simple en sus complementos, conocida como AJAX? El término AJAX es la abreviatura de JavaScript asíncrono y XML. AJAX te ayuda a mejorar la velocidad de tu sitio web. Solo cargará una cierta parte de la página y mantendrá estática la página restante, mejorando así el tiempo de carga. Varios complementos y aplicaciones ya están utilizando esta función para ayudar a mejorar la velocidad de sus páginas web incluso hoy.

En poco tiempo, AJAX ha ganado una excelente reputación en el mundo del marketing digital y la mayoría de los propietarios de sitios web lo utilizan. Afortunadamente, WordPress brinda un excelente soporte para AJAX, lo que facilita la creación de complementos integrados en AJAX. Con el soporte de WordPress y nuestro artículo, debería poder integrar AJAX en sus complementos en muy poco tiempo.

A continuación se muestra una guía paso a paso para guiarlo a través del proceso.

Paso #1 - Crea tu complemento

El primer paso es crear un complemento simple que luego puede usar para desarrollar un producto más avanzado que responda mejor y reduzca el tiempo de carga de su página web. La buena noticia es que no tendrá ninguna dificultad para crear el complemento porque todo lo que necesita hacer es crear un archivo que incluya datos de una sola línea.

Puede hacer esto buscando en el archivo "wp-content/plugins" y generando una carpeta con el nombre que más le convenga. Una vez que haya hecho esto, ahora necesita abrir la carpeta y crear un archivo con el nombre: "name_of_the_plugin.php". Una vez que haya abierto este archivo en el editor de texto, escriba el siguiente código en el editor de texto.

<?php
/*
Plugin Name: Your choice
Plugin URI: http://yout-choice.com
Description: This loads post via ajax
Author: Your name
Author URI: http://yourname.com
Version: 1
*/

Paso n.º 2: agregue la biblioteca de JavaScript

Comienza este paso creando un directorio "ajaxloadpost". ¿Cómo hacerlo? Es bastante simple ya que puede instalarlo junto con el complemento de WordPress. Una vez que se completa este paso, ahora puede crear el complemento que ha codificado y ejecutarlo. Luego debe agregar el siguiente código en su ajaxloadpost:

define('AJAXLOADPOSTURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
function 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);

Debes dirigir WordPress a través de la URL del plugin creado; esta es la razón por la que necesita definir la variable con el nombre de AJAXLOADPOSTURL.

AJAX siempre se usa con una combinación de lenguajes de programación, trabajaremos con JavaScript en nuestro artículo restante. Busque ajaxloadpost.js en la carpeta \wp-content\plugins\ajaxloadpost\js\ y agréguele JavaScript. Ahora puede agregar la variable JavaScript a su secuencia de comandos.

Paso n.º 3: integración del controlador AJAX

Una vez que se ordena todo lo anterior, finalmente puede pasar a integrar el controlador AJAX en su complemento. El siguiente es el código para su controlador AJAX:

function ajaxloadpost_ajaxhandler() {
if ( !wp_verify_nonce( $_POST['nonce'], "ajaxloadpost_nonce")) {
exit("Wrong nonce");
}

$results = '';
$content_post = get_post($_POST['postid']);
$results = $content_post->post_content;

die($results);
}

El código anterior básicamente cumplirá dos tareas. Primero desarrollará una identificación para las publicaciones requeridas por el usuario. La segunda tarea es crear "nonce". No tienes que preocuparte por el segundo elemento por el momento (se ha descrito en detalle al final del artículo).

En su lugar, debe pasar al segundo paso, que es registrar su controlador AJAX en el directorio de WordPress. Esto permitirá que se llame a la función AJAX una vez que se solicite. Esta acción se puede lograr a través del código mencionado a continuación:

add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

Tener conocimientos previos sobre JavaScript es una gran ventaja para usted, si no es experto en este lenguaje de programación, busque la ayuda de un experto para que lo guíe a través de todo el proceso. También puede pulir sus habilidades de JavaScript a través de un tutor web o leyendo artículos aquí .

Paso #4 – Usar JavaScript para AJAX

Lo siguiente que necesita es escribir una función que permita a AJAX llamar y actualizar los datos que se han devuelto a través del controlador AJAX. La función es generalmente ajacloadpost.js. El siguiente código se puede utilizar para determinar la acción descrita anteriormente.

function ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
type: 'POST',
url: ajaxloadpostajax.ajaxurl,
data: {
action: 'ajaxloadpost_ajaxhandler',
postid: postid,
nonce: nonce
},
success: function(data, textStatus, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html('');
jQuery(loadpostresult).append(data);
},
error: function(MLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});

La función anterior tomará dos entradas, una de ellas es la identificación de la publicación y la segunda es nonce. Puede usar la función jQuery.ajax para realizar la llamada al servidor. Una vez que tenga éxito, actualice el <div> de id #loadpostresult con los datos que se devolvieron a través del controlador AJAX. El último bit del código es una condición en caso de error. Si ocurre un error, el sistema recibe una alerta con una ventana emergente.

Paso #5 – Mostrar las listas

Una vez que se hayan ordenado todas las funciones, puede pasar al último paso, que es mostrar el título de la publicación. Tenga en cuenta que cada clic puede ser hacia un título de publicación diferente y su código debería poder obtener el código que se ha llamado. El siguiente código puede ayudarte a lograr esto:

function ajaxloadpost_show_latest_posts($number = '5'){  

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

while ( $the_query->have_posts() ) :
$the_query->the_post();
$nonce = wp_create_nonce("ajaxloadpost_nonce");  

$arguments = get_the_ID().",'".$nonce."'";  

$link = ' <a>'. get_the_title().'</a>';  

$result.= '<li>' . $link . '</li>';
endwhile;
wp_reset_postdata();  

$result.= '<div></div>';  

return $result;
}  

function ajaxloadpost_shortcode_function( $atts ){
return ajaxloadpost_show_latest_posts();
}
add_shortcode( 'AJAXLOADPOST', 'ajaxloadpost_shortcode_function' );

¿Qué es "nonce"?

Se utiliza un nonce para verificar si la solicitud proviene de una fuente auténtica o no. Se puede generar un nonce usando una función simple de WordPress: “wp_create_nonce”. Se puede verificar más a través de un controlador AJAX usando la función: "wp_verify_nonce". El uso de esta función es extremadamente importante si está realizando una tarea delicada en su WordPress.

  Conclusión

  La integración de AJAX con sus complementos puede ayudar a mejorar visiblemente la capacidad de respuesta de sus páginas. Si no se siente cómodo con JavaScript, puede optar por un lenguaje de programación con el que le resulte más fácil codificar o buscar un experto que pueda ayudarlo a codificar su complemento. ¡Intente integrar AJAX en sus complementos y no se sentirá decepcionado!