Hoje vou dar uma dica de como utilizar ajax no WordPress.
Precisei fazer uma chamada assíncrona em uma página de template do WordPress em um projeto que estive trabalhando e fui pesquisar como funcionava. O WordPress tem seu jeitinho todo especial de executar requisições XHR.
O primeiro passo é escrever uma função (no arquivo functions.php) para executar o que você quiser que o backend faça nessa chamada Ajax. No caso do exemplo desta publicação estou enviando um email.
// Actions to send mail add_action('wp_ajax_sendMyMail', 'sendMyMail'); add_action('wp_ajax_nopriv_sendMyMail', 'sendMyMail'); // Sending the email function sendMyMail() { global $wpdb; $message = "Form data:\n\n Name: {$_POST['name']}"; if (wp_mail('email@email.com', 'Title', $message, array('Cc:email@copy.com'), array())) { echo 'success'; } else { echo 'error'; } die(); }
Linha por linha da função no functions.php
Usando o add_action do WordPress, registramos nossa função. No primeiro wp_ajax_sendMail estamos registrando a função para utilização no painel Admin do WordPress e com o wp_ajax_nopriv_sendMail registramos a função para utilização no frontend, onde o usuário não estará logado.
O formato desses dois tipos de actions específicas para ajax sempre devem começar com wp_ajax_(action) ou wp_ajax_nopriv_(action).
// Actions to send mail add_action('wp_ajax_sendMyMail', 'sendMyMail'); add_action('wp_ajax_nopriv_sendMyMail', 'sendMyMail');
Depois vem a função em si, com as ações que você quiser. Como eu já disse, nesse exemplo é o envio de um email.
// Sending the email function sendMyMail() { global $wpdb; $message = "Form data:\n\n Name: {$_POST['name']}"; if (wp_mail('email@email.com', 'Title', $message, array('Cc:email@copy.com'), array())) { echo 'success'; } else { echo 'error'; }
No final usamos o die() do PHP para encerrar o processo.
die(); }
A requisição Ajax
Agora vamos à chamada assíncrona no Javascript.
Fazemos uma chamada com o método $.ajax do jQuery normalmente, mas a diferença está na URL que utilizaremos nela e em um item que precisa ser adicionado nos dados enviados para o servidor.
$.ajax({ type:"POST", url: "/wp-admin/admin-ajax.php", data: { action: 'sendMyMail', name: $('input[name=name]').val() }, success: function(data){ console.log(data) } });
A URL deve ser sempre /wp-admin/admin-ajax.php e o nome da ação que você registrou no functions.php entra como um dado com o nome action junto com o resto dos dados que você irá mandar para o servidor.
url: "/wp-admin/admin-ajax.php",
data: { action: 'sendMyMail', name: $('input[name=name]').val() }
E voilá!
Deixe suas dúvidas ou opiniões nos comentários abaixo.
Nos vemos na próxima.
