Usando o jQuery AJAX no WordPress

Utilizar jQuery AJAX no WordPress é bem simples, isso acontece devido à inclusão do jQuery e algumas funcionalidades já prontas do WordPress. Basicamente só precisamos de um arquivo javaScript e de uma função no arquivo functions.php…

Ao trabalhar com o WordPress, temos que customizar com bastante frequência e a coisa mais comum no WordPress é fazer uma chamada de ajax.

Então, como devemos fazer uma chamada de ajax do seu WordPress. O primeiro passo é criar um arquivo js na pasta javascript do tema em uso, chame-o por exemplo de contact-ajax-script.js. O segundo passo é registar esse arquivo no arquivo functions.php do tema, veja como:

functions.php

function my_enqueue() {
  wp_enqueue_script( 'contact-ajax-script', get_template_directory_uri() . '/js/contact-ajax-script.js', array('jquery') );
  wp_localize_script( 'contact-ajax-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue' );

Feito isso partimos para a criação do código que necessitamos. Adicionar então o seguinte código em nosso arquivo javascript que criamos inicialmente (contact-ajax-script.js).

contact-ajax-script.js

jQuery(".contact_form_submit").on('click', function(e){
  // stopping form from reloading the page
  e.preventDefault();
  // serializing data from the target form
  var formData = jQuery("#contact_form").serialize();

  jQuery.ajax({
    type: 'post',
    dataType: 'json',
    url: ajax_object.ajax_url,
    data: {
      'action': 'contact_ajax_func',
      'data': formData
    },
    success: function(response){
      console.log(response);
    }
  });

}) // contactForm click event end

No código chamamos a função “contact_ajax_func”, essa função iremos cria-la no arquivo functions.php. Repare que o “ajax_url” dado acima, está apontando para “/wp-admin/admin-ajax.php”, que definimos no código apresentado no segundo passo, usando “wp_localize_script”.

Agora criamos a função contact_ajax_func() no arquivo functions.php

function contact_ajax_func(){
  $data = parse_str($_POST['data']);
  // From parse_str you will be able to access parameters as variables
  ...
  return output;
  wp_die();
}
add_action('wp_ajax_contactAjaxFunc', 'contactAjax');
add_action('wp_ajax_nopriv_contactAjaxFunc', 'contactAjax');

Está feito, falta explicar que a chamada “wp_ajax_nopriv_” é uma função que vai permitir usuários não autenticados usem AJAX, da mesma forma que “wp_ajax_” só vai ser usada apenas por usuários com sessão iniciada (login).

Importante: O wp_die() ao final realmente é necessário para que o Ajax não tenha que ler o restante das funções do seu arquivo functions.php.

Agora, quando você enviar o formulário, será retornado para a variável “response” que criamos no JavaScript. A partir disso você pode fazer o que preferir com os valores.