Como usar Ajax no WordPress

Publicados: 2023-02-12

Se você tem uma base de clientes engajada e ativa para o seu site, pode se perguntar como pode fornecer uma experiência na Web verdadeiramente interativa e enriquecida para eles. Oferecer interatividade em tempo real pode ser um grande atrativo para o seu público.

Felizmente, JavaScript assíncrono e XML (Ajax) é um método acessível de adicionar recursos interativos ao seu site. Quando se trata de WordPress, você pode até simplificar o processo usando um plugin baseado em Ajax.

Neste artigo, apresentaremos o Ajax e como ele funciona. Também vamos orientá-lo sobre como começar a usar o Ajax no WordPress. Vamos pular direto!

O que é Ajax e como funciona?

Ajax reúne várias linguagens de programação diferentes, como HTML, CSS, JavaScript e muito mais. Em ação, ele funciona nos bastidores para receber solicitações de um navegador da Web, enviá-las ao servidor e transferir os resultados de volta ao navegador.

Como usuário da web, você não saberá que o Ajax está funcionando. Você simplesmente terá uma experiência altamente interativa. Em seu próprio site, por exemplo, você pode usar Ajax para aceitar curtidas em postagens de usuários que estão logados e exibir uma contagem em tempo real.

Por que o Ajax é útil?

Com o Ajax, os usuários não precisam recarregar uma página para ver certas alterações nela. Isso significa que seu site permanecerá rápido e proporcionará uma experiência de usuário mais suave. Como o Ajax é eficiente, enviando apenas os dados necessários, ele pode maximizar a largura de banda e evitar transferências de dados mais pesadas.

Como usuários da web, colhemos os benefícios do Ajax o tempo todo. Um exemplo é a função de pesquisa de preenchimento automático do Google.

Outros exemplos com os quais você pode estar familiarizado incluem comentários no Facebook e curtidas no Instagram. O Ajax provavelmente funciona em qualquer lugar onde você possa interagir com uma página da Web e receber informações em troca instantaneamente.

Introdução ao Ajax no WordPress

Quando se trata de WordPress, existem algumas maneiras pelas quais o Ajax é útil. Primeiro, vamos dar uma olhada no URL do Ajax e como usá-lo juntamente com os ganchos de função do WordPress.

A URL Ajax no WordPress

Como o WordPress usa Ajax por padrão no painel de administração, adicionar mais funcionalidades Ajax não é difícil. No entanto, se você quiser usar o Ajax no front-end do seu site, precisará entender como funciona a URL do Ajax.

No WordPress, seu arquivo admin-ajax.php tem uma URL. Isso fornece as informações necessárias para enviar dados para processamento e é vital para o desenvolvimento Ajax front-end. O WordPress emprega uma chamada wp_localize_script() para usar a URL Ajax para conectar as funções JavaScript e PHP, já que o PHP não pode espelhá-las diretamente sem alguma ajuda.

Como usar o Ajax Action Hook no WordPress

O WordPress emprega hooks em sua programação, como forma de plugins e temas interagirem com o WordPress Core. Os ganchos vêm em duas variedades: 'ações' e 'filtros'. Com o Ajax, você usará ganchos de ação para executar funções.

As ações permitem que você adicione dados ao WordPress ou altere a forma como ele opera. Com Ajax, você usará a ação wp_ajax_(action). Uma função personalizada pode ser conectada a isso, para ser executada durante uma chamada Ajax.

Por exemplo, este código de amostra do WordPress mostra como uma chamada Ajax e um objeto JavaScript podem ser combinados no mesmo arquivo para executar uma ação:

<?php

add_action( 'wp_ajax_my_action', 'my_action' );

função minha_ação() {
global $wpdb; // é assim que você obtém acesso ao banco de dados

$qualquer coisa = intval($_POST['qualquer coisa']);

$qualquer coisa += 10;

echo $qualquer coisa;

wp_die(); // isso é necessário para encerrar imediatamente e retornar uma resposta adequada
}

Você também pode criar arquivos JavaScript separados para suas ações Ajax. Você só precisa ter certeza de usar o URL Ajax, para que as chamadas não sejam perdidas.

Como usar o Ajax trabalhando com um plug-in de exemplo (3 etapas)

Se você quiser experimentar o Ajax, a melhor maneira é criar um plugin com ele. Felizmente, existem muitos trechos de código de exemplo ou plug-ins básicos por aí com os quais você pode começar. Para este exemplo, vamos usar alguns códigos de amostra do WordPress Plugin Boilerplate disponíveis para download.

Passo 1: Crie as Estruturas de Arquivo Apropriadas

Primeiro, você precisará nomear seu plug-in e criar as estruturas de arquivo apropriadas para ele. O nome deve ser único e não entrar em conflito com nenhuma outra ferramenta no diretório de plugins do WordPress. Isso ocorre porque quando um usuário carrega seu plug-in, ele vai para o diretório wp-content/plugins/ .

Depois de decidir um nome, você precisa criar pelo menos os três arquivos a seguir em seu próprio diretório wp-content/plugins/ :

  • plugin-name.php
  • plugin-name.js
  • plugin-name.css

Você vai querer colocar o arquivo .php na pasta do seu novo plug-in e criar subpastas separadas para os arquivos JavaScript e CSS residirem. Todos os arquivos necessários para o funcionamento do plug-in precisarão estar localizados na mesma pasta principal.

Na próxima etapa, você verá que o código de amostra que estamos usando vem com estruturas de arquivo pré-criadas. Achamos importante entender como começar do zero e por que seus arquivos precisam ser estruturados de uma determinada maneira.

Etapa 2: escolha algum código de exemplo para começar

Usar um arquivo de código de amostra é um bom ponto de partida ao experimentar o Ajax em seu primeiro plug-in. Você sempre deseja verificar novamente seu código de amostra, no entanto, para garantir que seja seguro e não contenha erros.

Como mencionamos anteriormente, vamos usar o WordPress Plugin Boilerplate para o nosso exemplo. Este código de amostra vem empacotado com os arquivos necessários para concluir seu plug-in.

Este plugin de amostra também segue os padrões de codificação e documentação do WordPress. Você pode baixar o arquivo .zip do plug-in no site clichê para começar.

Etapa 3: inserir ações em seu código

O código de amostra do plug-in que estamos usando é construído com Programação Orientada a Objetos (OOP). Isso ajuda os programadores a organizar seu código e cria um padrão de desenvolvimento facilmente compartilhável e reutilizável.

Além disso, o código vem empacotado com todos os arquivos necessários para o desenvolvimento do plug-in, incluindo os arquivos de ativação e desativação no diretório /includes/ . Você também achará fácil localizar os arquivos voltados para o público e para o administrador, conforme necessário.

Vamos dar uma olhada em nosso plugin de amostra, visualizando o início do arquivo plugin-name.php :

<?php

/**
* O arquivo de inicialização do plug-in
*
* Este arquivo é lido pelo WordPress para gerar as informações do plugin no plugin
* área administrativa. Este arquivo também inclui todas as dependências usadas pelo plugin,
* registra as funções de ativação e desativação e define uma função
* registra as funções de ativação e desativação e define uma função
* que inicia o plugin.
*
* @link http://example.com
* @desde 1.0.0
* @package Plugin_Name
*
* @wordpress-plugin
* Nome do Plugin: WordPress Plugin Boilerplate
* URI do plug-in: http://example.com/plugin-name-uri/
* Descrição: Esta é uma breve descrição do que o plugin faz. É exibido na área de administração do WordPress.
* Versão: 1.0.0
* Autor: Seu Nome ou Sua Empresa
* URI do autor: http://example.com/
* Licença: GPL-2.0+
* URI da licença: http://www.gnu.org/licenses/gpl-2.0.txt
* Domínio de texto: nome do plugin
* Caminho do domínio: /idiomas
*/

Todas as informações contidas nesta parte do código são importantes para registrar seu plugin no WordPress. É assim que o diretório do plug-in saberá o que exibir para o seu plug-in.

Agora você precisará fazer algumas coisas para conectar todos os pontos, incluindo:

  • Certifique-se de que sua URL Ajax esteja disponível para seu script. Você pode usar wp_localize_script() para fazer isso.
  • Crie uma classe plugin-name com a classe Plugin-Name{} no arquivo plugin-name.php . É aqui que você definirá seus ganchos de ação.
  • Crie uma função JavaScript correspondente em seu arquivo plugin-name.js .

Um elemento importante da abordagem Ajax é definir quem pode usar cada função, especialmente ao criar interatividade de front-end. Vamos conectar uma ação de front-end com algum código de amostra do WordPress:

if ( is_admin() ) {
add_action( 'wp_ajax_my_frontend_action', 'my_frontend_action' );
add_action( 'wp_ajax_nopriv_my_frontend_action', 'my_frontend_action' );
add_action('wp_ajax_my_backend_action', 'my_backend_action');
// Adicione outros ganchos de ação de back-end aqui
} outro {
// Adicione ganchos de ação de front-end não Ajax aqui
}

Vamos observar algumas coisas neste exemplo. Primeiro, essas ações estarão disponíveis para qualquer pessoa no site, esteja ela conectada a uma conta ou não. Isso é indicado pela chamada 'wp_ajax_nonpriv_()'. Em segundo lugar, você pode ver que também há ações administrativas de back-end sendo conectadas durante as ações de front-end.

Para entender o processo que ocorre nesse conjunto de ações, também é importante saber que my_frontend_action acionará a função PHP my_frontend_action_callback().

Etapa 4: teste e depure seu plug-in

Depois de configurar todos os ganchos de ação e as funções correspondentes necessárias, você desejará testar e potencialmente depurar seu plug-in (se houver algum problema). Seu host da web pode oferecer uma ferramenta de depuração como parte de seu pacote de hospedagem.

Aqui no WP Engine, fornecemos o log de erros do WP Engine para ajudá-lo a encontrar pontos problemáticos.

Nosso log de erros fornece um passo a passo codificado por cores de quaisquer erros no código do seu site e onde eles interagem com nossos servidores ou outras partes do seu site. Isso torna a solução de problemas muito mais fácil, esteja você trabalhando com Ajax ou algo totalmente diferente.

Explorar outros recursos e ferramentas do WP Engine

Agora que você está no caminho certo para criar plug-ins incríveis do WordPress com Ajax, talvez queira avaliar quais outras ferramentas serão necessárias. O WP Engine oferece uma plataforma de experiência digital (DXP) completa e está aqui para ajudá-lo a criar novos plugins para WordPress.

Se você está interessado em nosso WP Engine Error Log para poder executar um plug-in livre de bugs ou apenas precisa de uma hospedagem WordPress sólida e segura, oferecemos uma ampla variedade de planos e recursos para você usar!