Puedes implementar Ajax en WordPress de diferentes maneras, pero, ¿por qué no usar lo que WordPress recomienda?, con esto, nuestro código estaría mejor integrado con el nucleo de WordPress.
1- Ejemplo a implementar
Para ejemplificar el uso de Ajax en WordPress veremos cómo mostrar todo el contenido de una entrada directamente cuando hacemos click en el enlace de “Continúa leyendo” sin necesidad de cambiar de página. Usaremos el theme por defecto Twentyfifteen para realizar esto.
2- Generalidades
Se puede implementar Ajax directamente siguiendo los pasos 1,2 y 3 del diagrama adjunto, sin embargo en WordPress necesitamos antes enviar una variable que tendrá la ruta del archivo admin-ajax.php, de allí que he colocado el paso cero, este paso también será usado para hacer comprobaciones de carga de script y para implementar seguridad con el envío de nonces.
El envío de la ruta del archivo admin-ajax.php es una buena práctica en WordPress.
3- Registro de Script y envío de la ruta de admin-ajax.php
Este sería el paso cero, este código se colocaría en un archivo .php, en nuestro ejemplo usaremos el archivo functions.php del theme.
//Insertar Javascript js y enviar ruta admin-ajax.php
add_action('wp_enqueue_scripts', 'dcms_insertar_js');
function dcms_insertar_js(){
if (!is_home()) return;
wp_register_script('dcms_miscript', get_template_directory_uri(). '/js/script.js', array('jquery'), '1', true );
wp_enqueue_script('dcms_miscript');
wp_localize_script('dcms_miscript','dcms_vars',['ajaxurl'=>admin_url('admin-ajax.php')]);
}
Lo que hace este código:
- Primero se usa el hook wp_enqueue_scripts para registrar el script a través de la función dcms_insertar_js.
- Dentro de la función dcms_insertar_js se valida si estamos en la home.
- Luego se procede al registro del archivo javascript script.js.
- Finalmente se envía la variable dcms_vars.ajaxurl a través del envío de variables desde PHP a Javascript con la función wp_localize_script.
4- Código Javascript con evento Click
Este sería el código para el paso 1 y el paso 3, este código será parte del archivo script.js registrado anteriormente:
(function($){
$(document).on('click','.more-link',function(e){
e.preventDefault();
link = $(this);
id = link.attr('href').replace(/^.*#more-/,'');
$.ajax({
url : dcms_vars.ajaxurl,
type: 'post',
data: {
action : 'dcms_ajax_readmore',
id_post: id
},
beforeSend: function(){
link.html('Cargando ...');
},
success: function(resultado){
$('#post-'+id).find('.entry-content').html(resultado);
}
});
});
})(jQuery);
Lo que hace este código:
- Usamos JQuery para implementar el código.
- Usamos el evento Click del link actual.
- Obtenemos el ID del link actual, esto lo capturamos de la url del link.
- Definimos la función de Ajax.
- Pasamos la variable dcms_vars.ajaxurl pasada en el paso cero.
- Definimos el tipo de envío por post
- En la data definimos la variable de ID obtenida anteriormente
- En la data también usamos una cadena “dcms_ajax_readmore” que será parte del hook del paso 2
- El paso 3 de actualización del HTML es definido por el evento success en donde actualizamos el contenedor del contenido.
5- Proceso y envío de datos desde PHP
Este es el paso 2, cuando ocurre el evento de Click entonces se llama a esta porción de código PHP, en nuestro ejemplo este código también estará dentro del archivo functions.php
//Devolver datos a archivo js
add_action('wp_ajax_nopriv_dcms_ajax_readmore','dcms_enviar_contenido');
add_action('wp_ajax_dcms_ajax_readmore','dcms_enviar_contenido');
function dcms_enviar_contenido()
{
$id_post = absint($_POST['id_post']);
$content = apply_filters('the_content', get_post_field('post_content', $id_post));
//sleep(2);
echo $content;
wp_die();
}
Lo que hace este código:
- Primero vemos que se registran dos hooks, un hook público y otro para usuarios registrados, usaremos la misma funcionalidad en ambos casos, los hooks tienen esta estructura :
wp_ajax_nopriv_XXXXX
wp_ajax_XXXXXEn donde XXXXX es la cadena action “dcms_ajax_readmore” pasada desde el script.js en el paso1
- Dentro de la función dcms_enviar_contenido obtengo el ID dado por el archivo .js
- Uso la funcionalidad de WordPress para obtener el contenido de una entrada de acuerdo a su ID.
- Finalmente imprimo el contenido y con wp_die() me aseguro de que no se ejecute más código.
6- Resultado Final
Finalmente se verá algo similar a lo siguiente:
El código que se ha usado en este ejemplo se puede encontrar también en el siguiente repositorio de GitHub
¿Aún con dudas?, en el siguiente video se explica cada uno de los puntos anteriores
Artículos Relacionados
(10 votos, promedio: 5,00 de 5)
Cargando…
¿cómo haría? si quiero consumir un xml de una url, como api por metodo post.
¿como le indico que la url es de otro servidor, de otra web?
Busca la variable ajaxurl en el código, puedes definirla directamente en el archivo javascript ya que no sería necesaria pasarla desde WordPress. Sería mejor si tu servicio externo te devuelve un objeto JSON.
Hola, como podemos implementar con jquery select dependientes en WordPrees?
No me queda del todo claro tu consulta, podrías enviar un ejemplo, mejor comunícate por el formulario de contacto del sitio.
Hola gracias por el tutorial, muy bien explicado.
1. Como lo puedo utilizar con paginas de wordpress?
2. Como puedo eliminar del DOM lo ya cargado?
Gracias.
Hola, en el ejemplo las páginas no tienen leer más, esto se aplica usualmente a entradas. Si quieres eliminar elementos del DOM dinámicamente sólo sería necesario javascript.
Muchas gracias, es la mejor explicacion que he encontrado.
Una pregunta, en el caso en que tenga que colcoar mas de una funcion ajax en el archivo functons.php, como wordpress permitiria hacerlo?
Hola, supongo que te refieres al registro de los scripts, esto es sólo una vez, es decir hasta el punto 3 es igual. Agregarás funciones a partir del punto 4, es decir código javascript y PHP con el nombre de las funciones, el nombre al ser diferente no habrá problemas, si vas a agregar mucho código mejor evalúa crear un plugin en lugar de usar el archivo functions.php.