Usando AJAX com PHP em seu site WordPress com seu próprio plugin
Publicados: 2021-07-23
Neste artigo, discutimos sobre AJAX com PHP para o seu site WordPress.
AJAX é uma técnica de desenvolvimento web que ajuda os usuários a desenvolver aplicativos interativos no site. Ele fornece aos usuários uma experiência na Web mais rápida e suave. Ele permite que os usuários façam alterações ou atualizem o conteúdo da página da Web sem recarregar ou atualizar as páginas. É preciso conhecer várias linguagens de programação para trabalhar com AJAX.
O que é AJAX?
AJAX significa 'JavaScript assíncrono e XML'. Como mencionado anteriormente, ele é usado para criar aplicativos da Web que são divertidos, em constante mudança e interativos.
Alguns dos exemplos populares de aplicativos da web desenvolvidos com a ajuda de AJAX e tecnologias relacionadas são o Google Maps, o recurso de preenchimento automático na pesquisa do Google, comentários e curtidas em várias postagens de mídia social e muitos outros.
Noções básicas de AJAX
O Ajax com a ajuda de várias linguagens de programação, como JavaScript, HTML, CSS e XML, desenvolve aplicativos e sites da Web mais rápidos e aprimorados. Além dessas linguagens de programação, para o desenvolvimento de aplicações web, AJAX com PHP e outras linguagens do lado do servidor também estão sendo utilizadas.
Ele usa JavaScript para a exibição de conteúdo, enquanto o CSS ajuda na apresentação e no Document Object Model. Ele ainda usa XHTML para conteúdo.
Em aplicativos ou páginas da Web tradicionais, as informações são trocadas com o servidor de forma síncrona. Por outro lado, nas aplicações web, que foram projetadas para usar AJAX, quando ocorre um evento como clicar em um botão ou preencher um formulário, o JavaScript cria uma solicitação XMLHTTP e a envia ao servidor em formato XML.
O servidor processa a solicitação cria uma resposta do lado do servidor e a envia de volta ao navegador. O JavaScript processa a resposta e o conteúdo na tela de exibição atual é atualizado. Como não é necessário recarregar ou atualizar as páginas, os usuários não estarão cientes da transferência de qualquer informação para o servidor.
Habilidades necessárias para trabalhar com AJAX no WordPress
Como se entende a partir da discussão acima, os usuários precisam das seguintes habilidades para utilizar o AJAX corretamente.
• Conhecimento de linguagens de programação como JavaScript, HTML e CSS
• Proficiência em linguagens do lado do servidor, como PHP e outras
• Noções básicas de XML ou JSON
Vantagens do AJAX
As várias vantagens do AJAX são discutidas abaixo
• Ele quase suporta todos os navegadores usados nos tempos atuais
• Envolve um tempo de resposta mais rápido, o que significa uma melhor experiência do usuário em termos de velocidade e desempenho
• Bibliotecas JavaScript de código aberto, como Prototype, jQuery, etc, estão disponíveis para uso
• Reduz o tempo entre o cliente e o servidor, pois o tempo de ambos os usuários, assim como o do servidor, é economizado
• Como o servidor não precisa processar cargas de dados, ele ajuda a reduzir o uso de largura de banda e otimizar a operação da rede.
• Como a solicitação XMLHTTP é usada para recuperar dados, os usuários podem realizar várias tarefas simultaneamente.
AJAX no WordPress
O AJAX é usado no back-end do WordPress, como resultado, sempre que qualquer alteração for feita na postagem ou nas categorias, ou sempre que o administrador estiver moderando comentários, as atualizações serão feitas instantaneamente. AJAX é usado principalmente com JQuery no WordPress. O processo no qual o WordPress usa AJAX é o seguinte
• Quando uma solicitação é feita, ela passa pelo arquivo 'admin-ajax.php' localizado na pasta 'wp-admin'.
• Essas solicitações são necessárias para fornecer pelo menos um dado, também chamado de 'ação' geralmente, usando o método 'get' ou 'post'.
• Esta ação solicita ao código no arquivo 'admin-ajax.php' para criar dois ganchos, a saber, 'wp_ajax_my_action' e 'wp_ajax_nopriv_my_action'. O 'my_action' nesses ganchos indica o valor da variável 'action' do método 'get' ou 'post'.
• Enquanto o primeiro gancho é destinado às ações realizadas pelos usuários logados, o segundo gancho é destinado exclusivamente aos usuários desconectados.
• As funções enganchadas devem ser planejadas para a degradação graciosa, o que garante que mesmo se o JavaScript estiver desabilitado nos navegadores, os códigos ainda funcionarão.
Crie um plugin WordPress AJAX
Nesta seção, vamos pegar o exemplo de um plugin WordPress AJAX básico chamado 'Post Likes Counter'. Este plugin inclui os seguintes recursos:
• É atualizado instantaneamente no frontend
• Os usuários logados têm permissão para curtir as postagens.
• Se os usuários desconectados tentarem curtir a postagem, uma mensagem de erro aparecerá na tela
• Este plugin ajuda a manter o registro total do número de 'curtidas' e as exibe
Em primeiro lugar, é necessário criar e ativar um plugin WordPress vazio. Para criar um plugin, são necessários os seguintes passos.
Etapa 1 : selecione um nome exclusivo para o plug-in. Pode-se verificar os repositórios de plugins para garantir que o nome proposto do plugin já não esteja em uso. Normalmente, os desenvolvedores de plug-ins selecionam o nome de um plug-in com base na função que ele deve executar.
Etapa 2 : Na próxima etapa, é necessário criar um arquivo PHP usando o nome do plug-in selecionado. Como os usuários que irão instalar este plugin, será necessário colocar o arquivo PHP no diretório de plugins do WordPress 'wp-content/plugins-' para sua instalação, os plugins não podem compartilhar o mesmo nome para arquivos PHP.
Portanto, o nome do arquivo do plug-in também deve ser exclusivo para evitar conflito com outro plug-in no repositório. Pode-se usar seu nome ou o nome de sua empresa no prefixo para criar um nome exclusivo para o arquivo PHP.
Passo 3 : Deve-se notar que o plugin WordPress deve conter pelo menos um arquivo PHP junto com JavaScript, CSS, idiomas e arquivos de imagem. Se vários arquivos estiverem presentes, selecione um nome exclusivo para o diretório e um nome preferencial para o arquivo PHP principal.
Coloque todos os arquivos de plug-in no diretório criado e solicite aos usuários do plug-in que carreguem esse diretório inteiro para o diretório 'wp-content/plugins/'.
A instalação do WordPress pode ser configurada para alterar o diretório padrão do plugin 'wp-content/plugins/'. Portanto, deve-se usar plugin_dir_path() e plugin_url() como caminho absoluto e URLs em seu código PHP.
Modelo de postagem do tema
Depois de criar o plugin, é preciso encontrar o modelo de postagem 'single.php' do seu tema. Ele pode ser encontrado no diretório raiz do tema ativo. É usado quando um único post é consultado; onde se deseja colocar o plugin 'Post Like Counter'. O arquivo deve ser mantido aberto para edição.
Prepare o Post Template pronto para a chamada AJAX
É necessário criar um link para que os usuários possam curtir as postagens. Se os usuários habilitaram o JavaScript, eles podem usar os arquivos JavaScript (que serão criados posteriormente) ou então podem seguir o link diretamente. Para isso, insira o seguinte código no arquivo 'single.php'. Este código também pode ser adicionado a qualquer uma das partes do modelo que o arquivo 'single.php' contém.
// O valor da meta-chave 'curtidas' armazenará a contagem total de curtidas para uma postagem específica, mostrará 0 se for uma string vazia ID, "curtidas", true); $curtidas = ($curtidas == "") ? 0 : $ curtidas; ?> Esta postagem tem <span id='like_counter'></span> curtidas<br> // Vinculando ao arquivo admin-ajax.php. Cheque Nonce incluído para segurança extra. Observe a classe "user_like" para clientes habilitados para JS. ID.'&nonce='.$nonce); echo '<a class="user_like" data-nonce="' . $nonce . '">ID . '" href="'. $link. '">Curtir esta postagem</a>'; ?>
Endereçando a chamada Ajax sem JavaScript
Ao clicar no link criado no passo anterior, será encaminhado para o script 'admin-ajax.php'; no entanto, eles não encontrarão nenhum resultado útil, pois a função não foi criada para executar a ação. Para criar a função no arquivo do plugin e adicioná-la aos hooks criados pelo WordPress, insira o código a seguir.
<?php // usado aqui apenas para habilitar o realce de sintaxe. Deixe isso de fora se já estiver incluído em seu arquivo de plug-in.
// define as ações para os dois ganchos criados, primeiro para usuários logados e o próximo para usuários desconectados
add_action("wp_ajax_my_user_like", "my_user_like");
add_action("wp_ajax_nopriv_my_user_like", "please_login");
// define a função a ser acionada para usuários logados
function my_user_like() {
// nonce verifica se há uma camada extra de segurança, a função será encerrada se falhar
if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_like_nonce")) {
exit("Woof Woof");
}
// busca like_count para um post, define como 0 se estiver vazio, incrementa em 1 quando um clique é registrado
$like_count = get_post_meta($_REQUEST["post_id"], "curtidas", true);
$like_count = ($like_count == ') ? 0 : $like_count;
$new_like_count = $like_count + 1;
// Atualiza o valor de 'curtidas' meta-chave para o post especificado, cria novos metadados para o post se não existir nenhum
$like = update_post_meta($_REQUEST["post_id"], "curtidas", $new_like_count);
// Se a ação acima falhar, o tipo de resultado é definido como 'erro' e like_count definido para o valor antigo, se for bem-sucedido, atualizado para new_like_count
if($like === false) {
$result['tipo'] = "erro";
$resultado['like_count'] = $like_count;
}
senão {
$result['tipo'] = "sucesso";
$resultado['like_count'] = $new_like_count;
}
// Verifica se a ação foi acionada via chamada Ajax. Se sim, o código JS será acionado, caso contrário o usuário será redirecionado para a página de postagem
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$resultado = json_encode($resultado);
echo $resultado;
}
senão {
header("Local: ".$_SERVER["HTTP_REFERER"]);
}
// não se esqueça de terminar seus scripts com uma função die() - muito importante
morrer();
}
// define a função a ser acionada para usuários desconectados
function please_login() {
echo "Você deve fazer login para curtir";
morrer();
}
Se tudo der certo, quando um usuário logado clicar no link 'curtir esta postagem', o número de curtidas será atualizado automaticamente. Por outro lado, se o JavaScript estiver desabilitado, a página será atualizada exibindo as contagens atualizadas de 'curtidas'.
Adicionando suporte para JavaScript
Adicionar suporte para JavaScript pode facilitar as coisas. Para usar AJAX com PHP no WordPress, é necessário enfileirar a biblioteca jQuery junto com o arquivo JavaScript personalizado do plug-in. Para isso, escreva o seguinte código no plugin.
admin_url( 'admin-ajax.php' )));
// enfileira a biblioteca jQuery e o script que você registrou acima
wp_enqueue_script('jquery');
wp_enqueue_script( 'liker_script' );
}
Em seguida, é necessário criar o arquivo Javascript 'liker_script.js', que seria posteriormente carregado na pasta raiz do plug-in. O código a seguir é usado para criar o arquivo '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({
digite: "postagem",
dataType: "json",
url: myAjax.ajaxurl,
data : {action: "my_user_like", post_id : post_id, nonce: nonce},
sucesso: function(resposta) {
if(response.type == "sucesso") {
jQuery("#like_counter").html(response.like_count);
}
senão {
alert("Sua curtida não pode ser adicionada");
}
}
});
});
});
Como implementar AJAX em temas do WordPress
As etapas a seguir ajudarão na implementação do AJAX com PHP nos temas do WordPress. Por exemplo, vamos supor que nosso trabalho seja exibir as categorias em um menu suspenso e ao clicar em 'Categoria Pai', as subcategorias aparecerão em outra caixa suspensa. Esta tarefa será realizada com a ajuda dos seguintes passos
Etapa 1 : Selecione 'categorias' no lado esquerdo do painel e insira o nome das categorias na caixa que aparece no lado direito e insira o slug de categoria abaixo. Se a categoria pai estiver sendo criada, selecione 'nenhuma', ou se as subcategorias estiverem sendo criadas, selecione a categoria pai nas opções.
Etapa 2 : Nesta etapa, seria criado um modelo WordPress onde a funcionalidade AJAX será implementada. Abra um novo arquivo PHP e salve-o. Insira o seguinte código na página criada.
No código acima, 'Nome do modelo: Implementar Ajax', é o nome do modelo do WordPress e as funções 'get_header()' e 'get_footer()' são usadas para exibir o conteúdo do cabeçalho e rodapé da página.
Em primeiro lugar, é necessário incluir o arquivo da biblioteca jQuery na página, o que ajudará a adicionar o material AJAX. AJAX com PHP pode-se usar qualquer biblioteca JavaScript ou pode chamar AJAX com JavaScript bruto. No exemplo a seguir, a biblioteca JavaScript jQuery é usada para implementar AJAX.
Etapa 3 : Adicione o arquivo jQuery no modelo e chame a função 'wp_dropdown_categories' para que as categorias pai no menu suspenso possam ser recuperadas.
#content{largura:auto; altura:400px; margem:50px;}
<div>
</div>
<?php
Passo 4 : Insira o código jQuery para obter o ID da categoria principal que está sendo selecionada. Envie-o para o arquivo 'functions.php' para obter as subcategorias sob o ID da categoria pai selecionada. Os resultados podem ser enviados de volta para a página sem atualizá-la.
$(função(){
$('#main_cat').change(function(){
var $mainCat=$('#main_cat').val();
//chama ajax
$("#sub_cat").empty();
$.ajax({
url:"/wp-admin/admin-ajax.php",
digite: 'POST',
data:'action=my_special_action&main_catid=' + $mainCat,
sucesso:função(resultados)
{
// alerta(resultados);
$("#sub_cat").removeAttr("desativado");
$("#sub_cat").append(resultados);
}
});
}
);
});
Neste código acima, o código é adicionado no evento de alteração da lista suspensa de categorias principais com o ID '#main_cat'.
var $mainCat=$('#main_cat').val();
A função .val() ajuda a obter o valor da opção selecionada do menu suspenso e armazenar na variável '$mainCat'.
$("#sub_cat").empty();
A lista suspensa da subcategoria '#sub_cat' deve ser desocupada, se contiver algum valor anterior, antes de chamar o AJAX.
A seguinte linha jQuery ajudará na chamada de funções AJAX jQuery. Verifique os parâmetros da função AJAX fornecidos na seção abaixo.
url:"bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
digite: 'POST',
Para fazer o AJAX funcionar no WordPress, o parâmetro 'URL' é usado. Portanto, as solicitações serão enviadas para o arquivo 'admin-ajax.php'. Em seguida, os ganchos no arquivo 'functions.php' serão chamados para obter os dados postados que foram enviados para a URL: '/wp-admin/admin-ajax.php'
Para enviar os valores junto com a solicitação, é utilizado o parâmetro 'data'. Neste exemplo, dois argumentos com o parâmetro data são usados – action e main_catid.
Passo 5 : No arquivo 'functions.php', o código a seguir é usado para ligar uma ação.
add_action('wp_ajax_my_special_action', 'my_action_callback');
Nesta ação acima, o gancho tem dois argumentos. No primeiro argumento 'wp_ajax_my_special_action' , 'wp_ajax_ ' é o valor que é enviado junto com o parâmetro de dados 'action'. No segundo argumento 'my_action_callback', os dados serão processados e os resultados serão enviados de volta.
Este gancho de ação acima é para usuários logados. Para os usuários desconectados, pode-se conectar a seguinte ação
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
O código final após adicionar ganchos para usuários e função de retorno de chamada é o seguinte
function implement_ajax() {
if(isset($_POST['main_catid']))
{
$categories= get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
foreach ($categorias como $cat) {
$option .= 'term_id.'">';
$option .= $cat->cat_name;
$option .= ' ('.$cat->category_count.')';
$opção .= '';
}
echo 'Scegli...'.$option;
morrer();
} // fim se
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//para usuários que não estão logados.
Etapa 6 : Nesta etapa, crie uma nova página no painel e atribua o modelo a ela. Depois que a página estiver sendo carregada no navegador, a primeira lista suspensa com categorias pai será carregada nela.
Como a segunda lista suspensa está vazia, selecione a opção na primeira lista suspensa para verificar como funciona.
Assim, AJAX com PHP pode ser usado no site WordPress com a ajuda de um plugin recém-criado.