Tornando seu plugin WordPress responsivo usando AJAX
Publicados: 2020-06-02
Última atualização - 8 de julho de 2021
AJAX é a metodologia de desenvolvimento mais recente e que está ganhando força aos poucos devido à facilidade de uso que oferece aos seus desenvolvedores. Ao simplesmente integrar o AJAX em seus plugins do WordPress, você está reduzindo a necessidade de recarregar constantemente toda a página da web. Em outras palavras, o AJAX tornará seu plug-in do WordPress responsivo e permitirá que os usuários obtenham novas informações recarregando apenas essa parte específica, mantendo o restante da página estática.
Isso não apenas torna as páginas da web ou plugins responsivos, mas também reduz o tempo de espera pela metade. Existem vários plugins e aplicativos que empregam Ajax para criar melhores experiências para os usuários. Por exemplo, o WooCommerce usa o recurso Ajax para melhorar o comportamento Adicionar ao carrinho.
Considerando seus benefícios, ensinaremos como tornar seus plugins do WordPress responsivos através do AJAX.
Criando um plug-in
Antes de poder fazer sua mágica com o AJAX, você precisa ter uma base básica de plug-in que possa ser usada para criar um produto avançado e responsivo.
Criar um plugin não é difícil, pois tudo o que você precisa é a criação de um arquivo que contenha conteúdo de uma linha. Para isso, o primeiro passo é navegar até o arquivo wp-content/plugins e criar uma nova pasta com um nome de sua escolha. Abra a pasta e crie um novo arquivo name_of_the_plugin.php. Agora, visualize o arquivo em qualquer editor de texto e escreva as seguintes informações:
<?php
/*
Nome do plugin: Coolness Inducer
URI do plug-in: http://coolness-inducer.com
descrição: >-
um plugin perfeito para tornar seu site ainda mais legal.
Versão: 1.3
Autor: Sra. Vader
URI do autor: http://msvader.com
Licença: GPL2
*/
?>
Antes de fazer isso, crie um diretório ajaxloadpost na instalação do plugin do seu WordPress. Depois de fazer isso, crie o plugin e ative-o. Depois disso, inclua as seguintes informações em seu ajaxloadpost.
define('AJAXLOADPOSTURL', WP_PLUGIN_URL.”/”.dirname( plugin_basename( __FILE__ ) ) );
function ajaxloadpost_enqueuescripts() {
wp_enqueue_script('ajaxloadpost', AJAXLOADPOSTURL.'/js/ajaxloadpost.js', array('jquery'));
wp_localize_script( 'ajaxloadpost', 'ajaxloadpostajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', ajaxloadpost_enqueuescripts);
Em seguida, defina a variável AJAXLOADPOSTURL porque você precisará dela para direcionar o WordPress para a URL do seu plugin. Agora você precisa enfileirar seus scripts, o que pode ser feito adicionando ajaxloadpost_enqueuescripts a wp_enqueue_scripts do WordPress.
Tenha em mente que o AJAX nunca pode ser usado em sua forma bruta. Ele sempre será usado em combinação com outras linguagens de programação, ou seja, jQuery ou JavaScript. Neste caso, trabalharemos com JavaScript, então você precisa ter um entendimento básico sobre ele.
Continuando, adicione JavaScript ao ajaxloadpost.js que você encontrará na pasta \wp-content\plugins\ajaxloadpost\js\. Siga esta ação criando uma pasta JS e coloque o ajaxloadpost.js nela.
Agora, use o WordPress wp_localize_script para adicionar a variável JS necessária. Essa ação fornecerá uma estrutura para seu diretório e enfileirará seus scripts.
Escrevendo manipulador AJAX
Para escrever o manipulador AJAX, você precisará dos seguintes códigos:
function ajaxloadpost_ajaxhandler() {
if ( !wp_verify_nonce( $_POST['nonce'], “ajaxloadpost_nonce”)) {
exit("Nonce errado");
}
$resultados = ”;
$content_post = get_post($_POST['postid']);
$resultados = $content_post->post_content;
die($resultados);
}
add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
A conclusão desta ação resultará em dois resultados. Primeiro, ele criará o ID das postagens que os usuários exigem e, segundo, criará nonce. Mas isso não vem ao caso! Uma vez que os códigos do manipulador AJAX estejam em vigor, você precisa passar para a próxima etapa que é registrar o manipulador AJAX no diretório do WordPress. Isso fará com que o plugin do WordPress responda às chamadas AJAX. Você pode conseguir isso através destes códigos:
add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
Noções básicas de JavaScript e AJAX
Com a chamada AJAX e o manipulador AJAX no lugar, você precisa criar uma função JS que conectará os dois pontos. O seguinte JavaScript irá ajudá-lo a realizar esta ação que você colocará em seu ajaxloadpost.js:
function ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
tipo: 'POST',
url: ajaxloadpostajax.ajaxurl,
dados: {
ação: 'ajaxloadpost_ajaxhandler',
postid: postid,
nono: nono
},
sucesso: function(data, textStatus, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html(”);
jQuery(loadpostresult).append(data);
},
error: function(MLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
Assim como a etapa acima mencionada, esta ação também criará dois resultados, ou seja, nonce e post ID.
O próximo passo requer proficiência em jQuery também. Então, se suas habilidades são um pouco rústicas, você achará este artigo útil!
Continuando, use a função jQuery.ajax para fazer uma chamada AJAX para os servidores apropriados. Nos códigos acima, a URL é a URL admin-ajax.php que pode ser encontrada na variável JavaScript que registramos no momento do enfileiramento dos scripts. Além disso, especifique esta ação com o nome do manipulador de ação que foi registrado no WordPress e também poste o nonce e o ID da postagem.
Se tudo der certo, você pode atualizar <div> do id #loadpostresult e substituir o conteúdo buscado pelo manipulador AJAX.
Dando um rosto ao seu código
Agora, é hora de criar códigos que exibirão os títulos dos posts apropriados e trazer as informações que os usuários desejam através de uma chamada AJAX. Aqui estão os seguintes códigos:
function ajaxloadpost_show_latest_posts($number = '5'){
$resultados =”;
$the_query = new WP_Query( 'posts_per_page='.$number );
while ($the_query->have_posts()):
$the_query->the_post();
$nonce = wp_create_nonce(“ajaxloadpost_nonce”);
$argumentos = get_the_ID().”,'”.$nonce.”'”;
$link = ' <a onclick=”ajaxloadpost_loadpost('.$arguments.');”>'. get_the_title().'</a>';
$resultado.= '<li>' . $link. '</li>';
fim;
wp_reset_postdata();
$result.= '<div id=”loadpostresult”></div>';
retorna $resultado;
}
function ajaxloadpost_shortcode_function( $atts){
return ajaxloadpost_show_latest_posts();
}
add_shortcode('AJAXLOADPOST', 'ajaxloadpost_shortcode_function');
Espero que este artigo tenha ajudado você a tornar seu plugin WordPress responsivo. Deixe-nos um comentário se você tiver uma pergunta.
Leitura adicional
- O design responsivo ajuda a melhorar as taxas de conversão.
- Melhores temas WooCommerce responsivos