Um tutorial sobre como usar ajax em wordpress

Video: WordPress REST API Tutorial (Real Examples)

AJAX é uma tecnologia de web notável que nos moveu para além do simples “clique no link, ir para outra página" estrutura de A Internet 1.0.

AJAX, que significa Asynchronous javascript e XML, permite sites para buscar dinamicamente e exibir o conteúdo sem que o usuário se afastando da página atual. Isto leva a uma experiência de usuário muito mais interativa, e pode acelerar as coisas demasiado desde uma página web totalmente novo não precisa ser carregado. Felizmente, fazendo uso de AJAX é bastante fácil de fazer de dentro do ambiente WordPress, e hoje eu vou mostrar-lhe como.

Este tutorial Ajax deve ser considerado bastante avançado, e continua a partir da última vez em que nós aprendemos como usar as tabelas de banco de dados personalizados a partir de um template WordPress - no meu exemplo, foi utilizada uma tabela simples existente de dados de clientes. Quando se trata de inserir as coisas de volta no banco de dados, porém, vamos estar fazendo uso de um pouco de magia AJAX dentro de WordPress. Trabalhando com o costume tabelas do banco de WordPressTrabalhando com o costume tabelas do banco de WordPressUm rápido exame do Melhor do WordPress Plugins página irá revelar algumas das muitas maneiras originais e de nicho que você pode fazer o seu trabalho do blog mais difícil. E se você já tem um banco de dados de ...consulte Mais informação

Todo o código no tutorial de hoje será, portanto, referenciando o que escreveu na última vez, mas se você está apenas procurando como fazer AJAX em WordPress, então é igualmente relevante.

Por que usar AJAX?

O uso mais comum de AJAX está relacionada com formas - verificar se um nome de usuário é tomada, ou preencher o restante do formulário com perguntas diferentes, dependendo de uma resposta específica que você dá. Basicamente, porém, você usar AJAX sempre que quiser um evento (como um usuário clicar alguma coisa, ou digitando alguma coisa) amarrado a uma server-side ação que ocorre no fundo.

Vamos usá-lo para adicionar novas entradas para o nosso importante banco de dados tabela cliente personalizado, mas você provavelmente pode chegar a algo mais emocionante.

Video: WordPress Load Post With AJAX

Visão geral de como usar AJAX em WordPress

1. Editar o seu modelo personalizado para incluir um formulário ou javascript evento que irá enviar dados via jQuery AJAX para admin-ajax.php incluindo todos os dados post que você quer passar. Certifique-se jQuery está sendo carregado.
2. Definir uma função em seu tema de function.php- leia variáveis ​​post, e retornar algo de volta para o usuário, se desejar.
3. Adicionar um gancho ação AJAX para sua função.

Criando o formulário

Vamos começar criando um simples formulário no front-end para a entrada de novos detalhes do cliente. Não é nada complicado, basta substituir a parte principal do seu modelo personalizado com este código que começou na semana passada, em torno de onde ocorre a verificação is_user_logged_in ():

se (is_user_logged_in ()) :? gt;

A única coisa que pode parecer estranho para você é que não é o uso de um campo de entrada oculto chamado açao - este contém o nome da função que vai desencadear via AJAX.

O Receptor PHP

Em seguida, abra-se functions.php e adicione a seguinte linha para garantir jQuery está sendo carregado em seu site:

wp_enqueue_script ( `jquery`) -

A estrutura básica para escrever uma chamada de AJAX é a seguinte:

myFunction function () {// fazer somethingdie () -} add_action ( `wp_ajax_myFunction`, `myFunction`) - add_action ( `wp_ajax_nopriv_myFunction`, `myFunction`) -

Essas duas últimas linhas são ganchos de ação que contam WordPress “Eu tenho uma função chamada myFunction, e eu quero que você escute para fora para ele, porque ele vai ser chamado através da interface AJAX” - a primeira é para usuários de nível de administração, enquanto wp_ajax_nopriv_ é para usuários que não estão conectados. Aqui está o código completo para functions.php que vamos usar para inserir dados em nossa tabela de clientes especial, que eu vou explicar em breve:

wp_enqueue_script ( `jquery`) - addCustomer function () {global $ wpdb- $ name = $ _ POST [ `name`] - $ phone = $ _ POST [ `telefone`] - $ email = $ _ POST [ `email`] - $ address = $ _POST [ `endereço`] - if ($ wpdb-gt; insert ( `clientes`, array ( `name` = gt; nome $, `email` = gt; $ email, `endereço` = gt; $ endereço, `telefone` = gt; $ phone)) === FALSE) {echo "Erro"-} else {echo "cliente `". $ Name. "`Adicionado com êxito, linha ID é ". $ Wpdb-gt; insert_id-} morrer () -} add_action ( `wp_ajax_addCustomer`, `addCustomer`) - add_action ( `wp_ajax_nopriv_addCustomer`, `addCustomer`) - // não é realmente necessário

Tal como antes, estamos declarando a $ Wpdb mundial para nos dar acesso direto ao banco de dados. Estamos em seguida, pegar o POSTAR variáveis, que contêm os dados de formulário. Cercado por uma instrução IF é a função $ Wpdb-gt; inserir, que é o que usamos para inserir dados em nossa mesa. Desde WordPress oferece funções específicas para a inserção de mensagens regulares e dados de meta, este $ Wpdb-gt; inserir método é geralmente usado apenas para tabelas personalizadas. Você pode ler mais sobre isso no Codex, mas basicamente leva o nome da tabela a ser inserido, seguido de um ordem do pares de coluna / valor.

o === FALSE verifica para ver se a função inserção falhou, e em caso afirmativo, ele gera “erro“. Se não, nós estamos apenas enviando uma mensagem para o usuário que foi adicionado ao cliente X, e ecoando o $ Wpdb-gt; insert_id variável, o que indica a variável auto-incremento da última operação de inserção que aconteceu (Supondo que você tenha definido um campo que auto-incrementos, como um ID).

Finalmente, morrer() vai substituir o padrão morrer (0) fornecido pelo WordPress - isso não é essencial como tal, mas sem ele você vai conseguir 0 anexado ao fim de qualquer coisa que você enviar de volta para o modelo.

o javascript

O passo final é a parte mágica - o javascript real que irá iniciar a chamada AJAX. Você notará que na forma adicionado anteriormente, o campo de ação foi deixado em branco. Isso é porque nós estaremos substituindo isso com a nossa chamada de AJAX. A forma geral para fazer isso seria:

jQuery.ajax ({type:"POSTAR", Url: "/wp-admin/admin-ajax.php", // nossa filedata manipulador PHP: "myDataString", O sucesso: function (resultados) {// fazer algo com dados retornados})} -

Essa é a estrutura básica de chamada AJAX vamos usar, mas certamente não é a única maneira que você pode fazê-lo. Você pode estar se perguntando por que estamos nos referindo a wp-admin aqui, embora este será no front-end do site. Este é apenas onde o manipulador de AJAX reside, se você estiver usando-o para funções frontais ou laterais admin - confuso, eu sei. Cole o seguinte código diretamente para o modelo cliente:

Na primeira linha, estamos anexando nossa função ajaxSubmit à forma que fizemos anteriormente - por isso, quando o usuário clica em enviar, ele vai através da nossa função especial AJAX. Sem isso, a nossa forma não fará nada. Na nossa ajaxSubmit () função, a primeira coisa que fazemos é para serializar () do formulário. Isso só leva todos os valores do formulário, e os transforma em uma longa seqüência que o nosso PHP irá analisar mais tarde. Se tudo der certo, vamos colocar os dados retornados para o DIV com o ID de feedback.

É isso aí. Salve tudo, atualizar e tente enviar alguns dados do formulário. Se você está tendo problemas, você pode visualizar o código completo do modelo de página aqui (Baseado no tema 20-11 padrão), e o código para adicionar ao functions.php aqui (Não substituem, basta adicionar esta no final).

Coisas para manter em mente

Segurança: Este código não é produção pronta e é para fins de aprendizagem única. Deixamos de lado a um ponto-chave, e isso é o uso de um wp-nonce - um código one-off gerado por WordPress que garante a solicitação AJAX só é vindo de onde foi intended- uma senha se você quiser. Sem isso, a sua função poderia efetivamente ser explorado para inserir dados aleatórios. ataques de injeção SQL não são um problema, porém, porque nós encaminhado consultas através do WordPress $ Wpdb-gt; inserir função - WordPress limpa quaisquer entradas para você e faz-los seguros.

Atualizando a tabela de clientes: Agora, nós só enviar de volta uma mensagem de confirmação, mas a tabela de clientes não é atualizado - você só vai ver as entradas adicionais, se você atualizar a página (Que tipo de derrotas a finalidade de fazer tudo isso via AJAX). Veja se você pode fazer uma nova função AJAX que pode dinamicamente saída da mesa.

Validação de entrada: Porque não há nenhuma validação acontecendo com os dados do formulário, é realmente possível adicionar entradas em branco ou várias entradas se você pressionar muitas vezes. Alguns validação de entrada nos campos de formulário, limpá-los quando concluído, como SQL bem para verificar o e-mail ou número de telefone que ainda não existe no banco de dados seria útil.

É isso de mim esta semana - se você teve quaisquer problemas seguindo este tutorial, então fique à vontade para entrar em contato através dos comentários e eu vou fazer o meu melhor para ajudar você- ou se você está tentando personalizar este de alguma forma , fique à vontade para expor suas idéias me. Espero que isso realmente vai mostrar o quanto você pode fazer a partir do WordPress simplesmente combinando um pouco de javascript, PHP e MySQL. Como sempre, não se esqueça de verificar todas as outras artigos WordPress.