Faceți adaptarea pluginului dvs. WordPress utilizând AJAX

WordPress este o platformă excelentă pentru construirea de site-uri web; cu toate acestea, instrumentul de gestionare a conținutului vine cu dezavantajele sale. Dacă ți-ai construit site-ul web pe WordPress, atunci nu este neobișnuit să te confrunți cu problema vitezei de încărcare reduse. Datorită numărului mare de pluginuri adăugate împreună cu afluxul de baze de date și baze de cod, nu este de fapt neobișnuit. Cu toate acestea, este important să ne concentrăm asupra soluției. Nu vrei ca publicul tău să devină nerăbdător și să plece din cauza vitezei lente și să piardă potențialele afaceri!

Ce s-ar întâmpla dacă ți-am spune că ai putea optimiza viteza site-ului tău WordPress prin integrarea unei funcții simple în plugin-uri, cunoscută sub numele de AJAX. Termenul AJAX este prescurtarea pentru JavaScript asincron și XML. AJAX vă ajută să îmbunătățiți viteza site-ului dvs. Va încărca doar o anumită parte a paginii și va menține pagina rămasă statică, îmbunătățind astfel timpul de încărcare. Mai multe plugin-uri și aplicații folosesc deja această funcție pentru a ajuta la îmbunătățirea vitezei paginilor lor web chiar și astăzi.

În doar o perioadă scurtă de timp, AJAX a câștigat o reputație excelentă în lumea marketingului digital și este folosit de majoritatea proprietarilor de site-uri web. Din fericire, WordPress oferă suport excelent pentru AJAX, facilitând scrierea de pluginuri care sunt integrate în AJAX. Cu suportul de la WordPress și articolul nostru, ar trebui să puteți integra AJAX în pluginurile dvs. în cel mai scurt timp.

Mai jos este un ghid pas cu pas pentru a vă ghida prin proces.

Pasul # 1 - Creați-vă pluginul

Primul pas este să creați un plugin simplu pe care apoi să îl utilizați pentru a dezvolta un produs mai avansat, care este mai receptiv și care reduce timpul de încărcare a paginii dvs. web. Vestea bună este că nu veți avea nicio dificultate în a crea pluginul, deoarece tot ce trebuie să faceți este să creați un fișier care să includă date cu o singură linie.

Puteți face acest lucru căutând fișierul „wp-content/plugins” și generați un folder cu orice nume vi se potrivește. Odată ce ați făcut acest lucru, acum trebuie să deschideți folderul și să creați un fișier cu numele: „name_of_the_plugin.php”. Odată ce ați deschis acest fișier în editorul de text, introduceți următorul cod în editorul de text.

<?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
*/

Pasul #2 - Adăugați biblioteca JavaScript

Începeți acest pas prin crearea unui director „ajaxloadpost”. Cum să faci asta? Este destul de simplu, deoarece îl puteți instala împreună cu pluginul WordPress. Odată ce acest pas este finalizat, acum puteți crea pluginul pe care l-ați codificat și îl puteți rula. Apoi trebuie să adăugați codul de mai jos în 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);

Trebuie să direcționați WordPress prin adresa URL a pluginului creat; de aceea trebuie să definiți variabila cu numele AJAXLOADPOSTURL.

AJAX este întotdeauna folosit cu o combinație de limbaje de programare, vom lucra cu JavaScript în articolul rămas. Căutați ajaxloadpost.js în folderul \wp-content\plugins\ajaxloadpost\js\și adăugați JavaScript la acesta. Acum puteți adăuga variabila JavaScript la scriptul dvs.

Pasul #3 - Integrarea AJAX Handler

Odată ce toate cele de mai sus sunt sortate, puteți trece în sfârșit la integrarea handler-ului AJAX în pluginul dvs. Următorul este codul pentru handlerul dvs. 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);
}

Codul de mai sus va îndeplini practic două sarcini. Mai întâi va dezvolta un ID pentru postările solicitate de utilizator. A doua sarcină este de a crea „nonce”. Nu trebuie să vă faceți griji pentru al doilea element deocamdată (A fost descris în detaliu la sfârșitul articolului).

În schimb, ar trebui să treceți la al doilea pas, care este să vă înregistrați handlerul AJAX în directorul WordPress. Acest lucru va permite ca funcția AJAX să fie apelată odată ce este solicitată. Această acțiune poate fi realizată prin intermediul codului menționat mai jos:

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

Deținerea cunoștințelor de bază despre JavaScript este un avantaj enorm pentru tine, dacă nu ești expert în acest limbaj de programare, apelează la ajutorul unui expert care să te ghideze prin întregul proces. De asemenea, vă puteți perfecționa abilitățile JavaScript printr-un tutor web sau citind articole aici .

Pasul #4 - Utilizarea JavaScript pentru AJAX

Următorul lucru de care aveți nevoie este să scrieți o funcție care va permite AJAX să apeleze și să actualizeze datele care au fost returnate prin handler-ul AJAX. Funcția este în general ajacloadpost.js. Următorul cod poate fi folosit pentru a determina acțiunea descrisă mai sus.

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);
}
});

Funcția de mai sus va lua două intrări, una dintre ele este id-ul postării și a doua este nonce. Puteți utiliza funcția jQuery.ajax pentru a efectua apelul către server. Odată cu succes, actualizați <div> al id-ului #loadpostresult cu datele care au fost returnate prin handler-ul AJAX. Ultimul bit al codului este o condiție în cazul unei erori. Dacă apare o eroare, sistemul este alertat printr-un pop-up.

Pasul #5 - Afișarea listelor

Odată ce toate funcțiile au fost sortate, puteți trece la ultimul pas care este afișarea titlului postării. Rețineți că fiecare clic ar putea fi către un alt titlu de postare, iar codul dvs. ar trebui să poată prelua codul care a fost apelat. Următorul cod vă poate ajuta să realizați acest lucru:

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' );

Ce este „nonce”?

Un nonce este folosit pentru a verifica dacă cererea provine dintr-o sursă autentică sau nu. Un nonce poate fi generat folosind o funcție simplă WordPress: „wp_create_nonce”. Poate fi verificat în continuare printr-un handler AJAX folosind funcția: „wp_verify_nonce”. Utilizarea acestei funcții este extrem de importantă dacă efectuați o sarcină sensibilă pe WordPress.

  Concluzie

  Integrarea AJAX cu pluginurile dvs. poate ajuta la îmbunătățirea vizibilă a capacității de răspuns a paginilor dvs. Dacă nu vă simțiți confortabil cu JavaScript, puteți opta pentru un limbaj de programare cu care vi se pare mai ușor de codificat sau puteți găsi un expert care vă poate ajuta să codificați pentru pluginul dvs. Încercați să integrați AJAX în plugin-uri și nu veți fi dezamăgiți!