CMS Wordpress

WordPress con AJAX

Ajax en WordPress trabaja con peticiones de cliente bajo el conocido protocolo HTTP. Estas peticiones se gestionan en el archivo wp-admin/admin-ajax.php que dispara a continuación el hook correspondiente que programemos.

Por tanto disponemos de un sistema bastante integrado en WordPress que trabaja con la librería jQuery.

Podemos utilizarlo por tanto en nuestros plugins o templates. En este ejemplo lo utilizaré para completar un plugin almacenando datos en la tabla wp_options

Almacenar datos en la tabla options / update_option()

Para almacenar información en la tabla prefijo_options (normalmente wp_options) lo único que hay que hacer es utilizar el comando update_option (Ver información en el codex de wordpress).

        
            update_option(
                "identificadorUnicoVariable",
                "Valor de la variable"
            );
        

Formulario de datos

En WordPress los datos deben estar correctamente escapados.

        
            <form id="LOWF_form" action="<?=esc_url($_SERVER['PHP_SELF'])?>" method="post">
                <h3 class="title"><?=esc_html_e("Identificador de la variable","dominioPlugin")?></h3>
                <div class="campos">
                    <ul>
                        <li class="input-text-wrap">
                            <label for="identificadorUnicoVariable"><?=esc_html_e("Identificador de la variable","dominioPlugin")?></label>
                            <input id="identificadorUnicoVariable" required type="text"  name="identificadorUnicoVariable">
                        </li>
                    </ul>
                </div>
                <?php wp_nonce_field("logueo","logueo_nonce_field");?>
                <input class="button button-primary" type="submit" value="<?=esc_attr(__("Update","dominioPlugin"))?>">   
            </form>                        
        

Realizar la petición AJAX

Una vez creada la interface para comunicarnos con el servidor, como por medio de un formulario, debemos realizar la petición AJAX. Esta se realiza a través del objeto XMLHttpRequest de JavaScript. WordPress lleva integrado la librería jQuery que nos facilita todavía más la tarea.

Lo que vamos a crear es un fichero JavaScript que contendrá código jQuery. Para ello nos valdremos de un gancho/hook que incluiremos bien en nuestro fichero functions.php o en un plugin que estemos creando.

        
            function wfEnqueueScript(){
                //Carga de nuestro código jQuery. 
                //Asumimos que nuestro fichero de JavaScript se encuentra localizado 
                //en el directoiro raiz de nuestro plugin y dentro de la estructura "public/js"
                wp_enqueue_script('lowf_ajax',plugin_dir_url(__FILE__).'public/js/mi-jquery.js', ['jquery']); 
            }

            //Añadimos hook
            add_action("admin_enqueue_scripts","wfEnqueueScript");
        

Nuestro script jQuery

El script jQuery tiene una sere de campos fundamentales para la integración correcta:

  1. action: en este caso será un nombre único, identificador, por donde entrará la inyección de código (hook) que atendrá nuestra petición.
  2. url: fichero donde se atenderán las peticiones de nuestros formularios.

Fíjate los valores action y url del ejemplo de a continuación. Observa el campo url que es un objeto que contiene una dirección. Lo explicaremos más adelante.

        
            jQuery(document).ready(function(){

                jQuery(document).on( 'submit', "#LOWF_form", function(event){

                    event.preventDefault();

                    //Utiliza Ajax para...
                    var postData = {
                        action: 'lowf_2704',
                        variable: jQuery('#identificadorUnicoVariable').val().trim(), 
                        //podríamos recoger más variables
                    }

                    //console.log(postData);

                    //Ajax load more posts
                    jQuery.ajax({
                        type: "POST",
                        data: postData,
                        dataType:"json",
                        url: lowf_vars.ajaxurl,
                        beforeSend:()=>{ //Antes de que haya respuesta podríamos poner una imagen de precarga
                            jQuery("#LOWF_form").append(<img style="width:2em"  src="../images/updating.gif" alt="loading..." id="lowf_imagen">);
                        },
                        complete:()=>{ //Después de cumplir la petición eliminamos imagen de precarga
                            jQuery('#lowf_imagen').remove();
                        },
                        //Si se responde la petición Ajax con objeto JSON  válido
                        success: function (response) {
                            //console.log(response)
                            //acciones que haremos una vez completada respuestas. 
                            //Recuerda que aunque haya respuesta puede ser esta errónea
                            if(response.updated){
                                alert(response.message);//No es recomendable utilizar ventanas modales
                            }else{
                                alert(response.message);
                            }

                        }
                    //Si se responde la petición AJAX pero el objeto JSON no es válido
                    }).fail(function (data) {
                        console.log(data);
                    }); 

                });
            });
        

Recoger el campo action de AJAX para usuarios auténtificados o no

El código AJAX se dispara y dichas acciones lo recogerá el servidor PHP que deberá atender dichas peticiones.
Para ello disponemos de dos ganchos que dependerá si estas peticones lo atenderán usuarios registrados o sin registrar.

Anteriormente el script el valor único creado en el campo action fue "lowf_2704". Es necesario "inyectar código propio" para atender y dar una respuesta a esta petición. Para ello disponemos del gancho wp_ajax_

        
            //Esta es la función callback de Ajax
            function ajaxCallbackFunction(){
                //Creamos un array de reenvío a JavaScript
                $respuesta = [
                    "updated" => true,
                    "message" => "OK",
                ];
                if(check_admin_referer('logueo','logueo_nonce_field')){
                    update_option("LOWF_options",sanitize_text_field($_POST["identificadorUnicoVariable"]));                            
                }
                else{
                    $respuesta["updated"] = false;
                    $respuesta["message"] = "Error de chequeo WordPress";
                }
                //Asegúrate de codificar la salida con codificación JSON
                echo json_encode($respuesta);
                //También nos cercioramos de matar el proceso cuando haya finalizado la respuestas Ajax
                die();
            }

            //https://developer.wordpress.org/reference/hooks/wp_ajax_action/
            //Laza Ajax "autentificado" para usuarios logueados
            add_action( 'wp_ajax_' . 'lowf_2704', 'ajaxCallbackFunction');
            //Lanza Ajax "no-autontificado" para usuarios sin sesión abierta
            add_action( 'wp_ajax_nopriv_' . 'lowf_2704','ajaxCallbackFunction'); 
        

wp_localize_script. Localización de un script añadido

La función wp_localize_script de WordPress nos permite enlazar nuestro script con el archivo de gestión AJAX de WordPress. Por otro lado genera un objeto (llamado en nuestro caso "lowf_vars") que permite almacenar campos de gestión. En nuestro ejemplo la url de atención de peticiones y por ejemplo la url de un gif de precarga.

        
            function wfEnqueueScript(){
                //Carga de nuestro código jQuery. 
                //Asumimos que nuestro fichero de JavaScript se encuentra localizado 
                //en el directoiro raiz de nuestro plugin y dentro de la estructura "public/js"
                wp_enqueue_script('lowf_ajax',plugin_dir_url(__FILE__).'public/js/mi-jquery.js', ['jquery']);

                //https://developer.wordpress.org/reference/functions/wp_localize_script/
                //Como indica el Codex de WordPress trabaja con script ya añadido (primer parámetro)
                //Acepta un array asociativo como parámetro creando un objeto JavaScript ("lowf_vars)
                //Accederemos a cualquier valor utilizando la notación del punto: lowf_vars.nombre_de_campo
                wp_localize_script( 
                    'lowf_ajax',
                    'lowf_vars', //objeto donde almacenamos las variables
                    [
                    //Almacenamos variables que deseemos usar
                    'ajaxurl' => admin_url( 'admin-ajax.php' ), //Acceso: lowf_vars.ajaxurl
                    'loader' => plugin_dir_url(__FILE__).'public/images/loading.gif',
                    ],             
                ); 
            }

            //Añadimos hook
            add_action("admin_enqueue_scripts","wfEnqueueScript");
        

By Xurxo González Tenreiro

Informático de mente inquieta con grandes ideas en el ámbito de la progamación. Especialista en el desarrollo web e interesado en el análisis SEO. Me encanta mi labor en el ámbito de la divulgación por lo cual he ampliado mis horizontes al ámbito de la educación y formación en el desarrollo de aplicaciones web. También como gestor de contenidos web soy muy puntilloso con la divulgación y la elaboración de publicaciones en la red.

Leave a Reply

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

This site uses Akismet to reduce spam. Learn how your comment data is processed.