Como AJAX-ify seus comentários WordPress

Propaganda

Por padrão, o sistema de comentários do WordPress é lamentavelmente inadequado - uma das minhas maiores objeções é que, para postar um comentário, a página precisa ser atualizada. Você pode mudar para um sistema de terceiros como o Livefyre [URL quebrado removido] ou Disqus 3 maneiras de incentivar comentários no seu blog WordpressA obtenção de comentários em seu blog é um grande motivador para você continuar com o longo curso dos blogs. Só de saber que alguém está lá fora, apreciar o seu trabalho é ótimo, mas não ... consulte Mais informação , mas se você preferir manter tudo em casa ou fazer algum outro tipo de personalização, postar comentários do AJAX é o mínimo que você deve fazer.

Você pode ver um exemplo disso trabalhando aqui em Fazer uso de - quando você postar um comentário, não sairá da página. Em vez disso, enviaremos por uma chamada AJAX e, em seguida, enviaremos uma rápida "obrigado”Nota de volta. Leia para obter um tutorial completo.

Para usar funções não WordPress como AJAX, leia meu

tutorial anterior Um tutorial sobre o uso de AJAX no WordPressO AJAX é uma notável tecnologia da Web que nos levou além do simples "clique no link, vá para outra página" estrutura da Internet 1.0. Permite que os sites busquem e exibam dinamicamente conteúdo sem a do utilizador... consulte Mais informação e verifique todos os artigos relacionados ao WordPress.

Introdução

Há duas partes separadas necessárias para que os comentários do AJAX WordPress funcionem, então vamos explicar os primeiros para fornecer uma visão geral de todo o processo.

• Algum Javascript na página que intercepta o usuário clicando no Adicionar comentário botão enviar, que também faz com que seja uma chamada AJAX e também lida com a resposta.
• Um manipulador de PHP que se conecta à ação comment_post

Javascript

Primeiro, isso vai precisar jQuery, assim como qualquer coisa remotamente interessante no desenvolvimento da web hoje em dia. Se você não tem certeza se ele já está sendo carregado, vá para o código Javascript e tente mesmo assim - se você possui o Firebug e o log do console diz "jQuery é indefinido"Quando você atualizar a página e adicione esta linha ao seu arquivo functions.php para garantir que ele esteja sendo carregado.

função google_jquery () { if (! is_admin ()) {wp_deregister_script ('jquery'); wp_register_script ('jquery', (" http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"), falso); wp_enqueue_script ('jquery'); }} add_action ('wp_print_scripts', 'google_jquery');

Observe que essa é uma maneira elaborada de carregar o jQuery, porque usaremos a versão mais recente das CDNs do Google, que é mais rápida e precisa. data diferente da incluída por padrão no WordPress - por isso, talvez seja uma boa ideia adicioná-la mesmo que o jQuery já esteja carregado em outro lugar.

Agora, para o Javascript real que manipulará o formulário de comentários, temos algumas opções. O mais fácil é colar o código no seu single.php modelo - supondo que você não tenha os comentários ativados para as páginas também.

Como alternativa, você pode colar em um existente .js arquivo usado pelo seu tema ou crie um novo .js no diretório de temas. Se você optar por colocá-lo em seu próprio arquivo .js separado e não colá-lo diretamente no seu modelo de tema, adicione as seguintes linhas ao seu functions.phpe observe que o nome do arquivo é considerado ajaxcomments.js na raiz da sua pasta de temas.

add_action ('init', 'ajaxcomments_load_js', 10); função ajaxcomments_load_js () {wp_enqueue_script ('ajaxcomments', get_stylesheet_directory_uri (). '/ ajaxcomments.js'); }

Aqui está o Javascript para lidar com o formulário de comentários (ou você pode visualizá-lo em pastebin):

 // Sistema de comentários AJAXified. jQuery ('documento'). pronto (função ($) { var commentform = $ ('# commentform'); // encontre o formulário de comentário. commentform.prepend ('
 
'); // adicione o painel de informações antes do formulário para fornecer comentários ou erros. var statusdiv = $ ('# status do comentário'); // define o infopanel commentform.submit (function () { // serializa e armazena dados do formulário em uma variável. var formdata = commentform.serialize (); // Adicione uma mensagem de status. statusdiv.html ('
 Processando... 
'); // Extrai o URL da ação do commentform. var formurl = commentform.attr ('ação'); // Post Form com dados. $ .ajax ({ tipo: 'post', url: formurl, dados: formdata, erro: função (XMLHttpRequest, textStatus, errorThrown) { statusdiv.html ('
 Você pode ter deixado um dos campos em branco ou estar postando muito rapidamente 
'); } success: function (data, textStatus) { if (data == "sucesso") statusdiv.html ('
 Obrigado pelo seu comentário. Agradecemos sua resposta. 
 '); outro. statusdiv.html ('
 Aguarde um pouco antes de postar seu próximo comentário 
'); commentform.find ('textarea [nome = comentário]'). val (''); } }); retorna falso; }); });

Para dividir o código, primeiro criamos objetos jQuery no formulário de comentários (que assume que seu formulário de comentário possui o código css padrão de "commentform"), e adicionar um painel de informações vazio acima dele, que usaremos posteriormente para exibir mensagens ao usuário sobre o andamento da publicação do comentário.

commentform.submit é usado para "seqüestrar" o botão de envio. Em seguida, serializamos os dados do formulário (transformamos em uma longa linha de dados), fornecemos um "Em processamento”Ao usuário nesse painel de informações e prossiga com uma solicitação AJAX. A solicitação AJAX é uma Formato padrão, mas não realmente no escopo deste tutorial hoje - basta dizer que ele reage a um sucesso ou erro e apaga o formulário se for bem-sucedido para impedir que o mesmo comentário seja acidentalmente postado duas vezes. Ajuste as mensagens e os erros conforme apropriado ou adicione um estilo adequado à folha de estilo do seu tema, se você quiser que as mensagens de erro se destaquem de alguma forma. A última linha - retorna falso - impede que o formulário complete sua ação padrão.

Manipulador PHP

Por fim, precisamos de algo para impedir a atualização da página e enviar a resposta apropriada de volta ao usuário bem como notificar o administrador se o comentário precisar ser moderado ou notificar o autor de um novo comentário. Para isso, nos ligamos ao comment_post ação que ocorre logo após a adição ao banco de dados e detecta se foi uma solicitação AJAX. Adicione isto ao seu functions.php Arquivo:

(Também disponível neste pastebin)

add_action ('comment_post', 'ajaxify_comments', 20, 2); função ajaxify_comments ($ comment_ID, $ comment_status) { if (! vazio ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) && strtolower ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { // Se AJAX solicitar então. switch ($ comment_status) { case '0': // notifica o moderador de comentários não aprovados. wp_notify_moderator ($ comment_ID); case '1': // Comentário aprovado. eco "sucesso"; $ commentdata = & get_comment ($ comment_ID, ARRAY_A); $ post = & get_post ($ commentdata ['comment_post_ID']); wp_notify_postauthor ($ comment_ID, $ commentdata ['comment_type']); quebrar; padrão: eco "erro"; } Saída; } }

Problemas pontuais

Se a página ainda estiver sendo atualizada em vez de postada no AJAX, é provável que seja um dos dois problemas. Um - você pode não ter o jQuery carregado. Instalar Firebug Como instalar o Firebug no IE, Safari, Chrome e Opera consulte Mais informação , ou habilite as ferramentas de desenvolvedor do Chrome e verifique se há erros no log do console. Se o jQuery não for encontrado, volte para a seção JavaScript e leia o primeiro bit ao adicionar o jQuery ao seu tema. A segunda possibilidade é que seu tema faça algo especial no formulário de comentários e seu ID não seja mais "formulário de comentário". Verifique o código fonte e ajuste o var commentform = $ ('# commentform') linha no JavaScript para ter o ID correto - isso pode funcionar.

Como sempre, estou por perto para ajudar o máximo possível, mas poste links para um URL de exemplo onde posso dar uma olhada rápida.