Ajax en WordPress de manera correcta

[ 1 noviembre 2016 ] [ Actualizado: 22 junio 2020 ]
[ Autor: Jhon Marreros Guzmán ][ Core - Avanzado] [ ]

funcionalidad js

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_stylesheet_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_XXXXX

  En 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

Valora este artículo : (13 votos, promedio: 4,85 de 5)

Cargando...