Implementar Ajax en un Child Theme
En esta entrada te enseñaremos como realizar llamadas via AJAX desde un Child Theme de WordPress o BuddyPress y no morir en el intento.
1.- En el archivo functions.php de nuestro child theme cargamos las librerías que nos permitran usar Ajax en WP mediante la función de php require:
require( TEMPLATEPATH . '/_inc/ajax.php' );
2.- En segundo lugar cargamos el framework de JQuery evitando que otras instancias del mismo puedan generarnos problemas:
function cargar_mi_jquery () {
wp_deregister_script(‘jquery’); wp_register_script( ‘jquery’, get_stylesheet_directory_uri() . ‘/js/jquery-1.8.1.js’); wp_enqueue_script( ‘jquery’ ); } add_action(‘wp_enqueue_scripts’, ‘my_scripts_method2’);
3.- Por seguridad, WP nos solicita que le espcifiquemos que tiene que autorizar llamadas a ciertas funciones que se pueden ejecutar sin el consentimiento del usuario.
Esta autorización se realiza mediante el wp_nonce
En la página donde tenemos el formulario desde el cual se realizara la llamada via Ajax, cremos nuestro nonce con el siguiente código:
$ajax_nonce = wp_create_nonce ( “mi_control” );
4.- En el mismo formulario, mediante JQuery, obtenemos los valores de un campo de tipo input o cualquier otro (esto es opcional) y hacemos la llamada via Ajax.
IMPORTANTE: Ajax en WP no funciona realizando llamadas en background a un archivo externo alojado en el mismo site, sino que realizando una llamada a una función precargada y a la cual le hemos especificado que puede ser llamada via “Ajax” y que veremos en un punto posterior.
IMPORTANTE: A WP le gusta que en vez de usar el dólar en la selección de los objetos, se escriba la nomenclatura completa, por lo tanto las llamadas las haremos de la siguiente manera:
jQuery(‘#pulsa_aqui’).click
jQuery(‘#nombre_de_mi_campo’).val()
La llamada a dicha función la realizamos mediante el siguiente código de jquery:
<script type=”text/javascript”> jQuery(document).ready(function () { //Para llamar a esta funcion tenemos un elemento de tipo button o lo que queramos con el ID pulsa_aqui jQuery(‘#pulsa_aqui’).click(function () { jQuery.post(ajaxurl, { //En el action especificamos laaccion a la cual vamos a llamar (pseudoAjax) action: ‘recorridos’, //Le mandamos la cookie del sitio para que las librerias de Ajax de WP vean que no hemos salido del sitio ‘cookie’: encodeURIComponent(document.cookie), //Pasamos el nonce de seguridad, que posteriormente recogeremos en la funcion a la que estamos llamandon y en funcion de si es correcto o no lo es // la funcion continuara ejecutandose o no. security: ‘<?php echo $ajax_nonce; ?>’, //Aqui mandamos el valor de campo de texto que deseemos (uno o varios) y se lo enviamos a nuestra funcion //Es importante tener en cuenta que los campos de texto no se envian como parametros de la funcion que queremos que se ejecute, //sino que hay que recogerla mediante POST o GET en fucnion de como lo estemos enviando con el metodo Jquery.post o JQuery.get ‘nombreCampo’: encodeURIComponent(jQuery(‘#nombre_de_mi_campo’).val()), }, function (response) { //Una vez nuestra funcion nos esta devolviendo los valores qu queremos, los mostramos insertandolos en un div. jQuery(“#recorridos”).html(response); }); }); }); </script>
5.- En el archivo functions.php de nuestro theme, debemos hacer el include del archivo en el que tenemos la función a la que estamos llamando via Ajax, o bien podemos pegar directamente dicha función en el archivo functions.php
En este caso, lo haremos mediante un include.
include “mi_funcion_ajax.php”;
6.- Ahora vamos a ver como debe ser nuestra función en nuestro archivo mi_funcion_ajax.php
function consultar_recorridos() {
//En el punto 3 he creado el nonce de seguridad, aquí comprobamos la validez de ese nonce
check_ajax_referer ( mi_control, ‘security’ );
//a continuación realizo las acciones que quiero y devuelvo los valores que deseo
echo “te devuelvo este dato mediante Ajax en WP”;
}
7.- Es muy importante tal y como decíamos en el punto 4, especificarle a WP que tiene que escuchar las llamadas hacia nuestra función. Tenemos que especificarle que podemos llamarla en cualquier momento .
Formato de nuestra acción para que funcione correctamente:
add_action( ‘wp_ajax_nopriv_<ACCION_DEFINIDA_EN_JQUERY>’, <NOMBRE_DE_LA_FUNCION_A_EJECUTAR> );
add_action( ‘wp_ajax_<ACCION_DEFINIDA_EN_JQUERY>’, <NOMBRE_DE_LA_FUNCION_A_EJECUTAR> );
Os pongo, teniendo en cuenta el código de nuestra llamada en Jquery (action: ‘recorridos’), como deben quedar estas lineas:
add_action ( ‘wp_ajax_recorridos’, ‘consultar_recorridos’ ); add_action ( ‘wp_ajax_nopriv_recorridos’, ‘consultar_recorridos’ );
