Skip to main content

Usando AJAX en WordPress

17 febrero, 2023

Para usar AJAX en wordpress primero debemos registrar un archivo js y pasarle como variable la ruta al archivo admin-ajax.php de wordpress

wp_enqueue_script('ajax_functions',get_stylesheet_directory_uri(). '/assets/js/ajax.js', array('jquery'), '1.0', true );

wp_localize_script('ajax_functions','ajax_vars',array(
	'url' => admin_url('admin-ajax.php')
));

El código anterior se debe meter en una función my_function() y posteriormente registrar con add_action( 'wp_enqueue_scripts', 'my_function', 100); . Se recomienda guardar el archivo ajax.js en la ruta /assets/js/ como se muestra en el ejemplo. En dicho archivo colocaremos las peticiones ajax conforme se requieran. A continuación se muestra el ejemplo de una:

(function ($) {
	function mostrarModalAplicacion(id){
		$.ajax({
			url: ajax_vars.url,
			type: 'post',
			data: {
				action: 'accion_async',
				id_aplicacion: id
			},
			beforeSend: function () {
				// code
			},
			success: function (resultado) {
				// code
			}

		});
	}
})(jQuery);

Como es de notarse, la url de la petición ajax se establece con ajax_vars.url ya que esta variable la definimos cuando registramos el script ante wordpress. Otro ejemplo de petición ajax, en caso de que tengamos un formulario en donde contemos con algo como <input type="hidden" name="action" value="accion_async">, podría realizarse aprovechando la función serialize() de la siguiente manera:

function filtrarAplicaciones(){
	formulario = $('#filtrado');
	$.ajax({
		url: ajax_vars._url,
		data: formulario.serialize(), 
		type: formulario.attr('method'), 
		beforeSend: function (xhr) {
			// código
		},
		success: function (data) {
			// código
		}
	});
}

Ahora bien, como podemos notar de ambos ejemplos se declara que ajax ejecutará una función llamada accion_ajax. Para esto se recomienda crear un archivo en /inc/ llamado ajax.php y en functions.php integrarlo con require_once('inc/ajax.php');. Dentro del archivo ajax.php podemos finalmente establecer la lógica que se va a ejecutar en php para crear una cadena de texto (posiblemente json). Esta cadena se regresará a ajax a través de success en el archivo ajax.js.

function funcion_async() {
	$resultado = 'Esto es un ejemplo';
	echo '$resultado;
}
add_action('wp_ajax_nopriv_accion_async','funcion_async');
add_action('wp_ajax_accion_async','funcion_async');
Close Menu