Ajax, ou Asynchronous JavaScript e XML, é usado para se comunicar com scripts do servidor e permite carregar conteúdo dinâmico sem precisar recarregar a página.

Digamos, por exemplo, que você está construindo um site da Web para uma instituição de caridade local e você deseja incentivar uma vibração positiva. Você pode adicionar um botão chamado "Mostre algum amor! »Com contador na página inicial e, graças ao AJAX, toda vez que o botão é acionado (clicado por um visitante), o contador é incrementado sem recarregar a página.

Este é o exemplo que construiremos neste tutorial.

Neste tutorial, você aprenderá mais sobre o que é o AJAX, como ele pode ser usado e como criar recursos impressionantes com ele no WordPress.

Vamos começar.

O básico do AJAX

  • O feed AJAX geralmente segue as seguintes etapas:
  • Iniciar uma chamada AJAX devido à ação do usuário
  • Receber e processar o pedido no servidor
  • Capture a resposta e execute todas as ações necessárias via JavaScript
  • Configurando um novo ambiente de tema

Vamos colocar isso em prática no WordPress. Nosso primeiro exemplo exibe um pop-up simples contendo o número de comentários de um artigo quando clicamos no título. Usaremos um tema filho baseado no " vinte Sixteen Do WordPress.

Aqui está o que você precisa fazer:

Crie uma nova pasta no diretório Themes em sua instalação do WordPress em " wp-content "E chame-o de" teste ajax ", crie os dois arquivos requerido pelo WordPress, ou seja " functions.php "," Styles.css "e adicione um novo arquivo chamado" script.js ". Adicione o seguinte código ao cabeçalho da sua folha de estilo CSS (style.css).

/ * Nome Tema: Ajax Testing Tema Tema URI: http://premium.wpmudev.com Descrição: Um tema para testar nosso conhecimento AJAX Autor: Daniel Pataki Autor URI: http://danielpataki.com Template: twentysixteen Versão: 1.0.0 License GNU general Public License ou mais tarde v2 Licença URI: http://www.gnu.org/licenses/gpl-2.0.html * /

A folha de estilo do tema pai deve ser carregada pelo tema filho. No passado, isso era feito importando o arquivo CSS para o tema filho, mas a maneira recomendada de fazer isso é usar "enfileiramento". Lembre-se de que mostramos como usar esse recurso.

Vamos adicionar folha de estilo do pai e nosso arquivo JavaScript diretamente:

add_action ( 'wp_enqueue_scripts', 'ajax_test_scripts'); função ajax_test_scripts () {wp_enqueue_style (pai-style ', get_template_directory_uri ()' /style.css. '); wp_enqueue_script (. get_stylesheet_directory_uri 'ajax-test-scripts' () '/scripts.js', array ( 'jquery'), 1.0.0 ', true); }

Se você sentir que tem energia para dar um passo adiante, encontre uma imagem legal, corte-a para 880 x 660 pixels e coloque-a na pasta do tema infantil e, em seguida, renomeie-a " screenshot.png " Ele aparecerá na seção de aparência, quando você quiser ativar o tema.

tema de exemplo do ajax WordPress

Uma vez que este tema infantil é baseado em “ vinte Sixteen E que não mudamos nada (ainda!), O site deve se parecer exatamente com um tema clássico com o tema " vinte Sixteen ".

Adicionando um botão

Para começar, adicionaremos o botão " Mostrar o amor unpeu! " Um ótimo lugar para exibi-lo seria na barra lateral de artigos temáticos.

Após algumas pesquisas, verifica-se que a barra lateral é criada por uma função chamada " twentysixteen_entry_meta () »Que reside no diretório« inc / template-tags.php ".

Esta função é " conectável O que significa que podemos modificá-lo definindo-o em nosso próprio arquivo functions.php. A primeira etapa é copiar e colar toda a função em nosso próprio arquivo functions.php:

função twentysixteen_entry_meta () {if ('post' === get_post_type ()) {$ author_avatar_size = apply_filters ('twentysixteen_author_avatar_size', 49); printf (' % 1 $ s % 2 $ s % 3 $ s ', get_avatar (get_the_author_meta ('user_email'), $ author_avatar_size), _x ('Autor', 'Usado antes do nome do post autor.', 'vinte e seis'), esc_url (get_author_posts_url (get_the_author_meta ('ID'))), get_the_author ()); } if (in_array (get_post_type (), array ('post', 'attach'))) {twentys dezesseis_entry_date (); } $ format = get_post_format (); if (current_theme_supports ('pós-formatos', $ format)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Formato', 'Usado antes do formato de postagem.', ' vinte e dezesseis ')), esc_url (get_post_format_link ($ format)), get_post_format_string ($ format)); } if ('post' === get_post_type ()) {twentysixteen_entry_taxonomies (); } if (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ ('Deixe um comentário em% s ', 'twentysixteen'), get_the_title ())); echo ' '; }}

Vamos adicionar nossa chave ao final de todos os metadados:

$ love = get_post_meta (get_the_ID (), 'show_some_love', verdadeiro); $ love = (vazio ($ love))? 0: $ amor; eco ' '. $ love. ' ';
Explicar todo este código:

A primeira linha recupera o número de amores que o artigo recebeu. Em alguns casos, esses dados não existirão, ou seja, quando o botão ainda não foi clicado. Por este motivo, usamos

a segunda linha no código para definir o valor como 0 se o valor estiver vazio.

A terceira linha entrega o botão, que consiste em um vão contendo uma imagem e o número de amores. Deixei a fonte da imagem vazia porque quero usar um SVG lá. Você pode usar um SVG codificado em base64 para criar uma linha de imagem. Isso evita que você faça exigências e fará com que seu site mais eficiente.

Usei esta pequena imagem grátis disponível esta ligação. Copie e cole o código que você recebe na fonte da imagem como este:

$love = get_post_meta( get_the_ID(), 'show_some_love', true );
$love = ( empty( $love ) ) ? 0 : $love;
echo '<span class="love-button"> <img width="28" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0MHB4IiBpZD0iTGF5ZXJfMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0MCA0MCIgd2lkdGg9IjQwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xOS45NzkwMDAxLDkuMTk1MzAwMSAgQzI1LjYzOTIwMDItMS44ODY3LDM4LjUxMTY5OTcsMy4zOTU5OTk5LDM3Ljk0OTE5OTcsMTMuMzAyN0MzNy4zNjM4LDIzLjYxNjE5OTUsMjIuODc0NTAwMywyNy4xNzM3OTk1LDE5Ljk3OTAwMDEsMzQuOTgxODk5MyAgQzE3LjA4MzAwMDIsMjYuOTc5MDAwMSwyLjc4OTU5OTksMjMuODExNTAwNSwyLjAwODMwMDEsMTMuMzAyN0MxLjI3MzksMy40MDc3MDAxLDE0LjkzNTk5OTktMS45MzEyLDE5Ljk3OTAwMDEsOS4xOTUzMDAxeiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZGNTk0RjsiLz48L3N2Zz4="><span class="number">' . $love . '</span></span>';

Eu também usei um pouco de CSS para o estilo do botão para dar um efeito de foco. Não é muito óbvio se é um botão, mas será para nosso teste simples.

.love botão img {margin-right: 6px; opacidade: 0.7; cursor: ponteiro; } Img-botão .love: hover {opacidade: 1; }

botão do amor WordPress tutorial

Disparando uma ação

Finalmente, chegamos ao nosso JavaScript! Devemos segmentar nosso item e detectar um clique nele. Veja como fazê-lo:

(function ($) {$ (document) .on ('clique', '.love-button img', function () {alert ("o amor é compartilhado");})}) (jQuery);

Se você clicar no botão neste ponto, deverá ver um alerta JavaScript com o texto "O amor é compartilhado". "

Requisitos de dados

Em vez deste texto, precisamos acionar uma chamada AJAX. Antes de escrever nosso código, entenderemos o que precisamos enviar.

O URL AJAX

Em primeiro lugar, precisamos de um local para enviar dados. O local para onde enviamos os dados irá processar os dados e atender a chamada. WordPress tem um local integrado para lidar com chamadas AJAX, que podemos usar: o " admin-ajax.php " dentro " wp-admin " Não podemos adicionar este URL ao nosso script (usar codificação "bruta" não é aceitável), Então, vamos usar alguns WordPress astuto.

A função wp_localize_script () Foi originalmente planejado para traduzir strings em arquivos JavaScript, o que faz bem. Também podemos usá-lo para passar variáveis ​​para nossos arquivos JavaScript, neste caso a URL do nosso arquivo AJAX. Adicione o seguinte código ao nosso arquivo " funções Como segue:

wp_localize_script ('ajax-test-scripts', 'ajaxTest', array ('ajax_url' => admin_url ('admin-ajax.php')));

O resultado desse último objeto será nomeado ajaxTest, que conterá uma determinada matriz no último parâmetro como propriedades. Para inserir o valor, podemos usar ajaxTest.ajax_url em nosso código JavaScript.

O identificador do artigo

Enviaremos dados arbitrários como identificador do artigo (que usaremos para identificar o artigo ao qual queremos "adicionar um pouco de amor") Isso pode ser recuperado do DOM. Dê uma olhada na estrutura usada no tema "Vinte e dezesseis" abaixo:

Artigo estrutura Vinte Sixteen

Nosso botão tem um "artigo" como um de seus ancestrais. Este elemento possui a classe e contém o identificador numérico do artigo. Embora não seja a solução mais elegante, podemos obter o ID de lá.

$ (Documento) .no ( 'clique', 'img .love-button', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). Attr ( 'id') .replace ( 'post', '')); console.log (id)})

A acção

O WordPress também requer que enviemos um parâmetro denominado action. Como todas as ações serão enviadas para admin-ajax, precisamos de uma maneira de diferenciar essas solicitações, daí o uso deste parâmetro.

Enviando uma solicitação AJAX

Agora podemos juntar tudo. Precisamos criar uma chamada AJAX para " wp-admin / admin-ajax.php Que contém o ID do artigo e uma ação. Aqui está como deve ser.

(Function ($) {$ (documento) .no ( 'clique', 'img .love-button', function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). . attr ( 'id') substituir ( 'post', '')); $ .ajax ({url: tipo ajaxTest.ajax_url 'post', os dados: {action: 'add_love' post_id: post_id} , o sucesso: function (response) {alert ( 'sucesso, a nova contagem é' + resposta)}})})}) (jQuery);

$ .ajax () é a função usada que utiliza vários parâmetros. O URL contém o destino que atualmente é nosso arquivo Ajax-url.php ". O tipo está definido como " postar » como todos os pedidos enviados por um formulário. O parâmetro de dados é um objeto que contém " key-value Que queremos enviar para o servidor. Mais tarde poderemos lê-los com $ _POST ['action'] e $ _POST ['post_id'].

processamento de aplicativos

Normalmente você precisa editar o arquivo " admin-ajax.php », Porque o pedido é enviado para lá. É um arquivo de sistema, então não vamos modificá-lo. O WordPress permite que você passe solicitações AJAX usando colchetes com o parâmetro de ação. O modelo é o seguinte:

Se você nomeou sua ação add_love Você deve anexar uma função a um gancho chamado " wp_ajax_add_love E / ou wp_ajax_nopriv_add_love ". As ações NoPriv ”Executa para usuários desconectados, uma roda somente para usuários logados. No nosso caso, gostaríamos de usar os dois. Como um teste rápido, definiremos um valor de retorno padrão:

O parâmetro de sucesso é uma função, que será executada quando a chamada AJAX for concluída. Mostraremos um alerta simples que mostra “Muito bem! A nova conta é ”com nossa resposta adicionada no final.

add_action ( 'wp_ajax_add_love', 'ajax_test_add_love'); add_action ( 'wp_ajax_nopriv_add_love', 'ajax_test_add_love'); função ajax_test_add_love () {echo 4; morrer (); }

Anexamos nossa função aos dois suportes, um feito eco 4 e, em seguida, usou a função " morrer () ". Isso é necessário no WordPress, caso contrário, você receberá um 0 no final de cada resposta. Se você clicar no botão agora, verá o seguinte:

jquery botão exemplo ajax

Para obter a contagem de curtidas real, tudo o que precisamos fazer é recuperar o número atual, incrementá-lo em um, salvá-lo no banco de dados e exibir o novo número.

função ajax_test_add_love () {$ amor = get_post_meta ($ _POST [ 'post_id'] 'show_some_love', true); Amor = $ (empty ($ amor))? 0: $ amor; $ Amor ++; update_post_meta ($ _ POST [ 'post_id'], 'show_some_love' amor $); echo $ amor; morrer (); }

Se você clicar no botão agora, verá a janela pop-up exibindo "1". Se você atualizar a página, deverá ver o novo número exibido. Clicar no botão novamente fará com que 2 " Tudo o que precisamos fazer agora é garantir que o número seja refletido diretamente na IU.

Faça alterações na interface do usuário usando a resposta

Esta parte parece fácil (porque é), mas geralmente é o mais difícil de montar. Por enquanto, tudo o que precisamos fazer é localizar o elemento que contém o número atual e modificar seu conteúdo pela resposta.

(Function ($) {$ (documento) .em ( 'clique', 'img .love-botão ", function () {var = parseInt post_id ($ (this) .parents (' article.post:first '). . attr ( 'id') replace ( 'post', '')); var $ number = $ (this) .parent () encontrar (. 'número') $ .ajax ({url :. ajaxTest.ajax_url, tipo: 'post', os dados: {action: 'add_love' post_id: post_id,}, o sucesso: function (response) {$ number.text (resposta);}})})}) (jQuery);

Eu apenas adicionei duas linhas ao nosso código JS anterior. Na linha 5, eu armazeno o elemento que contém o número na variável $ number. Na linha 14, modifico o texto desse elemento para exibir a resposta, que é o novo número.

É isso, basicamente você deve ser capaz de ver esse novo recurso em ação no seu tema personalizado. Se você tiver algum problema, entre em contato conosco. Você tem outra dica que deseja compartilhar? Faça isso na seção de comentários.