O objetivo deste artigo é tentar mostrar uma forma simples e bem completa (e melhor. Segura!) de trabalhar com requisições AJAX e WordPress.
Obs. Mostrarei de forma genérica e com exemplos banais, o importante é entender o processo. 🙂
Como já trabalhei em muitos lugares e peguei muito freela pra fazer nessa vida, acabo esbarrando com códigos no mínimo questionáveis, outros muito bons também. Porém a questão de fazer requisições AJAX no WordPress sempre é um assunto delicado pois várias e várias vezes vi códigos em que a complexidade que o desenvolvedor fez o código não só é desnecessária como também é ineficaz e insegura.
Vamos ao que interessa!
Quando precisamos realizar uma consulta ao banco do WordPress para trazermos um conteúdo específico sem dar um refresh na página, logo corremos para fazer a tão maravilhosa requisição AJAX.
Já vi isso sendo feito de muitas formas diferentes, desde um arquivo na raiz do projeto com uma “query na mão” e sendo chamada diretamente dentro do código da página específica, já vi uns arquivos nos mais variados diretórios com um require_once da vida no wp_load e então fazendo os loops lá dentro e cuspindo o html e etc.
Não digo que a forma que vou mostrar agora seja a única forma correta de fazer, muito menos a melhor, porém é uma forma que está na documentação do WordPress e que fica bem simples de ser entendida e também menos complexa que as invenções que vemos por aí.
Todas as requisições AJAX em WordPress, devem ser feitas num arquivo único, diferenciando-as através de parâmetros. O arquivo correto para enviarmos nossas requisições, é o arquivo “admin-ajax.php” que fica localizado dentro da pasta wp-admin e que no código veremos de que forma chamamos este arquivo dinamicamente sem problemas através de uma função do WordPress.
Primeiro vamos criar um nonce para nossas requisições , jogar este nonce para uma variável global de Javascript para que possamos usá-la no nosso frontend e, após termos nosso nonce criado, vamos criar nossa função para buscar mais notícias. Ela é chamada através de uma action também. Veja como fica o código:
//Adiciona um script para o WordPress add_action( 'wp_enqueue_scripts', 'secure_enqueue_script' ); function secure_enqueue_script() { wp_register_script( 'secure-ajax-access', esc_url( add_query_arg( array( 'js_global' => 1 ), site_url() ) ) ); wp_enqueue_script( 'secure-ajax-access' ); } //Joga o nonce e a url para as requisições para dentro do Javascript criado acima add_action( 'template_redirect', 'javascript_variaveis' ); function javascript_variaveis() { if ( !isset( $_GET[ 'js_global' ] ) ) return; $nonce = wp_create_nonce('mais_noticias_nonce'); $variaveis_javascript = array( 'mais_noticias_nonce' => $nonce, //Esta função cria um nonce para nossa requisição para buscar mais notícias, por exemplo. 'xhr_url' => admin_url('admin-ajax.php') // Forma para pegar a url para as consultas dinamicamente. ); $new_array = array(); foreach( $variaveis_javascript as $var => $value ) $new_array[] = esc_js( $var ) . " : '" . esc_js( $value ) . "'"; header("Content-type: application/x-javascript"); printf('var %s = {%s};', 'js_global', implode( ',', $new_array ) ); exit; } add_action('wp_ajax_nopriv_mais_noticias', 'mais_noticias'); add_action('wp_ajax_mais_noticias', 'mais_noticias'); function mais_noticias() { if( ! wp_verify_nonce( $_POST['mais_noticias_nonce'], 'mais_noticias_nonce' ) ) { echo '401'; // Caso não seja verificado o nonce enviado, a requisição vai retornar 401 die(); } //Busca os dados que queremos $args = array( 'post_type' => 'noticias', 'paged' => $_POST['paged'] ); $wp_query = new WP_Query( $args ); //Caso tenha os dados, retorna-os / Caso não tenha retorna 402 para tratarmos no frontend if( $wp_query->have_posts() ) { echo json_encode( $wp_query->posts ); } else { echo 402; } exit; }
Com isso, se formos no nosso console do navegador e jogarmos js_global.mais_noticias_nonce, ele nos retornará um nonce como este: “85c93a8183”.
Obs. Se ainda não sabe o que é nonce, e como ele funciona no WordPress veja neste link : https://blog.apiki.com/2015/09/21/wordpress-nonces-e-o-que-voce-precisa-saber-sobre-isso/
Note que usamos as actions wp_ajax e wp_ajax_nopriv, que respectivamente autorizam nossa aplicação para acessar a determinada função privadamente e publicamente.
Agora vamos ao frontend
Temos um botão para buscar mais notícias num archive nosso da vida:
vamos, por exemplo, capturar o click neste botão e a partir disso vamos buscar mais conteúdo via ajax:
jQuery(document).ready(function() { jQuery('.mais-noticias').on('click', function(e) { e.preventDefault(); var dados_envio = { 'mais_noticias_nonce': js_global.mais_noticias_nonce, 'paged': 2, 'action': 'mais_noticias' } jQuery.ajax({ url: js_global.xhr_url, type: 'POST', data: dados_envio, dataType: 'JSON', success: function(response) { if (response == '401' ){ console.log('Requisição inválida') } else if (response == 402) { console.log('Todos os posts já foram mostrados') } else { console.log(response) } } }); }); })
Javascript com jQuery (para efeito de exemplo com menos código. Fique a vontade para fazer ~do seu jeito~)
Desta forma, estamos enviando corretamente uma requisição ao WordPress e ele nos retornando um resultado que precisamos.
Como disse lá no começo, os exemplos são ‘toscos’ mas o que vale ), é entender como funciona esse fluxo e o que realmente é necessário enviar para podermos fazer de forma segura uma requisição.
Procurei focar realmente no processo.
<
p id=”f224″ class=”graf–p graf-after–p graf–last”>Espero que tenha esclarecido alguma coisa pra você e qualquer dúvida ou sugestão pode postar nos comentários.