Ajax e WordPress

A técnica Ajax, como explicamos em nosso artigo introdutório sobre Ajax, tornou-se popular, pois nos permite atualizar uma parte do conteúdo da página da Web sem precisar atualizar a página. Isso contribui para uma melhor experiência do usuário.

Os sites WordPress obviamente não são exceção. Como usamos o Ajax no WordPress, no entanto, difere em comparação com o uso em outros aplicativos da web.

O que é admin-ajax e como funciona?

O WordPress já implementou o Ajax para seus próprios recursos de administração, como salvamento automático, atualizações instantâneas, moderação de comentários, adição/exclusão de postagens etc. Isso significa que ele está pronto para uso apenas utilizando as funções relacionadas fornecidas pelo WordPress.

O arquivo chave para este propósito é o arquivo admin-ajax.php , localizado na pasta wp-admin, que é usado para criar uma conexão entre o cliente e o servidor.

Dentro deste arquivo, por volta da linha 159, você pode ver como todas as requisições Ajax são registradas por alguns ganchos de ação.

 if ( ! empty( $_GET['action'] ) && in_array( $_GET['action'], $core_actions_get, true ) ) { add_action( 'wp_ajax_' . $_GET['action'], 'wp_ajax_' . str_replace( '-', '_', $_GET['action'] ), 1 ); } if ( ! empty( $_POST['action'] ) && in_array( $_POST['action'], $core_actions_post, true ) ) { add_action( 'wp_ajax_' . $_POST['action'], 'wp_ajax_' . str_replace( '-', '_', $_POST['action'] ), 1 ); }

O wp_ajax_{$action} refere-se aos usuários logados e o wp_ajax_nopriv_{$_REQUEST['action']} aos visitantes do site. Se você quiser criar uma solicitação que inclua todos os usuários, teremos que usar os dois ganchos.

Portanto, com a ajuda dessas ações, você pode conectar uma função personalizada e passar seus dados para o WordPress para fazer uma solicitação Ajax. Vamos dar uma olhada nisso em ação.

Exemplo de WordPress Ajax

Usaremos o mesmo exemplo que fizemos em nosso artigo introdutório do Ajax e criaremos um formulário que permite ao usuário pesquisar nos títulos dos artigos e ver os resultados sugeridos na hora.

No espaço do cabeçalho do nosso tema, inseriremos a saída HTML para nosso formulário de pesquisa. Usamos o tema Twenty Twenty-One então editamos o arquivo header.php localizado na pasta principal do tema e inserimos as seguintes linhas antes da linha <div id=”content” class=”site-content”>.

 <p><b>Search in articles:</b></p> <form> <input type="text" class="userInput"> </form> <p>Articles available: <span class="txtHint"></span></p>

Agora o formulário que o usuário pode usar deve estar visível no front-end.

NOTA: Aqui, editaremos diretamente o arquivo header.php do tema sem criar um tema filho. Esta não é uma boa prática e tem uma série de desvantagens. Se você quiser saber mais sobre a importância dos temas filhos, leia nosso artigo relacionado. Para os propósitos deste exemplo, mantivemos o código simples e dentro do tópico. Como tal, não é sugerido que você use este código em um site de produção.

A próxima coisa é incluir a função JavaScript que enviará a solicitação. Em vez disso, usaremos jQuery, pois ele já vem com o WordPress e está pronto para uso. Claro, temos que incluir um script do jeito WordPress.

Enfileirar nosso script

Contaremos ao WordPress sobre a existência do arquivo JS, editando o arquivo function.php do tema e enfileirando o script assim. Nosso arquivo será o custom.js que criamos e colocamos dentro de uma nova pasta “js” dentro da pasta principal do tema.

 function ajax_search_script() { wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true ); $script_data_array = array( 'url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'search_titles_nonce' ), ); wp_localize_script( 'custom-script', 'ajax_object', $script_data_array ); wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'ajax_search_script' );

Na função ajax_search_script() , registramos e localizamos o script e, em seguida, enfileiramos os dados localizados com a função integrada wp_enqueue_script(). Em seguida, conectamos a função ajax_search_script() no wp_enqueue_scripts, que é a ação apropriada para usar ao enfileirar scripts no WordPress.

O uso de wp_localize_script pode ser confuso aqui porque, como uma função do WordPress, ele foi originalmente projetado para traduzir quaisquer strings usadas em seu script. No entanto, também é frequentemente usado para passar dados genéricos de PHP para JavaScript. No nosso caso, para passar a URL Ajax e o objeto nonce.

O uso de nonce é necessário para que a requisição jQuery Ajax possa ser validada como uma requisição que vem do site. Se você não estiver familiarizado com o uso de nonces no WordPress, leia mais em nosso artigo relacionado.

O ajax_object é o valor do parâmetro $object_name necessário da função wp_localize_script() e é o que será usado posteriormente no código jQuery.

Excelente! Agora vamos preencher nossa função com o conteúdo correto.

JavaScript

Dentro do arquivo custom.js incluímos nosso jQuery.

 jQuery(function($) { $('.userInput').on('keyup', function() { var input = $(this).val(); if(input != '') { var data = { 'action': 'get_articles_titles', 'search_text': input, 'nonce': ajax_object.nonce } $.post(ajax_object.url, data, function(response) { $('#txtHint').html(response); }); } }); });

Desta vez usamos jQuery e JSON para passar os dados desejados, ação, search_text, nonce, para o script do lado do servidor. A função callback get_articles_titles() , será responsável por processar os dados no back-end, preparar os resultados e enviar uma resposta.

Além disso, como você pode ver, usamos o ajax_object de wp_localize_script com seus dois valores de array, nonce e url.

Os Ganchos

Agora temos que vincular as ações autenticadas do Ajax com os ganchos necessários que mencionamos anteriormente. Lembramos que para incluir usuários logados e não logados, você deve usar os dois ganchos. Em seu arquivo functions.php adicione essas duas linhas sob o código adicionado antes para enfileirar o script.

 add_action('wp_ajax_get_articles_titles', 'get_articles_titles'); add_action('wp_ajax_nopriv_get_articles_titles', 'get_articles_titles');

Como você já deve ter notado, o nome do gancho é na verdade um prefixo seguido pelo nome da nossa ação. A função hooked get_articles_titles é onde iremos realmente recuperar os títulos dos artigos. Vamos definir esta função dentro de functions.php também.

 function get_articles_titles() { check_ajax_referer('ajax_nonce', 'nonce'); $input = $_POST['search_text']; $args = array( 'posts_per_page' => -1, 'post_type' => 'post', ); $the_query = new WP_Query( $args ); $autocomplete = "<br>"; if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); $title = get_the_title( get_the_ID() ); if ( strpos( strtolower($title), strtolower($input) ) !== false ) { $autocomplete .= $title . "<br>" ; } } wp_reset_postdata(); } echo $autocomplete; wp_die(); }

O check_ajax_referer é responsável por verificar se a solicitação Ajax não é processada externamente.

Os parâmetros necessários aqui são a ação, que está relacionada ao 'nonce' => wp_create_nonce( 'ajax_nonce' ) dentro de sua função ajax_search_script() , junto com o valor relacionado ao nonce.

E é isso! Acabamos de criar um exemplo Ajax-PHP muito simples. Neste ponto, se você tentar o código em um ambiente WordPress de teste, ele deve estar funcionando assim.

Onde o Serviço 1-5 são os títulos de nossas postagens de teste.

Conclusão

Este foi um artigo sobre como podemos aumentar a capacidade de resposta e o desempenho em um site WordPress aproveitando os benefícios do Ajax. Espero que você esteja pronto agora para usar técnicas semelhantes em seu próprio site e aproveite para melhorar a experiência do usuário!