CARREGANDO MENSAGENS WORDPRESS DINAMICAMENTE COM AJAX

AJAX tornou-se toda a raiva nos últimos dois anos e por uma boa razão. AJAX (JavaScript assíncrono e XML) é uma maneira de ter uma “conversa” com o servidor e exibir os resultados sem recarregar a página.

Esta técnica nos permite atualizar contadores “Like”, adicionar itens a um carrinho de compras, criar formas dinâmicas e muito mais – tudo sem recarregar a página.

Nesta publicação, vou mostrar-lhe como carregar postagens no AJAX usando o tema padrão Twenty Fifteen como nossa base.

Vamos ver por que AJAX é usado e, começando com um exemplo simples, construindo a funcionalidade de carregamento AJAX em Twenty Fifteen.

Por que usar o AJAX?

Quando o WordPress carrega a primeira página de postagens em um site do WordPress, ele os solicita do banco de dados e usa um loop para exibi-los usando a marcação que adicionamos. Além disso, os menus de navegação, widgets, gráficos e outras mídias, arquivos de javascript, folhas de estilo e um monte de outras coisas são carregados.

Como você pode ver na imagem acima (tirada das Ferramentas do desenvolvedor do Chrome), um número razoável de ativos são carregados. Há espaço para otimização aqui e alguns recursos como scripts serão armazenados em cache, mas mesmo assim é muito.

Quando a página dois de nossas postagens é carregada, tudo acontece novamente. O WordPress recupera as postagens e as exibe usando nossa marcação. Ele também carrega todos os elementos periféricos da página novamente. Em muitos casos (mas não todos), isso é um desperdício de largura de banda e prejudicial para a experiência do usuário. Afinal, ninguém gosta de esperar por páginas para carregar.

Começando: criando um tema infantil

Antes de modificar Vinte e Quinze, devemos criar um tema infantil. Isso garante que possamos continuar atualizando o tema sem perder nossas mudanças. Você pode ler tudo sobre como fazer no guia para criar um Tema para crianças do WordPress .

Olá AJAX!

Vamos começar com um exemplo simples que demonstra como funciona AJAX. Nós direcionaremos os links dentro da faixa de paginação na parte inferior da página para que, quando você clica em um número de página, carregará dinamicamente essa página usando o AJAX. Quando um link de paginação é clicado, enviaremos uma solicitação ao servidor e alertaremos o resultado.

Encaminhando o nosso Javascript

Nossa primeira porta de escala é criar o arquivo de JavaScript e enfiá-lo através do arquivo functions.php do nosso tema.

Eu criei uma jspasta e um ajax-pagination.jsarquivo nele. Depois de ter feito o mesmo, abra o arquivo de funções e adicione o script à função já existente theme_enqueue_assets():

Em poucas palavras, dissemos ao WordPress o que gostaríamos de chamar nosso script (parâmetro um), onde ele está localizado (parâmetro dois), quais os pré-requisitos (parâmetro três), o número da versão (parâmetro quatro) E que gostaríamos de carregá-lo no rodapé (parâmetro cinco).

Observe que ao enqueueing a folha de estilos que usei get_template_directory_uri(). Esta função sempre aponta para o diretório do tema pai. Ao enqueueing nosso script que eu usei get_stylesheet_directory_uri(). Isso aponta para o diretório do tema infantil se usado em um tema infantil.

Uma vez que estamos a carregar o script no rodapé você pode colar alert( 'Script Is Enqueued' )em ajax-pagination.jse recarregue a página para verificar se ele funciona. Se o fizer, o texto deve ser alertado corretamente.

Criando um evento

A próxima tarefa é criar um evento que desencadeie uma chamada AJAX. No nosso caso, o evento é o clique de um link específico. Para segmentar o link, precisamos descobrir um pouco sobre as classes de elementos e IDs ao redor.

No caso de você se perguntar como eu consegui isso, eu pressionei S hift + Command + Cno meu Mac (S hift + Control + Cno Windows), passei sobre o elemento que eu queria inspecionar e cliquei.

Isso me diz que nossos links de paginação têm a classe page-numbers, o próximo link também tem a classe nexte todos estão contidos em um navelemento com a classe de nav-links. Não é mostrado aqui o link anterior, que tem a classe de prevalém da page-numbersclasse normal .

Por enquanto, não nos preocupemos com tudo isso, vamos apenas segmentar qualquer link dentro do recipiente de paginação. Podemos criar um alerta simples como este:

Criando uma chamada AJAX

Em vez de trabalhar com dados do lado do cliente (alertando um texto predefinido), devemos pegar alguns dados dinâmicos do lado do servidor. Precisamos fazer uma pequena quantidade de preparação. Aqui está o porquê: nós precisamos dar a URL AJAX um URL para trabalhar com. Nosso arquivo Javascript não tem conhecimento de nosso ambiente, então não podemos usar algo como get_stylesheet_directory_uri()lá. No entanto, podemos usar uma técnica de localização para passar variáveis para o nosso JavaScript. Vamos fazer isso agora no nosso arquivo de funções:

Ao adicionar este código dentro da my_enqueue_assets()função, teremos definido o ajaxpaginationobjeto (parâmetro 2). O objeto receberá seus membros de acordo com a matriz fornecida como o terceiro parâmetro na wp_localize_script()função. Em outras palavras, uma vez que adicionamos este código, devemos usar ajaxpagination.ajaxurlpara definir o URL para o admin-ajax.phpqual usamos para lidar com as chamadas AJAX.

A razão pela qual isso funciona é que a função de localização exibe a definição desse objeto antes do nosso JavaScript ser carregado. Parece algo assim:

Voltando ao nosso arquivo JavaScript, agora temos tudo o que precisamos para criar uma chamada AJAX. Veja como:

Como você pode ver, a $.ajax()função é o que estamos usando aqui. Existem funções especiais para postar e obter métodos, mas prefiro usar esta função devido à sua flexibilidade. Você pode ler sobre todos os parâmetros na documentação jQuery .

Usando o urlparâmetro, passamos o URL do script para o qual queremos enviar dados. Este deve ser o admin-ajax.phparquivo que pode ser wp-adminencontrado no diretório. Definimos isso acima através da wp_localize_script()função.

O typeestá definido para post. Nós gettambém poderíamos usar , nossa consulta não é muito sensível, mas prefiro publicar dados, a menos que o usuário precise acessar os parâmetros.

O dataparâmetro é um objeto que contém os dados que deseja passar. No nosso caso, eu poderei acessar uma $_POST['action']variável, cujo valor seria ajax_pagination. Você pode passar tanto quanto sua aplicação exige, é claro.

successFinalmente , o parâmetro é uma função que alerta o resultado de nossa chamada AJAX. Vamos fazer isso um pouco mais curioso abaixo, por agora isso é suficiente para testar. Se você tentar clicar em um link agora, ele realmente funciona, mas não será muito útil uma vez que não definimos o código do lado do servidor. Na verdade, o que você deve ver alertado é0.

Então porque isso acontece? Quando eu disse “não definimos o código do lado do servidor”, não era inteiramente verdade. Nós não temos, mas o WordPress tem. Há algum conteúdo no admin-ajax.phparquivo que estamos usando. Se você verificar o código-fonte desse arquivo, você deve ver que o script usa die( '0' )em alguns casos.

Se não fornecemos uma ação, o admin-ajax.phpscript morre e retorna 0. Se nós fornecemos uma ação, mas não nos encaixamos nos ganchos WordPress necessários, nada acontece e no final do arquivo morremos novamente, retornando 0. In Conclusão já estamos nos comunicando com o servidor.

Comunicação com o WordPress

Para obter uma resposta significativa do WordPress, precisamos definir algumas ações do WordPress. Isso é feito usando um padrão definido. Vamos mergulhar continuando nosso exemplo no arquivo de funções do nosso tema:

Eu enganei uma função para dois ganchos. Os ganchos que assumem o wp_ajax_[action_name]formato só são executados para usuários registrados. Os ganchos que assumem o wp_ajax_norpiv_[action_name]formato só são executados para usuários não logados. O grande benefício disso é que você pode facilmente separar a funcionalidade.

Os nomes das ações que mencionei acima referem-se à ação definida em nossa chamada AJAX em Javascript ( action: 'ajax_pagination') – eles devem corresponder . O nome da função pode ser qualquer coisa que você gosta, eu usei my_ajax_paginationpara clareza.

A função em si pode conter qualquer coisa que você gostaria. Você pode desconectar os usuários, pegar seus dados, publicar uma publicação e assim por diante. Seja qual for o seu desejo de retornar ao Javascript, você deve ecoar. No exemplo acima, fiz eco do título do blog, puxado dinamicamente através da get_bloginfo()função.

O último passo é usar die(). Se não definimos isso, a função de morte definida no admin-ajax.phpfinal do arquivo será iniciada e você acabará ecoando 0 além do que você estiver fazendo eco. Se você tentar o código acima, agora deve ver o título do seu site retornado.

Visão geral

Isso conclui nosso exemplo básico! Antes de avançarmos para puxar mensagens via AJAX, recupere rapidamente as etapas necessárias para executar uma ação AJAX:

• Enqueue um arquivo Javascript se você ainda não possui um
• Use wp_localize_script()para passar o URL do seu admin-ajax.phparquivo
• Crie a chamada AJAX em Javascript
• Ganhar uma função usando o nome do gancho apropriado
• Codifique a função que pode retornar dados de volta para o Javascript

Carregando mensagens com AJAX

Agora, para o material suculento! Comecei este projeto escrevendo o código JavaScript para ele. Sem mais delongas, aqui está a versão básica. Vamos expandi-lo com alguma experiência de usuário ajustada em breve.

Isso é muito parecido com o nosso exemplo básico. A primeira coisa que você notará é que adicionei uma maneira de detectar a página que o usuário deseja solicitar. Cada link possui um spanelemento que está escondido (está lá para leitores de tela). Eu faço um clone do elemento para ter certeza de não modificar o original, remover o intervalo e analisar o restante como um número inteiro. Isso nos dá o número de página que precisamos.

Também precisarei conhecer os parâmetros de consulta usados. Na página pagedprincipal, isso é bastante simples, é apenas o parâmetro, já que estamos trabalhando com a consulta padrão. Se começarmos em uma página de arquivo (como um arquivo de categoria), também precisamos conhecer o nome da categoria.

Passaremos as variáveis de consulta usando o método de localização que aprendemos anteriormente. Por enquanto, usaremos ajaxpagination.query_varsmesmo que ainda não esteja definido. articleFinalmente , no sucesso, removemos todos os elementos do recipiente principal, removemos o elemento de paginação e adicionamos o valor de retorno da nossa chamada AJAX ao recipiente principal.

Este valor de retorno conterá as postagens e o novo elemento de navegação. Observe que eu mudei o nome do parâmetro de responsepara htmlporque isso faz um pouco mais sentido. Para terminar, usamos a matriz de localização para passar os parâmetros de consulta originais.

A seguinte função deve ser colocada em nossa my_enqueue_assets()função substituindo a localização que tínhamos anteriormente:

Tudo o que precisamos fazer agora é descobrir a my_ajax_pagination()função. Seja qual for a função, isso irá substituir o conteúdo em nossa página. Aqui está o código final com uma explicação abaixo:

Usando nossos parâmetros passados, criamos uma consulta personalizada. Isso envolve basicamente as variáveis de consulta que passamos e certificando-se de que o número de página que passamos sobrescreva o pagedparâmetro. Em seguida, usamos nossa $query_varsmatriz final para criar uma nova consulta.

Precisamos tornar a $GLOBALS['wp_query']variável igual ao nosso novo artigo de postagens. A razão pela qual precisamos fazer isso é que a the_posts_pagination()função usa essa variável global.

Em seguida, note que adicionei uma função ao editor_max_image_sizefiltro e algumas linhas para baixo, eu o removo. Isso foi algo inesperado que surgiu. Na verdade, criei um Ticket WordPress Trac . Podemos ver algum progresso nisso! Aqui está o problema:

Quando as imagens são carregadas na publicação, tudo parece bem. No entanto, se você completar este tutorial sem esses filtros, suas imagens serão mais estreitas, apenas 660px de largura em vez dos 825px necessários. A razão para isso é que a função que carrega as imagens eventualmente chama uma função chamada image_constrain_size_for_editor(). Esta função garante que as imagens no editor de postagem não sejam muito amplas. Para determinar o tempo, esta redução de tamanho deve ocorrer, ela usa a is_admin()função. Uma vez que o nosso código é admin-ajax.phpexecutado através do qual tecnicamente está no administrador, o WordPress reduz as nossas imagens, erroneamente, pensando que as estamos usando no editor.

Por sorte, podemos usar o editor_max_image_sizefiltro para determinar o tamanho máximo para o editor. Uma vez que queremos deixar tudo como está, exceto durante a nossa chamada AJAX array( 825, 510 ), adicionamos o filtro usando nossos valores personalizados ( ) e, em seguida, remova-o imediatamente para garantir que ele não cause problemas em nenhum outro lugar.

O próximo passo é usar nossa consulta para listar nossas postagens. Eu copiei muito do index.phparquivo no tema pai. Se não houver postagens, usamos o modelo que pretende lidar com isso, caso contrário, fazemos um loop pelas postagens e usamos o modelo de exibição de postagem. Finalmente, usamos o mesmo formato de paginação que vemos no arquivo de índice.

Uma nota sobre chamadas AJAX

É importante lembrar que as chamadas AJAX são sempre consideradas como originadas pelo administrador. O que isso significa é que o rascunho, agendados e postagens privadas podem ser devolvidos com esta chamada. Se você não quiser que isso aconteça, você precisará controlar o comportamento com os parâmetros apropriados, como post_status.

Melhor experiência do usuário

Com soluções AJAX como esta, é extremamente importante se concentrar na experiência do usuário. Eu estou trabalhando em um ambiente local, então tudo carrega muito rápido, mas em imagens de servidor de produção e outros recursos pode demorar mais tempo para carregar.

Devido a isso, você deve, pelo menos, adicionar um carregador ou carregar texto e desativar mais cliques nos elementos de navegação. Vamos cuidar disso, fazendo com que as mensagens e a navegação desapareçam logo após o usuário clicar e exibir o texto “carregando novas postagens”. Quando o evento de sucesso dispara, removemos o texto carregando e exibimos as postagens. Aqui está a nossa ligação AJAX atualizada:

Agora temos uma função separada beforeSende success. O primeiro é executado assim que você clicar no link, antes que a chamada AJAX seja enviada para o servidor. O posterior é realizado uma vez que recebemos os dados de volta do servidor.

Antes que a chamada seja enviada, removemos os artigos e a navegação. Isso garante que os usuários não possam continuar clicando em links de navegação enquanto esperam que as coisas sejam carregadas. Em seguida, rolar para o topo do documento. Em seguida, anexamos uma notificação de carregamento para deixar claro aos usuários o que está acontecendo. Eu usei o mesmo markup que Twenty Fifteen usa em páginas posteriores a não encontradas. Na função de sucesso, removemos o carregador e carregamos nosso conteúdo, tudo pronto!

AJAX Pitfalls

AJAX é extremamente poderoso; Além de carregar postagens, você pode executar todos os tipos de ações por meio de chamadas AJAX. Há uma série de perigos e coisas a serem observadas durante a sua utilização, aqui estão algumas:

A segurança pode ser uma grande preocupação. Se você deseja excluir uma postagem via AJAX, você precisa ter certeza de que o usuário tem a intenção e a permissão (usando nonces), por exemplo. Ao usar métodos regulares, o WordPress possui proteções embutidas em alguns casos, mas com a AJAX você costuma pensar nisso sozinho.

A degradação graciosa é outra faceta da AJAX, embora algo que se torne menos importante. Basicamente: não há JavaScript, não AJAX. Se você confia muito no AJAX, os usuários que o tenham desativado não poderão usar nossa aplicação. O Javascript tornou-se tão onipresente que isso é quase irrelevante, mas pode surgir em algumas situações. Neste caso, você precisa ter certeza de que clicar no link real também funcionará.

A experiência do usuário é freqüentemente ignorada. A funcionalidade AJAX é realmente legal, mas um site de trabalho confiável é mais legal. Os usuários são usados para páginas que carregam quando eles clicam em links. Você precisa tornar tudo muito transparente, os usuários devem saber o que está acontecendo e por quê. Você deve usar o AJAX para aprimorar seu trabalho, não para trazer o máximo possível para a mesa.

Visão geral

Como você pode ver, implementar AJAX requer um pouco de preparação e prática, mas uma vez que é uma segunda natureza, você encontrará que ela vem facilmente. Provavelmente levou um tempo para ler isso e levará ainda mais tempo para fazê-lo pela primeira vez, mas codifiquei todo o exemplo em cerca de 15 minutos.

AJAX é uma dessas técnicas que podem ser difíceis porque engloba quase todas as linguagens de programação usadas em uma estrutura como o WordPress. As coisas são temperadas ainda mais, tendo que aderir a convenções como ganchos e localização.

A prática leva à perfeição. Eu garanto que você se apaixonará por AJAX se você começar a usá-lo.

Você implementou o AJAX em seu site? Quais outros usos existem para o AJAX no WordPress? Deixe-nos saber o que você pensa no comentário abaixo.