Cia News

Requisição AJAX no WordPress em 3 Passos

Requisição AJAX no WordPress em 3 Passos

Postado em: 28 de setembro de 2017
Compartilhe

Aprenda a fazer requisição AJAX no WordPress em apenas 3 passos

Precisa fazer uma requisição AJAX no WordPress, mas não sabe por onde começar?

Bom, se você sabe um pouco de jQuery, já pode ficar mais tranquilo! Com este conhecimento, provavelmente, você será capaz de conseguir criar a requisição AJAX com certa facilidade.

Mas, como nada na vida nem tudo são flores, é importante que você saiba que, no WordPress, esta simples aplicação pode se tornar uma verdadeira dor de cabeça para o desenvolvedor, caso não seja feita da maneira correta.

E, pensando nisto, resolvemos criar para você um tutorial bem prático e simples sobre como fazer uma requisição AJAX no WordPress de modo fácil. Siga a leitura e descubra agora como desenvolver esta atividade com muito mais tranquilidade e, o principal, com a certeza de que, no fim, tudo dará certo!

Requisição AJAX – Passo 1

Vamos começar criando uma função dentro do arquivo functions.php do seu tema, que irá retornar o que for solicitado pelo AJAX. Veja:


function load_ajax(){
wp_send_json(array('error' => '', 'content' => get_the_post_thumbnail_url($_GET['post_id'])));
}

A função acima irá retornar a imagem destacada do post selecionado em JSON. A função wp_send_json() já retorna o JSON, bastá passar um parâmetro array com os campos desejados.

Requisição AJAX – Passo 2

Seguindo o nosso tutorial, precisamos adicionar duas actions, que serão responsáveis pelo carregamento da função quando realizarmos a requisição em uma URL específica.


add_action('wp_ajax_load_img ', ' load_ajax');
add_action('wp_ajax_nopriv_load_img', ' load_ajax');

O primeiro parâmetro da action é dividido em duas partes: o ‘wp_ajax_’, marcado em verde, e o ‘load_posts’, marcado em amarelo.

Isto significa que o wp_ajax_ é o nome da action que você deseja acionar.

O load_img é uma espécie de gatilho que será acionado no momento em que efetuarmos a requisição AJAX, vamos entender melhor quando fizermos isso.

Já o segundo parâmetro da action é o nome da função que criamos para retornar a thumbnail. A segunda action que adicionamos tem o trecho ‘nopriv’. Isso significa que ela também será executada por usuários não logados no painel do WordPress.

Requisição AJAX – Passo 3

Por fim, temos a própria requisição em AJAX:


$.ajax({
type: "GET",
url:
dataType: "json",
data: {
action: "load_img",
post_id: 1
},
success: function(j) {
console.log(j);
}
});

Nesta última parte, temos que prestar bastante atenção no parâmetro action que está marcado de azul. Este parâmetro é o gatilho que citamos anteriormente.

Quando realizarmos a requisição AJAX no WordPress com o parâmetro load_img, será acionada a nossa função que irá retornar a imagem do post.

Realmente, o WordPress complica um pouco no quesito requisição AJAX, mas está aí o tutorial para te dar uma mãozinha. Ah, e qualquer dúvida ou dificuldade, deixe seu comentário aí em baixo, que teremos o maior prazer em responder! 😉

Conteúdos Relacionados

E aí, gostou do nosso texto sobre como fazer uma requisição AJAX no WordPress em apenas 3 passos? Então, aproveite para ler também sobre:

Frameworks no PHP
O que é Materialize
Animação CSS
O que é Bootstrap

Fale com a Cia Web Sites

A nossa equipe especializada em desenvolvimento de sites está pronta para te atender:

+55 (31) 3564-2776 | contato@ciawebsites.com.br | Fale com a Cia Web Sites

Desenvolvedor web Front-end e Back-end, tem amor ao que faz. Passa tempo assistindo series, filmes, jogando e praticando airsoft. Fico muito feliz em compartilhar meu conhecimento com outras pessoas.

Compartilhe

Gostou do post? Comenta aí!