Usando AJAX e PHP em seu site WordPress – Criando seu próprio plugin

14/05/2024 | Desenvolvimento

Ajax Php Plugin 02 01 (1)

Um bom design é invisível! É como um ar condicionado com controle automático de temperatura. Até sentir muito calor ou frio, você não presta atenção nisso, concentrando-se na tarefa que tem em mãos ou apenas aproveitando o tempo.

Para usuários que navegam na web, o Ajax é como um ar condicionado automático. Torna os sites mais fáceis e rápidos de usar, resultando em uma experiência agradável. E o mais importante, simplesmente funciona!

O que é Ajax exatamente?

Ajax é uma técnica de desenvolvimento web que significa A synchronous J avaScript A nd X ML . É usado para criar aplicativos da web dinâmicos, interativos e divertidos. Com o Ajax, você não precisa esperar a página da web recarregar para ver uma alteração. Tudo é feito automaticamente em segundo plano, sem interromper o que você está fazendo, melhorando assim a experiência do usuário.

Ajax no trabalho!

Você provavelmente já encontrou o Ajax na web. O recurso de preenchimento automático da Pesquisa Google é talvez o mais popular. O Google Maps é outro. Atualização ao vivo de tweets, comentários no Facebook, postagens no Reddit, curtidas no YouTube, todas essas incríveis experiências do usuário são possíveis graças ao Ajax e tecnologias relacionadas.

Neste post, darei a você uma rápida introdução ao Ajax, listarei suas vantagens, explicarei como ele funciona no WordPress e, em seguida, mergulharemos de cabeça na criação de um plug-in Ajax simples para WordPress.

Parece divertido? Vamos começar.

O básico do Ajax

Ajax usa uma combinação de linguagens de programação como HTML/CSS, JavaScript, XML/JSON e uma linguagem de script do lado do servidor (PHP, ASP.NET, etc.). Funciona enviando dados do navegador para o servidor, que os processa e envia de volta uma resposta. Esta resposta é usada pelo navegador para atualizar a página da web sem recarregá-la.

É assim que geralmente acontece:

  • Uma ação do usuário aciona um evento em um navegador (como um clique de botão).
  • É ativada a chamada Ajax, que envia uma solicitação ao servidor, utilizando XML/JSON.
  • O script do lado do servidor processa essa solicitação. Ele também pode acessar o banco de dados se necessário.
  • O servidor então envia uma resposta de volta ao navegador.
  • Uma segunda função JavaScript, chamada função de retorno de chamada, recebe a resposta e atualiza a página da web.

infográfico ilustrando os fundamentos do Ajax

As muitas vantagens do Ajax

  1. Minimiza o uso de largura de banda e otimiza as operações de rede, pois os servidores não serão necessários para processar cargas de dados.
  2. Economiza tempo tanto para os usuários quanto para o servidor, pois o usuário pode ver a resposta do servidor imediatamente.
  3. Maior desempenho. Como nenhum dado de página inteira está sendo enviado, o Ajax melhora o desempenho, a velocidade e a usabilidade das páginas/aplicativos da web.
  4. Maior capacidade de resposta. Ao eliminar o recarregamento de página inteira, os sites serão mais rápidos e altamente responsivos, portanto mais fáceis de usar.

Habilidades necessárias para trabalhar com Ajax no WordPress

  • Conhecimento de HTML, CSS e JavaScript (jQuery é suficiente)
  • Familiaridade básica com formatos de intercâmbio de dados XML ou JSON
  • Conhecimento de PHP para scripts do lado do servidor

Se o seu conhecimento de jQuery ou PHP é fácil, não se preocupe! Você ainda pode seguir a lógica do tutorial. Sinta-se à vontade para acessar a seção de comentários se tiver dúvidas ou precisar de ajuda com alguma coisa 🙂

Introdução ao Ajax no WordPress

O núcleo do WordPress já utiliza Ajax, mas apenas nas telas de administração. Por exemplo, ao moderar comentários ou adicionar/excluir itens de categorias ou postagens, você pode ver atualizações instantâneas graças ao Ajax. É também a tecnologia por trás da tão apreciada funcionalidade de salvamento automático.

Ajax é mais comumente usado com funções jQuery no WordPress, pois é muito mais simples quando comparado ao VanillaJS. Além disso, o núcleo do WordPress já vem carregado com a biblioteca jQuery.

Esta é a aparência do processo para usar Ajax no WordPress:

  1. O usuário aciona uma solicitação Ajax, que é primeiro passada para o arquivo admin-ajax.php na pasta wp-admin .
  2. A solicitação Ajax precisa fornecer pelo menos um dado (usando o método GET ou POST). Essa solicitação é chamada de ação .
  3. O código em admin-ajax.php usa a ação para criar dois ganchos: wp_ajax_youraction e wp_ajax_nopriv_youraction . Aqui, youraction é o valor da variável GET ou POST action .
  4. O primeiro gancho wp_ajax_youraction é executado apenas para usuários logados, enquanto o segundo gancho wp_ajax_nopriv_youraction atende exclusivamente a usuários desconectados. Se quiser atingir todos os usuários, você precisará disparar os dois separadamente.
  5. Planeje as funções de gancho para uma degradação elegante . Ele garante que seu código funcionará mesmo em navegadores com JavaScript desabilitado.

Infográfico ilustrando como Ajax é usado com WordPress

Vamos criar um plugin WordPress Ajax

Toda grande jornada começa com um único passo, e o mesmo acontece com nosso aprendizado. Vamos construir um plugin básico para WordPress chamado Post Likes Counter com os seguintes recursos:

  • Usuários logados podem curtir postagens.
  • O plugin mantém um registro do número total de curtidas de postagens e as exibe.
  • O contador de curtidas de postagens é atualizado instantaneamente no front-end.
  • Os usuários desconectados receberão uma mensagem de erro se tentarem curtir uma postagem.

Para começar, crie um plugin WP vazio e ative-o. Se precisar de ajuda com isso, você pode consultar nosso guia de desenvolvimento de plugins para WordPress . WordPress Codex também possui uma página detalhada sobre como escrever um plugin WP .

Encontre o modelo de postagem do seu tema

Depois disso, você precisa encontrar o modelo de postagem single.php do seu tema . É usado quando uma única postagem é consultada, que é onde queremos que nosso contador de curtidas esteja. Este arquivo pode ser encontrado na pasta raiz do seu tema ativo. Mantenha-o aberto para edição.

Prepare o modelo de postagem para uma chamada Ajax

Vamos criar um link aqui para permitir que os usuários curtam as postagens. Se um usuário tiver o JavaScript habilitado, ele usará o arquivo JavaScript que criaremos mais tarde; caso contrário, basta seguir o link diretamente. Coloque o código fornecido abaixo em seu arquivo single.php .

// The 'likes' meta key value will store the total like count for a specific post, it'll show 0 if it's an empty string
<?php
	$likes = get_post_meta($post->ID, "likes", true);
	$likes = ($likes == "") ? 0 : $likes;
?>

This post has <span id='like_counter'><?php echo $likes ?></span> likes<br>

// Linking to the admin-ajax.php file. Nonce check included for extra security. Note the "user_like" class for JS enabled clients.
<?php
	$nonce = wp_create_nonce("my_user_like_nonce");
	$link = admin_url('admin-ajax.php?action=my_user_like&post_id='.$post->ID.'&nonce='.$nonce);
	echo '<a class="user_like" data-nonce="' . $nonce . '" data-post_id="' . $post->ID . '" href="' . $link . '">Like this Post</a>';
?>

Alternativamente, você pode adicionar este código a qualquer uma das partes do modelo que seu arquivo single.php inclui. Por exemplo, se estiver usando o tema oficial Twenty Nineteen , você pode inserir este código no arquivo content-single.php do seu tema . Para testar o código deste plugin, inseri-o neste arquivo no final de sua seção div.entry-content .

Abordando a chamada Ajax sem JavaScript

Clicar no link criado acima o levará ao script admin-ajax.php , mas você não verá nenhuma saída útil, pois ainda não criou nenhuma função para executar sua ação.

Para fazer isso, crie uma função no arquivo do seu plugin e adicione-a aos dois ganchos que foram criados pelo WordPress para você. Siga o código mostrado abaixo:

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

<?php // used here only for enabling syntax highlighting. Leave this out if it's already included in your plugin file.

// define the actions for the two hooks created, first for logged in users and the next for logged out users
add_action("wp_ajax_my_user_like", "my_user_like");
add_action("wp_ajax_nopriv_my_user_like", "please_login");

// define the function to be fired for logged in users
function my_user_like() {
   
   // nonce check for an extra layer of security, the function will exit if it fails
   if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_like_nonce")) {
      exit("Woof Woof Woof");
   }   
   
   // fetch like_count for a post, set it to 0 if it's empty, increment by 1 when a click is registered 
   $like_count = get_post_meta($_REQUEST["post_id"], "likes", true);
   $like_count = ($like_count == ’) ? 0 : $like_count;
   $new_like_count = $like_count + 1;
   
   // Update the value of 'likes' meta key for the specified post, creates new meta data for the post if none exists
   $like = update_post_meta($_REQUEST["post_id"], "likes", $new_like_count);
   
   // If above action fails, result type is set to 'error' and like_count set to old value, if success, updated to new_like_count  
   if($like === false) {
      $result['type'] = "error";
      $result['like_count'] = $like_count;
   }
   else {
      $result['type'] = "success";
      $result['like_count'] = $new_like_count;
   }
   
   // Check if action was fired via Ajax call. If yes, JS code will be triggered, else the user is redirected to the post page
   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
      $result = json_encode($result);
      echo $result;
   }
   else {
      header("Location: ".$_SERVER["HTTP_REFERER"]);
   }

   // don't forget to end your scripts with a die() function - very important
   die();
}

// define the function to be fired for logged out users
function please_login() {
   echo "You must log in to like";
   die();
}

Se tudo estiver certo, quando um usuário logado clicar no link Curtir esta postagem , o contador de curtidas acima dele deverá aumentar em 1 automaticamente. Para navegadores com JavaScript desabilitado, a página será atualizada, mas ainda mostrará a contagem de curtidas atualizadas.

A função para lidar com usuários desconectados não faz muito aqui, exceto exibir uma mensagem de erro. Serve apenas para servir de exemplo. Você pode, é claro, aproveitar isso e oferecer aos visitantes opções mais úteis.

Finalmente, adicionando suporte para JavaScript

É uma boa prática adicionar suporte para JavaScript no final, pois isso torna as coisas muito mais claras. Para usar Ajax no WordPress, você precisa enfileirar a biblioteca jQuery, bem como o arquivo JavaScript personalizado do seu plugin. Para isso, acesse seu plugin e anexe o seguinte script:

<?php // used here only for enabling syntax highlighting. Leave this out if it's already included in your plugin file.

// Fires after WordPress has finished loading, but before any headers are sent.
add_action( 'init', 'script_enqueuer' );

function script_enqueuer() {
   
   // Register the JS file with a unique handle, file location, and an array of dependencies
   wp_register_script( "liker_script", plugin_dir_url(__FILE__).'liker_script.js', array('jquery') );
   
   // localize the script to your domain name, so that you can reference the url to admin-ajax.php file easily
   wp_localize_script( 'liker_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        
   
   // enqueue jQuery library and the script you registered above
   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'liker_script' );
}

Feito isso, é hora de criar o arquivo JavaScript liker_script.js . Então você deve fazer upload deste arquivo para o local referenciado no código anterior (dica: é a pasta raiz do seu plugin). Aqui está o código para liker_script.js :

jQuery(document).ready( function() {
   jQuery(".user_like").click( function(e) {
      e.preventDefault(); 
      post_id = jQuery(this).attr("data-post_id");
      nonce = jQuery(this).attr("data-nonce");
      jQuery.ajax({
         type : "post",
         dataType : "json",
         url : myAjax.ajaxurl,
         data : {action: "my_user_like", post_id : post_id, nonce: nonce},
         success: function(response) {
            if(response.type == "success") {
               jQuery("#like_counter").html(response.like_count);
            }
            else {
               alert("Your like could not be added");
            }
         }
      });
   });
});

A função my_user_like() definida em nosso plugin deve enviar ao nosso navegador uma resposta como um array de resultados codificado em JSON, que também pode ser usado como um objeto JavaScript. Usando isso, podemos atualizar a contagem de postagens sem recarregar a página da web.

E é isso! Viva!

Agora você habilitou a funcionalidade Ajax para seu plugin. Claro, você pode expandir isso e adicionar mais recursos conforme sua preferência. Vá em frente, ajuste até conseguir!

Captura de tela mostrando nossa postagem simples como contador no frontend de uma postagem. Link "Curtir esta postagem" que aumenta a contagem cada vez que você clica nele.Nosso post simples como contador. Você pode adicionar estilos, animações e outros scripts para aumentar o nível.

Plug-ins WordPress notáveis ​​​​que usam Ajax

Precisa de alguma inspiração do Ajax para animar você? Confira esses incríveis plug-ins do WordPress que usam o poder do Ajax para criar recursos poderosos e experiências de usuário mais suaves.

  1. Lazy Load Plugins: Lazy Load é uma técnica de desenvolvimento web usada para melhorar o tempo de carregamento inicial da página. Isso é feito atrasando o carregamento de ativos com muitos recursos que não são visíveis para o usuário na janela de visualização do navegador. Esses ativos são carregados automaticamente quando o usuário rola a página da web para baixo. A versão gratuita do Smush suporta carregamento lento.
  2. Forminator: Um plugin de criação de formulários totalmente expansível que também suporta enquetes, questionários, formulários de pedido com opções de pagamento , etc. Possui a opção de habilitar o envio de formulários com Ajax, tornando-o uma experiência perfeita para os usuários.
  3. Login With Ajax: Fortaleça seu site WordPress com login Ajax suave e efeitos de registro com este plugin rico em recursos. Se você deseja oferecer aos seus usuários uma experiência de login e registro melhor do que a experiência padrão do WordPress, não procure mais.
  4. WP-PostRatings: Este plugin simples adiciona um sistema de classificação Ajax para postagens e páginas do seu site WordPress. Ele também adiciona suporte a códigos de acesso para as classificações, para que você possa exibi-las onde quiser.
  5. YITH WooCommerce Ajax Product Filter: Um plugin extremamente útil e poderoso para WooCommerce que permite aplicar os filtros exatos necessários para exibir as variações de produtos que você procura. O Ajax garante que tudo aconteça num instante.
  6. Ajax Search Lite: Um plugin de pesquisa responsivo e ao vivo para WordPress, desenvolvido com Ajax. Também inclui preenchimento automático do Google e sugestões de palavras-chave. Ofereça aos seus usuários uma melhor experiência de pesquisa em seu site com este plugin.
  7. Simple Ajax Chat: Você já se perguntou se poderia conversar com outros usuários em um site, ao vivo? Este plugin baseado em Ajax é a resposta para isso. É compatível com dispositivos móveis e foi desenvolvido para ser extremamente personalizável de acordo com sua preferência.

Acesse o repositório de plug-ins do WordPress.org para implementações Ajax mais brilhantes.

Mantenha a calma e o Ajax ligado!

O que é bom para o <body> também é bom para o usuário e o servidor, mas você precisa equilibrar isso. Ajax é uma ferramenta poderosa em seu arsenal para melhorar o desempenho do site e a experiência do usuário. Mas você só deve usá-lo onde for necessário. Sempre foque no aspecto da experiência do usuário. Vai ser um pouco difícil no começo, mas depois de dominar o básico do Ajax, não há como parar você!

Desenvolvido por Daniel Peres

Profissional especialista em WordPress com 10 anos de experiência na área. Já atuei em diversas empresas na área de tecnologia e marketing a fim de consolidar negócios baseados em sites WordPress. Voluntário nos Meetups WordPress e Divi Rio de Janeiro.

Agora é a sua vez!

Compartilhe sua opinião e deixe seu comentário no post. Queremos ouvir o que você pensa!

0 comentários

Enviar um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *