AJAX en WordPress. La manera correcta

AJAX Juan Ignacio Alberola

AJAX Juan Ignacio Alberola

AJAX, ese nombre que para los no entendidos puede sonar a detergente pero para los que nos dedicamos a esto enseguida nos viene a la mente Asynchronous JavaScript And XML, una tecnología que nos permite hacer peticiones al servidor de manera asíncrona y hacer cambios en nuestras páginas web sin necesidad de recargarlas.

Normalmente es un script en javascript el que hace una petición al servidor que devuelve unos datos y es el script el que modifica la página web con los datos obtenidos. Por ejemplo, imaginaos un desplegable en el que seleccionáis un tratamiento de un SPA y en otro desplegable os aparecen dinámicamente las horas disponibles para reservar. A través de un script se ha solicitado al servidor las horas disponibles para la selección del desplegable del tratamiento.

Actualmente para simplificar las llamadas AJAX usamos frameworks como jQuery que sin duda nos hacen la vida mucho más fácil.

Y ahora vamos al lío… WordPress soporta AJAX de forma nativa.

El fichero admin-ajax.php

Lo tenemos dentro de la carpeta wp-admin, inicialmente creado porque es usado para todas las funciones que hacen peticiones AJAX desde el panel de administración pero al final se usa también para la parte pública de la web. Todas las peticiones AJAX deben ir a través de este script en PHP.

Es decir, admin-ajax.php deberá ser el fichero PHP a través del cual se llame a una acción que devuelva contenido.

Peticiones AJAX paso a paso

Vamos a hacer una petición AJAX desde la parte pública de la web.

Lo mejor es que nos centremos en un ejemplo así que vamos a hacer una petición getJSON al servidor. Queremos que al pulsar un botón el servidor nos devuelva ciertos datos.

<input type="button" value="Pedir" name="pedir" id="pido_ajax"/>

Para pedir un contenido codificado como JSON vamos a usar el método de jQuery getJSON aunque podemos usar los diferentes métodos que nos ofrece jQuery.

Nuestro fichero javascript, vamos a llamarlo mi-ajax.js debería contener algo como lo siguiente:

jQuery(document).ready(function(){
jQuery('#pido_ajax').click(function() {
jQuery.getJSON("/wp-admin/admin-ajax.php",
                {action: 'get_treatments', data1: data1value, data2: data2value},
        function(data) { //Procesamiento de los datos de vuelta }

})
})

Como podéis ver la URL de petición apunta a admin-ajax.php. Es MUY importante especificar en los datos la variable action y ahora vais a ver el por qué.

Nos vamos ahora a nuestro fichero functions.php, que contiene toda la funcionalidad del theme (o directamente en este fichero o en ficheros requeridos desde este).

Tenemos que seguir varios pasos.

  1. Encolar el fichero javascript que hemos creado.
  2. Asociar una función de callback a la acción que hemos pasado como parámetro desde el javascript.
  3. Escribir la función que devuelve los datos al javascript.

Vamos a por ello.

// 1. Encolamos nuestro script
add_action( 'wp_enqueue_scripts', 'jiac_public_scripts' );
function jiac_public_scripts() {
    wp_enqueue_script('mi-ajax', get_template_directory_uri() . '/js/mi-ajax.js', array('jquery'));
}

// 2. Asociamos una función a la acción
add_action( 'wp_ajax_get_treatments', 'jiac_get_treatments' ); // Para usuarios logeados
add_action( 'wp_ajax_nopriv_get_treatments', 'jiac_get_treatments' ); // Para usuarios no logeados

// 3. Escribimos la función de callback
function jiac_get_treatments() {

   // Petición a la Base de Datos
   // Preparación de los datos
   echo json_encode($datos_bd);
   die(); // Importante finalizar el script
}

Con todo esto la función jiac_get_treatments «escupirá» en formato JSON los datos obtenidos de la base de datos o cualquiera otros que queramos y será la función del javascript la que se encargue de leer este dato «escupido» para colocarlo en la parte de la web que se quiera.

Aunque parezca un poco tedioso luego no cuesta tanto y los efectos de actualizar una página sin necesidad de recargarla pueden llamar la atención visualmente, por ejemplo, imaginaos un buscador que cargue los resultados en la misma página sin hacer de nuevo una recarga o un portfolio con filtros.

Espero que este post os haya servido de ayuda. Entiendo que no es un post de los que vengo haciendo últimamente y este tiene un poco más de chicha, un poco de programación, pero de vez en cuando no está mal 🙂

¿Vosotros habéis usado AJAX en WordPress o en otras plataformas?

 

 

(Visited 5.139 times, 1 visits today)

19 comentarios en “AJAX en WordPress. La manera correcta”

  1. Buenas tardes,

    Sabes si se puede implementar ajax en el buscador nativo de wordpress? Mi web (la del enlace) usa el buscador nativo+relevanssi pero necesitaría implementarle ajax. todo lo que he encontrado me crea otra caja de búsqueda que la verdad no necesito ya que ni se como ocultar la de wordpress, y la de casi todos los plugins lo que añaden es un widget. Si me arrojas aunque sea un poco de luz te lo agradecería.

    Por cierto, muy buen post. Gracias por la información.

    Saludos

    1. Juan Ignacio Alberola Colomo

      Hola Francisco,

      cuando dices implementar AJAX en el buscador de WordPress no se si te refieres a un autocompletador o un listado de posibles cadenas para completar. Tienes este plugin: https://wordpress.org/plugins/ajax-search-lite/ que te crea una caja de búsqueda AJAX, también tiene versión PRO y viene con un shortcode que puedes poner en cualquier parte incluido el código PHP con la función do_shortcode(). En tu caso tendrías que buscar la parte del código de la plantilla donde aparece el buscador para sustituirlo con este.

      Aquí tienes otro que ya viene con función PHP: https://wordpress.org/plugins/searchwp-live-ajax-search/

      Si quieres gastarte algo de dinero en Codecanyon también tienes opciones: http://codecanyon.net/item/ajax-search-pro-for-wordpress-live-search-plugin/3357410

      ¡Espero haberte ayudado!

      1. Buenos días Juan Ignacio! Ante todo, gracias por tu respuesta. Yo necesito un autocompletador pero que use la caja de búsqueda que ya existe en wordpress-tema(no śe exactamente si la caja que aparece en mi web es la de wordpress o es la del tema), y no que tenga que poner otra caja de búsqeda mediante widget. He encontrado el plugin ajaxy live search que hace exactamente lo que quiero, incluso el propio autor te explica que añadas una funcion al function.php, pero esta opción me rompe la web. He encontrado que colocandolo en el header, me aparece la caja pero descentrada.
        Te dejo mi web por si quieres echarle un vistazo http://htg-sports.com.

        Gracias de nuevo y saludos

        1. Juan Ignacio Alberola Colomo

          Hola Francisco!

          He mirado el código de tu web y el buscador superior lo tienes dentro del siguiente elemento de lista, seguramente en header.php:

          <li class="search"><form role="search" method="get" id="searchform" action="http://htg-sports.com/"> <label class="screen-reader-text" for="s">Buscar productos:</label> <input type="search" results="5" autosave="http://htg-sports.com/" class="input-text" placeholder="Buscar producto" value="" name="s" id="s"> <input type="submit" class="button" id="searchsubmit" value="Buscar"> <input type="hidden" name="post_type" value="product"></form></li>

          En este caso tendrías que quitar el formulario e incrustar el shortcode que te genere la configuración del plugin, quedaría algo como:

          <li class="search"><php echo do_shortcode('shortcodegenerado'); ?></li>

          Desconozco si el plugin también te genera alguna función en PHP, pero si se diese el caso quedaría así:

          <li class="search"><php funcion_generada(); ?></li>

          La única manera que conozco de usar el propio buscador (sin usar plugins) que ya existe es la de programarlo tu mismo, pero hay que meterse en jquery, php y dedicarle tiempo.

          Ten en cuenta que cualquier cambio que hagas en los ficheros de la plantilla, incluido functions.php se perderán si alguna vez actualizas a una nueva versión de la plantilla.

          Un saludo.

          1. Buenos días Juan Ignacio!

            Muchas gracias por la pronta respuesta. Me pongo a investigar durante el fin de semana y te digo como van mis experimentos. Por cierto, ya tienes un seguidor más 😉

            Saludos

          2. Juan Ignacio Alberola Colomo

            Hola Francisco 🙂

            De nada hombre! Cualquier cosa en la que te pueda ayudar no dudes en decírmelo, no sé si podré, pero al menos lo intentaré.

            Un saludo!

  2. Buenos días Juan Ignacio! Después de mucho experimentar al final tuve que colocar la función que te genera el plugin en el header.php y en un archivo más del tema para que hiciera la llamada (tuvo que ser la función php y no el shortcode que me genera el plugin, ya que este me rompía la página). Ya se muestra correctamente la caja de búsqueda del plugin, aunque ahora se me presenta un inconveniente. Me sale ligeramente descentrada. Anteriormente me salía junto al icono del carrito y del check out. Y la verdad, no lo entiendo, porque está escrito en el mismo lugar del header donde se llamaba a la otra caja de búsqueda. Puedo añadir algún código para decirle la posición? Porque ahora se queda la barra superior gris demasiado ancha para mi gusto.

    Muchas gracias de antemano por tu ayuda.

    Saludosssss!!!!!

    1. Juan Ignacio Alberola Colomo

      Eh! Perdona por tardar en contestar!

      ¡Queda muy bien! Es lo que te comenté. Para mí siempre es mejor colocar la función que te genera el plugin a do_shortcode.

      Prueba a añadir en style.css del tema lo siguiente:

      .sf_container {float: right; margin-top: 12px;}
      

      Aunque me he dado cuenta que has colocado la función dentro del elemento UL, prueba a poner la función dentro de un elemento LI que sea hijo de ese UL.

      http://i.imgur.com/hAv5yg6.png

      Si quieres me puedes mandar a través de mi correo electrónico el fichero header para ver cómo has colocado la función.

      Un saludo.

      1. Buenas Juan Ignacio,

        Perdona la tardanza. Al final he realizado otro cambio y me ha quedado como yo quería. Creo que ahora queda muy elegante. A lo mejor en el centro quedaría mejor pero de momento me conformo. Pasa por la web y échale un vistazo. MUCHAS GRACIAS POR TU DESINTERESADA E INESTIMABLE AYUDA!!!!!!!

  3. Buenas,

    Ante todo, muchas gracias por dedicar tu tiempo a ayudar a los demas.

    He seguido a raja tabla el ejemplo, pero no me funciona.

    He añadido el codigo php, al archivo functions.php de mi child theme, y el mi-ajax.js a la carpeta js del parent theme.

    el caso es que he probado de mil formas, y no hace nada cuando hago click sobre el boton, he probado con cualquier otro codigo javascript y si lo ejecuta, pero con la llamada ajax no hace absolutamente nada.

    Estoy desesperado ya…

    Me podrias decir que puede estar dando problemas?? 🙁

    Un saludo y muchas gracias por tu dedicacion.

    1. Juan Ignacio Alberola Colomo

      Hola Antonio!

      Bueno, bueno, vamos a ver. Por partes.

      Hablas de child y parent theme, si la implementación la estás haciendo en el child theme no modifiques nada del parent, es decir, el fichero js deberá ir en una carpeta del child theme, pongamos la carpeta js.

      Cuando encolas el fichero mi-ajax.js que estará dentro de la carpeta js del child theme como te he comentado no tienes que usar la función get_template_directory_uri() sino que debes usar get_stylesheet_directory_uri().

      Revisa también el nombre del action que pasas por javascriot, que coincida con el hook de wp_ajax_.

      De todas maneras te invito a mandarme por correo electrónico (hola[ARROBA]juanignacioalberola.com) tu código para así poder verlo y echarte una mano.

      Un saludo y espero noticias.

  4. Buen dia saludos estoy implementando el codigo que tiene de ejemplo pero no logro ningunresultado tal vez puedeas darme alguna sugerencia adicional si esta faltando algo en principio quiero solo que al pulsar el boton me de un mensaje simplemente para saber que funciona

    1. Juan Ignacio Alberola Colomo

      Hola Eduardo,

      a bote pronto te aconsejo que mires estos puntos:

      ¿Estás pasando action desde el javascript?
      ¿Estás añadiendo las acciones correctamente? Fíjate que si el action del javascript es recuperar_tratamientos el action debe ser wp_ajax_recuperar_tratamientos.
      ¿El formato de devolución de la función PHP está bien codificado?

      Te aconsejo que uses la herramienta para desarrolladores de Chrome o el Firebug. Por otro lado recuerda y es muy importante añadir tu javascript al fichero functions.php con el gancho de add_action( ‘wp_enqueue_scripts’, ‘tufuncion’);

      Si necesitas más ayuda no dudes en escribirme.

  5. En funtion.php tengo esto
    add_action( ‘wp_enqueue_scripts’, ‘jiac_public_scripts’ );
    function jiac_public_scripts() {
    wp_enqueue_script(‘nuevopedido’, get_template_directory_uri() . ‘/nuevopedido.js’, array(‘jquery’));
    }

    add_action(‘wp_ajax_add_NuevoPedido’, ‘add_NuevoPedido’);
    add_action(‘wp_ajax_nopriv_add_NuevoPedido’, ‘add_NuevoPedido’);

    function add_NuevoPedido(){
    echo «User count is 2»;
    die();
    }

    En el js tengo esto

    function NuevoPedido(formlularios,IDUsuario){

    jQuery.ajax({
    type: «POST»,
    url: «/wp-admin/admin-ajax.php»,
    data: {«action»:»add_NuevoPedido»,’Formulario’:formlularios,’IDUsuario’:IDUsuario},
    success: function(Mensaje) {
    alert(Mensaje);
    jQuery(«.NTiket»).empty();
    jQuery(‘.NTiket’).text(Mensaje);
    },
    error: function(Mensaje) {
    }
    });

    }

    y en la pantilla tengo esto

    NuevoPedido(formlularios,IDUsuario);

    El tema es que lo he intentado de otras maneras mas simples y siempre me devuelve 0, cuando deberia darme la leyenda! No ent iendo que hago mal!

    Me seria de mucha ayuda algun concejo

  6. hola amigos necesito su ayuda estoy utilizando un plugin de gamificacion para wordpress . el plugin se llama mycred . dentro del plugin hay diversos shortcodes que me permiten realizar diversas actividades . Pero hay un shortcode en particular que se llama [mycred_link] . Que sirve para redirirgir a un usuario a otra url que yo elija . Pero el shortcode no funciona por que dice «Este código abreviado utiliza AJAX para otorgar puntos. Esto significa que un enlace no redireccionará a un usuario a la URL objetivo hasta que el manejador AJAX haya respondido con un resultado. Esto, a su vez, en algunos sitios puede generar un ligero retraso desde el momento en que hace clic en el enlace hasta que el navegador comienza a cargar la URL. Por supuesto, esto solo ocurre si no usas el atributo de destino. » . El problema es que no se como implementar ajax , agradeceria mucho que me ayudaran .

  7. Hola Juan Ignacio. Soy Anuska y me gustaría que me ayudaras. Estoy intentando que en una página de wordpress aparezcan los registros de clientes que están alojados en una base de datos mysql. La parte del archivo functions.php está bien porque he hecho un echo y me devuelve los registros en json pero se me colocan al principio de la pantalla. Lo que no soy capaz es de capturarlos desde el js para luego darles forma y que aparezcan con un formato en el sitio que quiero. No sé si me explico.
    Agradecería tu ayuda porque llevo 4 días con este tema y no soy capaz. Me sé tu tutorial de memoria. Gracias por tu ayuda

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir arriba

Si continuas utilizando este sitio, aceptas el uso de las cookies. Más información

Las opciones de cookie en este sitio web están configuradas para "permitir cookies" para ofrecerte una mejor experiéncia de navegación. Si sigues utilizando este sitio web sin cambiar tus opciones o haces clic en "Aceptar" estarás consintiendo las cookies de este sitio.

Cerrar