Ajax em Javascript

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

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.

Fonte: http://codex.wordpress.org/AJAX_in_Plugins