Tornando seu plugin WordPress responsivo usando AJAX

WordPress é uma excelente plataforma para construção de sites; no entanto, a ferramenta de gerenciamento de conteúdo tem suas desvantagens. Se você construiu seu site no WordPress, não é incomum enfrentar o problema de velocidade de carregamento lenta. Devido ao grande número de plugins adicionados junto com o influxo de bancos de dados e bases de código, na verdade não é incomum. No entanto, é importante focar na solução. Você não quer que seu público fique impaciente e saia devido à velocidade lenta e perca potenciais negócios!

E se disséssemos que você pode otimizar a velocidade do seu site WordPress integrando um recurso simples em seus plugins, conhecido como AJAX. O termo AJAX é a abreviação de JavaScript assíncrono e XML. AJAX ajuda você a melhorar a velocidade do seu site. Ele carregará apenas uma determinada parte da página e manterá a página restante estática, melhorando assim o tempo de carregamento. Vários plugins e aplicativos já estão usando esse recurso para ajudar a melhorar a velocidade de suas páginas da web ainda hoje.

Em pouco tempo, o AJAX ganhou uma excelente reputação no mundo do Marketing Digital e está sendo usado pela maioria dos proprietários de sites. Felizmente, o WordPress oferece excelente suporte para AJAX, tornando mais fácil escrever plugins integrados ao AJAX. Com o suporte do WordPress e nosso artigo, você poderá integrar o AJAX em seus plugins rapidamente.

Abaixo está um guia passo a passo para orientá-lo através do processo.

Passo #1 - Crie seu Plugin

O primeiro passo é criar um plugin simples que você possa usar para desenvolver um produto mais avançado que seja mais responsivo e reduza o tempo de carregamento da sua página da web. A boa notícia é que você não terá nenhuma dificuldade em criar o plugin porque tudo que você precisa fazer é criar um arquivo que inclua dados de uma linha.

Você pode fazer isso pesquisando o arquivo “wp-content/plugins” e gerar uma pasta com o nome que mais lhe convier. Feito isso, agora você precisa abrir a pasta e criar um arquivo com o nome: “name_of_the_plugin.php”. Depois de abrir este arquivo no editor de texto, digite o seguinte código no editor de texto.

<?php
/*
Plugin Name: Your choice
Plugin URI: http://yout-choice.com
Description: This loads post via ajax
Author: Your name
Author URI: http://yourname.com
Version: 1
*/

Passo #2 – Adicione a Biblioteca JavaScript

Você inicia esta etapa criando um diretório “ajaxloadpost”. Como fazer isso? É bem simples, pois você pode instalá-lo junto com o plugin do WordPress. Quando esta etapa estiver concluída, você poderá criar o plug-in que codificou e executá-lo. Você então precisa adicionar o código abaixo 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);

Você deve direcionar o WordPress através da URL do plugin criado; é por isso que você precisa definir a variável pelo nome de AJAXLOADPOSTURL.

AJAX é sempre usado com uma combinação de linguagens de programação, trabalharemos com JavaScript em nosso artigo restante. Procure por ajaxloadpost.js na pasta \wp-content\plugins\ajaxloadpost\js\ e adicione JavaScript a ela. Agora você pode adicionar a variável JavaScript ao seu script.

Passo #3 – Integrando o Manipulador AJAX

Uma vez que todos os itens acima são classificados, você pode finalmente passar a integrar o manipulador AJAX em seu plug-in. A seguir está o código para seu manipulador AJAX:

function ajaxloadpost_ajaxhandler() {
if ( !wp_verify_nonce( $_POST['nonce'], "ajaxloadpost_nonce")) {
exit("Wrong nonce");
}

$results = '';
$content_post = get_post($_POST['postid']);
$results = $content_post->post_content;

die($results);
}

O código acima basicamente estará cumprindo duas tarefas. Ele primeiro desenvolverá um ID para as postagens solicitadas pelo usuário. A segunda tarefa é criar “nonce”. Você não precisa se preocupar com o segundo elemento por enquanto (ele foi descrito em detalhes no final do artigo).

Em vez disso, você deve seguir para a segunda etapa, que é registrar seu manipulador AJAX no diretório do WordPress. Isso permitirá que a função AJAX seja chamada uma vez solicitada. Esta ação pode ser alcançada através do código mencionado abaixo:

add_action( 'wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );
add_action( 'wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler' );

Ter conhecimento prévio sobre JavaScript é uma grande vantagem para você, se você não é adepto desta linguagem de programação, conte com a ajuda de um especialista para guiá-lo em todo o processo. Você também pode aprimorar suas habilidades em JavaScript através de um web tutor ou lendo artigos aqui .

Passo #4 – Usando JavaScript para AJAX

A próxima coisa que você precisa é escrever uma função que permitirá que o AJAX chame e atualize os dados que foram retornados por meio do manipulador AJAX. A função é geralmente ajacloadpost.js. O código a seguir pode ser usado para determinar a ação descrita acima.

function ajaxloadpost_loadpost(postid,nonce) {
jQuery.ajax({
type: 'POST',
url: ajaxloadpostajax.ajaxurl,
data: {
action: 'ajaxloadpost_ajaxhandler',
postid: postid,
nonce: nonce
},
success: function(data, textStatus, XMLHttpRequest) {
var loadpostresult = '#loadpostresult';
jQuery(loadpostresult).html('');
jQuery(loadpostresult).append(data);
},
error: function(MLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});

A função acima terá duas entradas, uma delas é o id do post e a segunda é o nonce. Você pode usar a função jQuery.ajax para fazer a chamada ao servidor. Uma vez bem-sucedido, atualize o <div> do id #loadpostresult com os dados que foram retornados por meio do manipulador AJAX. O último bit do código é uma condição em caso de erro. Se ocorrer um erro, o sistema é alertado com um pop-up.

Passo #5 – Exibindo as listas

Uma vez que todas as funções foram classificadas, você pode passar para a última etapa, que é exibir o título do post. Lembre-se de que cada clique pode ser direcionado a um título de postagem diferente e seu código deve ser capaz de buscar o código que foi chamado. O código a seguir pode ajudá-lo a conseguir isso:

function ajaxloadpost_show_latest_posts($number = '5'){  

$results ='';
$the_query = new WP_Query( 'posts_per_page='.$number );  

while ( $the_query->have_posts() ) :
$the_query->the_post();
$nonce = wp_create_nonce("ajaxloadpost_nonce");  

$arguments = get_the_ID().",'".$nonce."'";  

$link = ' <a>'. get_the_title().'</a>';  

$result.= '<li>' . $link . '</li>';
endwhile;
wp_reset_postdata();  

$result.= '<div></div>';  

return $result;
}  

function ajaxloadpost_shortcode_function( $atts ){
return ajaxloadpost_show_latest_posts();
}
add_shortcode( 'AJAXLOADPOST', 'ajaxloadpost_shortcode_function' );

O que é “nonce”?

Um nonce é usado para verificar se a solicitação vem de uma fonte autêntica ou não. Um nonce pode ser gerado usando uma função simples do WordPress: “wp_create_nonce”. Ele pode ser verificado através de um manipulador AJAX usando a função: “wp_verify_nonce”. Usar esse recurso é extremamente importante se você estiver realizando uma tarefa sensível no seu WordPress.

  Conclusão

  A integração do AJAX com seus plugins pode ajudar a melhorar visivelmente a capacidade de resposta de suas páginas. Se você não se sente confortável com JavaScript, pode optar por uma linguagem de programação que seja mais fácil de codificar ou encontrar um especialista que possa ajudá-lo a codificar seu plug-in. Tente integrar o AJAX em seus plugins e você não ficará desapontado!