Requisições AJAX no WordPress

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.