Nenhum produto encontrado nessa seleção.
Utilizar ajax no WordPress é ainda mais simples do que se você tivesse que utilizar Ajax puro. Isso pela inclusão do jQuery e algumas funcionalidades já prontas do CMS.
Você só vai precisar de um arquivo JavaScript e uma função no seu arquivo functions.php para executar o que você desejar.
Então vamos aos códigos.
Criando o script JavaScript
A primeira coisa que vamos fazer é criar um arquivo JavaScript. Este arquivo vai conter apenas nosso Ajax.
Para este tutorial, estou utilizando o tema Tutsup Two. Nele já existe uma pasta chamada “js”, que é onde colocamos todos os scripts necessários para fazer o tema e as opções do tema funcionarem corretamente. Vou criar um arquivo chamado “nosso-ajax.js“.
Veja seu conteúdo:
jQuery(document).ready(function($) {
var buscar = 'termo que vamos buscar';
$.ajax({
url: ajaxurl, // Isso será definido no functions.php
type: 'POST',
data: {
'action': 'acao_do_ajax', // Ação do Ajax
's': buscar // O que vamos postar para $_POST
},
success: function( response ){
$('.tp-sidebar-content').prepend(response);
}
});
});
Acima você pode perceber que temos uma função ajax comum. Se você não sabe muito sobre JavaScript, veja nosso tutorial:
Um fato curioso no código acima é que a variável ajaxurl não estará definida fora do painel administrativo do WordPress. Vamos contornar essa situação utilizando nosso arquivo functions.php posteriormente.
Importante: Preste atenção no nome da ação “action”, você vai precisar desse nome para o callback do Ajax (a função que o Ajax vai executar para obter valores).
Adicionando o JavaScript ao tema
Para adicionar o JavaScript que contém o Ajax em nosso tema, vamos incrementar o seguinte em nosso functions.php:
// Função para adicionar nosso script
function javascript_do_ajax() {
// Define a variável ajaxurl
$script = '<script>';
$script .= 'var ajaxurl = "' . admin_url('admin-ajax.php') . '";';
$script .= '</script>';
echo $script;
// Nosso ajax (js/nosso-ajax.js)
wp_enqueue_script(
'nosso-ajax',
get_template_directory_uri() . '/js/nosso-ajax.js',
array('jquery'),
'0.0.1',
true
);
}
// Adiciona no rodapé
add_action( 'wp_footer', 'javascript_do_ajax' );
Veja que acima estamos definindo a variável “ajaxurl“. Isso só será necessário quando estivermos tentando executar o Ajax fora da área administrativa.
Outro fato importante é que a função está sendo executada no hook wp_footer, se você estiver criando algo dentro da área administrativa, o hook será admin_footer.
Isso é simplesmente para adicionar nosso script às nossas páginas, nada mais.
Função do Ajax
Agora vamos criar a função que o Ajax vai executar dentro do nosso arquivo functions.php. Essa função, é como se fosse o arquivo que o Ajax carrega para retornar valores.
Vou fazer um loop de pesquisa só para você entender:
// Ação de callback do Ajax
function acao_do_ajax() {
/*
Abaixo vou fazer um loop de pesquisa para buscar pelo termo que colocamos
no javascript
*/
$loop = new WP_Query(
array(
's' => $_POST['s'], // Este é o termo que virá do JS
'posts_per_page' => 5,
)
);
?>
<?php if ( $loop->have_posts() ): ?>
<?php while ( $loop->have_posts() ): ?>
<?php $loop->the_post(); ?>
<ul>
<li>
<a href="<?php the_permalink();?>">
<?php the_title();?>
</a>
</li>
</ul>
<?php endwhile; ?>
<?php else: ?>
<p>Nada encontrado para "<?php echo $_POST['s'];?>".</p>
<?php endif; ?>
<?php wp_reset_postdata();
die();
}
/*
* wp_ajax_ + ação que colocamos no JavaScript, função de callback
* Em:
* data: {
* 'action': 'acao_do_ajax', // Ação do Ajax
* 's': buscar // O que vamos postar para $_POST
* },
*/
add_action( 'wp_ajax_acao_do_ajax', 'acao_do_ajax' );
Tudo o que estiver dentro da função, será retornado para o Ajax. Por exemplo, se eu exibir apenas um “OI”, tipo:
echo "OI";
Isso será retornado para a variável “response” que criamos no JavaScript. A partir disso você pode fazer o que preferir com os valores.
Importante: O 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.
Depurando
Para depurar se tudo está correto, você pode utilizar o console dos navegadores mais modernos. Por exemplo, no Firefox basta pressionar CTRL + SHIFT + Q.
Depurando o que foi enviado para o Ajax
Veja na imagem acima, que podemos visualizar praticamente tudo. Dados que foram enviados, qual foi a resposta, podemos analisar o “Console” para visualizar erros e coisas do tipo.
Concluindo
Caso tenha algum dúvida, basta comentar aí abaixo.
