Utilizarea AJAX cu PHP pe site-ul dvs. WordPress cu propriul dvs. plugin
Publicat: 2021-07-23
În acest articol discutăm despre AJAX cu PHP pentru site-ul dvs. WordPress.
AJAX este o tehnică de dezvoltare web care ajută utilizatorii să dezvolte aplicații interactive pe site. Oferă utilizatorilor o experiență web mai rapidă și mai fluidă. Permite utilizatorilor să facă modificări sau să actualizeze conținutul paginii web fără a reîncărca sau reîmprospăta paginile. Trebuie să cunoașteți diferite limbaje de programare pentru a lucra cu AJAX.
Ce este AJAX?
AJAX înseamnă „JavaScript asincron și XML”. După cum am menționat mai devreme, este folosit pentru a crea aplicații web care sunt distractive, în continuă schimbare și interactive.
Unele dintre exemplele populare de aplicații web dezvoltate cu ajutorul AJAX și tehnologiilor conexe sunt Google Maps, funcția de completare automată a căutării Google, comentariile și aprecierile pe diferite postări de pe rețelele sociale și multe altele.
Bazele AJAX
Ajax cu ajutorul diferitelor limbaje de programare precum JavaScript, HTML, CSS și XML dezvoltă aplicații web și site-uri web mai rapide și îmbunătățite. În afară de aceste limbaje de programare, pentru dezvoltarea aplicațiilor web, sunt utilizate și AJAX cu PHP și alte limbaje de pe partea de server.
Utilizează JavaScript pentru afișarea conținutului, în timp ce CSS ajută la prezentare și la modelul obiectului documentului. În continuare, folosește XHTML pentru conținut.
În aplicațiile web tradiționale sau în paginile web, informațiile sunt schimbate cu serverul în mod sincron. Pe de altă parte, în aplicațiile web, care au fost concepute pentru a utiliza AJAX, atunci când are loc un eveniment, cum ar fi apăsarea unui buton sau completarea unui formular, JavaScript creează o solicitare XMLHTTP și o trimite serverului în format XML.
Serverul procesează cererea creează un răspuns pe partea serverului și îl trimite înapoi la browser. JavaScript procesează apoi răspunsul, iar conținutul de pe ecranul de afișare curent este actualizat. Deoarece reîncărcarea sau reîmprospătarea paginilor nu este necesară, utilizatorii nu vor fi conștienți de transferul de informații către server.
Abilități necesare pentru a lucra cu AJAX în WordPress
După cum se înțelege din discuția de mai sus, utilizatorii au nevoie de următoarele abilități pentru a utiliza corect AJAX.
• Cunoașterea limbajelor de programare precum JavaScript, HTML și CSS
• Cunoașterea limbilor server-side, cum ar fi PHP și altele
• Bazele XML sau JSON
Avantajele AJAX
Diferitele avantaje ale AJAX sunt discutate mai jos
• Aproape suportă toate browserele folosite în vremurile curente
• Implică un timp de răspuns mai rapid, ceea ce înseamnă o experiență de utilizator îmbunătățită în ceea ce privește viteza și performanța
• Bibliotecile JavaScript open-source, cum ar fi Prototype, jQuery, etc sunt disponibile pentru utilizare
• Reduce timpul dintre client și server, prin urmare timpul ambilor utilizatori, precum și al serverului, este salvat
• Deoarece serverul nu este obligat să proceseze o mulțime de date, acesta ajută la reducerea utilizării lățimii de bandă și la optimizarea funcționării rețelei.
• Deoarece cererea XMLHTTP este utilizată pentru preluarea datelor, utilizatorii pot efectua mai multe sarcini simultan.
AJAX în WordPress
AJAX este utilizat la backend-ul WordPress, drept urmare, ori de câte ori se fac modificări la postări sau categorii, sau ori de câte ori adminul moderează comentariile, actualizările vor fi făcute instantaneu. AJAX este folosit mai ales cu JQuery pe WordPress. Procesul în care WordPress utilizează AJAX este următorul
• Când se face o solicitare, aceasta trece prin fișierul „admin-ajax.php” aflat în folderul „wp-admin”.
• Aceste solicitări sunt necesare pentru a furniza cel puțin o bucată de date, numită și „acțiune” în general, prin utilizarea metodei „get” sau „post”.
• Această acțiune solicită codului din fișierul „admin-ajax.php” să creeze două cârlige, și anume, „wp_ajax_my_action” și „wp_ajax_nopriv_my_action”. „my_action” din aceste cârlige indică valoarea variabilei „action” a metodei „get” sau „post”.
• În timp ce primul cârlig este destinat acțiunilor întreprinse de utilizatorii conectați, al doilea cârlig este destinat exclusiv utilizatorilor deconectați.
• Funcțiile hooked ar trebui să fie planificate pentru degradarea grațioasă, ceea ce asigură că, chiar dacă JavaScript este dezactivat pe browsere, codurile vor funcționa în continuare.
Creați un plugin AJAX WordPress
În această secțiune, să luăm exemplul unui plugin WordPress AJAX de bază numit „Post Likes Counter”. Acest plugin include următoarele caracteristici:
• Este actualizat instantaneu la front-end
• Utilizatorilor autentificati li se permite să aprecieze postările.
• Dacă utilizatorii deconectați încearcă să aprecieze postarea, pe ecran va apărea un mesaj de eroare
• Acest plugin ajută la menținerea evidenței totale a numărului de „like” și le afișează
În primul rând, este necesar să fie creat și activat un plugin WordPress gol. Pentru a crea un plugin, trebuie să efectuați următorii pași.
Pasul 1 : Selectați un nume unic pentru plugin. Se pot verifica depozitele de pluginuri pentru a se asigura că numele propus al pluginului nu este deja utilizat. De obicei, dezvoltatorii de plugin-uri selectează numele unui plugin în funcție de funcția pe care ar trebui să o îndeplinească.
Pasul 2 : În pasul următor este necesar un fișier PHP pentru a crea folosind numele pluginului selectat. Deoarece utilizatorii care vor instala acest plugin vor trebui să plaseze fișierul PHP în directorul de pluginuri WordPress „wp-content/plugins-” pentru instalarea acestuia, pluginurile nu pot împărtăși același nume pentru fișierele PHP.
Prin urmare, numele fișierului plugin ar trebui să fie, de asemenea, unic pentru a evita conflictul cu un alt plugin din depozit. Se poate folosi numele sau numele companiei în prefix pentru a crea un nume unic pentru fișierul PHP.
Pasul 3 : Trebuie remarcat faptul că pluginul WordPress ar trebui să conțină cel puțin un fișier PHP împreună cu JavaScript, CSS, limbi și fișiere imagine. Dacă sunt prezente mai multe fișiere, selectați un nume unic pentru director și un nume preferat pentru fișierul PHP principal.
Plasați toate fișierele plugin în directorul creat și solicitați utilizatorilor pluginului să încarce întregul director în directorul „wp-content/plugins/”.
Instalarea WordPress poate fi configurată pentru a schimba directorul standard de plugin „wp-content/plugins/”. Prin urmare, trebuie să folosiți plugin_dir_path() și plugin_url() sau calea absolută și URL-uri în codul lor PHP.
Șablon de post al temei
După crearea pluginului, trebuie să găsiți șablonul de postare „single.php” al temei lor. Poate fi găsit în directorul rădăcină al temei active. Este folosit atunci când este interogată o singură postare; unde cineva dorește să-și plaseze pluginul „Post Like Counter”. Fișierul trebuie păstrat deschis pentru editare.
Pregătiți șablonul de post gata pentru apelul AJAX
Este necesar să fie creat un link pentru ca utilizatorii să poată aprecia postările. Dacă utilizatorii au activat JavaScript, pot folosi fișierele JavaScript (care vor fi create ulterior) sau pot urma direct linkul. În acest scop, introduceți următorul cod în fișierul „single.php”. Acest cod poate fi adăugat și la oricare dintre părțile șablonului pe care le conține fișierul „single.php”.
// Valoarea meta-cheie „aprecieri” va stoca numărul total de aprecieri pentru o anumită postare, va afișa 0 dacă este un șir gol ID, „aprecieri”, adevărat); $likes = ($likes == "") ? 0 : $like-uri; ?> Această postare are <span id='like_counter'></span> aprecieri<br> // Conectare la fișierul admin-ajax.php. Verificarea nu este inclusă pentru securitate suplimentară. Rețineți clasa „user_like” pentru clienții activați JS. ID.'&nonce='.$nonce); echo '<a class="user_like" data-nonce="' . $nonce . '">ID . '" href="' . $link . „„>Apreciați această postare</a>”; ?>
Adresarea apelului Ajax fără JavaScript
Făcând clic pe link-ul creat la pasul anterior, unul va fi redirecționat către scriptul „admin-ajax.php”; cu toate acestea, ei nu vor găsi niciun rezultat util, deoarece funcția nu este creată pentru a rula acțiunea. Pentru a crea funcția în fișierul plugin și pentru a o adăuga la cârligele create de WordPress, introduceți următorul cod.
<?php // folosit aici doar pentru a activa evidențierea sintaxei. Lăsați acest lucru deoparte dacă este deja inclus în fișierul dvs. de plugin.
// definiți acțiunile pentru cele două cârlige create, mai întâi pentru utilizatorii conectați și următorul pentru utilizatorii deconectați
add_action("wp_ajax_my_user_like", "my_user_like");
add_action("wp_ajax_nopriv_my_user_like", "please_login");
// definește funcția care trebuie activată pentru utilizatorii conectați
function my_user_like() {
// nonce verifică pentru un strat suplimentar de securitate, funcția se va ieși dacă eșuează
dacă ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_like_nonce")) {
ieșire("Woof Woof Woof");
}
// preluați like_count pentru o postare, setați-o la 0 dacă este goală, creșteți cu 1 când este înregistrat un clic
$like_count = get_post_meta($_REQUEST["post_id"], "likes", true);
$like_count = ($like_count == ') ? 0 : $like_count;
$new_like_count = $like_count + 1;
// Actualizați valoarea 'aprecierii' meta cheie pentru postarea specificată, creează metadate noi pentru postare dacă nu există
$like = update_post_meta($_REQUEST["post_id"], "aprecieri", $new_like_count);
// Dacă acțiunea de mai sus nu reușește, tipul de rezultat este setat la 'eroare' și like_count setat la valoarea veche, dacă succes, actualizat la new_like_count
if($like === false) {
$result['type'] = "eroare";
$result['like_count'] = $like_count;
}
else {
$result['type'] = "succes";
$result['like_count'] = $new_like_count;
}
// Verificați dacă acțiunea a fost declanșată prin apelul Ajax. Dacă da, codul JS va fi declanșat, altfel utilizatorul este redirecționat către pagina de postare
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$rezultat = json_encode($rezultat);
echo $rezultat;
}
else {
antet("Locație: ".$_SERVER["HTTP_REFERER"]);
}
// nu uitați să vă încheiați scripturile cu o funcție die() - foarte important
a muri();
}
// definește funcția de declanșat pentru utilizatorii deconectați
function please_login() {
echo "Trebuie să vă conectați pentru a aprecia";
a muri();
}
Dacă totul merge bine, atunci când un utilizator conectat va face clic pe linkul „Apreciați această postare”, numărul de aprecieri va fi actualizat automat. Pe de altă parte, dacă JavaScript este dezactivat, pagina va fi reîmprospătată afișând numărul actualizat de „like”.
Adăugarea suportului pentru JavaScript
Adăugarea de suport pentru JavaScript poate ușura lucrurile. Pentru a utiliza AJAX cu PHP pe WordPress, este necesar să puneți în coadă biblioteca jQuery împreună cu fișierul JavaScript personalizat al pluginului. În acest scop, scrieți următorul cod în plugin.
admin_url( 'admin-ajax.php' )));
// puneți în coadă biblioteca jQuery și scriptul pe care l-ați înregistrat mai sus
wp_enqueue_script('jquery');
wp_enqueue_script('liker_script');
}
Apoi, este necesar să fie creat fișierul Javascript „liker_script.js”, care va fi încărcat în folderul rădăcină al pluginului. Următorul cod este folosit pentru a crea fișierul „liker_script.js”.
jQuery(document).ready(funcție() {
jQuery(".user_like").click( function(e) {
e.preventDefault();
post_id = jQuery(this).attr("data-post_id");
nonce = jQuery(this).attr("data-nonce");
jQuery.ajax({
tip: „post”,
dataType: „json”,
url: myAjax.ajaxurl,
date: {acțiune: „my_user_like”, post_id: post_id, nonce: nonce},
succes: funcție(răspuns) {
if(response.type == „succes”) {
jQuery("#like_counter").html(response.like_count);
}
else {
alert("Like-ul tău nu a putut fi adăugat");
}
}
});
});
});
Cum să implementați AJAX în temele WordPress
Următorii pași vor ajuta la implementarea AJAX cu PHP în temele WordPress. De exemplu, să presupunem că munca noastră este să afișăm categoriile într-un meniu derulant și, făcând clic pe „Categoria părinte”, subcategorii vor apărea într-o altă casetă derulantă. Această sarcină va fi îndeplinită cu ajutorul următorilor pași
Pasul 1 : Selectați „categorii” în partea stângă a tabloului de bord și introduceți numele categoriilor în caseta care apare în partea dreaptă și introduceți categoria slug-ul de mai jos. Dacă se creează categoria părinte, selectați „niciunul” sau, dacă sunt create subcategorii, selectați categoria părinte din opțiuni.
Pasul 2 : În acest pas, va fi creat un șablon WordPress în care va fi implementată funcționalitatea AJAX. Deschideți un nou fișier PHP și salvați-l. Introduceți următorul cod în pagina creată.
În codul de mai sus, „Nume șablon: Implementați Ajax”, este numele șablonului WordPress, iar funcțiile „get_header()” și „get_footer()” sunt folosite pentru a afișa conținutul antetului și subsolului paginii.
În primul rând, este necesar ca fișierul bibliotecii jQuery să fie inclus în pagină, ceea ce va ajuta la adăugarea lucrurilor AJAX. AJAX cu PHP se poate folosi orice bibliotecă JavaScript sau se poate apela AJAX cu JavaScript brut. În exemplul următor, biblioteca JavaScript jQuery este utilizată pentru implementarea AJAX.
Pasul 3 : Adăugați fișierul jQuery în șablon și apelați funcția „wp_dropdown_categories”, astfel încât categoriile părinte din meniul derulant să poată fi preluate.
#conținut{lățime:auto; înălțime: 400px; margine: 50px;}
<div>
</div>
<?php
Pasul 4 : Introduceți codul jQuery pentru a obține ID-ul categoriei principale care este selectată. Trimiteți-l în fișierul „functions.php” pentru a obține subcategorii sub acel ID de categorie părinte selectat. Rezultatele pot fi apoi trimise înapoi la pagină fără a o reîmprospăta.
$(funcție(){
$('#main_cat').change(function(){
var $mainCat=$('#main_cat').val();
// apelează ajax
$("#sub_cat").empty();
$.ajax({
url:"/wp-admin/admin-ajax.php",
tip:'POST',
data:'action=my_special_action&main_catid=' + $mainCat,
succes:funcție(rezultate)
{
// alertă(rezultate);
$("#sub_cat").removeAttr("dezactivat");
$("#sub_cat").append(rezultate);
}
});
}
);
});
În acest cod de mai sus, codul este adăugat la evenimentul de schimbare a categoriilor principale cu ID-ul „#main_cat”.
var $mainCat=$('#main_cat').val();
Funcția .val() ajută la obținerea valorii opțiunii selectate din meniul drop-down și la stocarea în variabila „$mainCat”.
$("#sub_cat").empty();
Subcategoria drop-down „#sub_cat” trebuie să fie eliberată, dacă conține vreo valoare anterioară, înainte de a apela AJAX.
Următoarea linie jQuery va ajuta la apelarea funcțiilor AJAX jQuery. Verificați parametrii funcției AJAX furnizați în secțiunea de mai jos.
url:"bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
tip:'POST',
Pentru ca AJAX să funcționeze în WordPress, este utilizat parametrul „URL”. Prin urmare, cererile vor fi trimise către fișierul „admin-ajax.php”. Apoi, cârligele din fișierul „functions.php” vor fi apelate pentru a obține datele postate care au fost trimise la adresa URL: „/wp-admin/admin-ajax.php”
Pentru a trimite valorile împreună cu cererea, se folosește parametrul „date”. În acest exemplu, sunt utilizate două argumente cu parametrul de date – action și main_catid.
Pasul 5 : În fișierul „functions.php”, următorul cod este folosit pentru a conecta o acțiune.
add_action('wp_ajax_my_special_action', 'my_action_callback');
În această acțiune de mai sus, hook are două argumente. În primul argument 'wp_ajax_my_special_action', 'wp_ajax_' este valoarea care este trimisă împreună cu parametrul de date 'action'. În al doilea argument „my_action_callback”, datele vor fi procesate și rezultatele vor fi trimise înapoi.
Acest cârlig de acțiune de mai sus este pentru utilizatorii conectați. Pentru utilizatorii deconectați, se poate conecta următoarea acțiune
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
Codul final după adăugarea cârligelor atât pentru utilizatori, cât și pentru funcția de apel invers este următorul
funcția implement_ajax() {
if(isset($_POST['main_catid']))
{
$categories= get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
foreach ($categorii ca $cat) {
$opțiune .= 'term_id.'">';
$opțiune .= $cat->cat_name;
$opțiune .= '('.$cat->număr_categorii.')';
$opțiune .= '';
}
echo 'Scegli...'.$opțiune;
a muri();
} // se încheie dacă
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//pentru utilizatorii care nu sunt autentificati.
Pasul 6 : În acest pas, creați o pagină nouă în tabloul de bord și atribuiți-i șablonul. După ce pagina este încărcată în browser, primul drop-down cu categoriile părinte va fi încărcat în ea.
Deoarece al doilea drop-down este gol, selectați opțiunea din primul drop-down pentru a verifica cum funcționează.
Astfel AJAX cu PHP poate fi folosit pe site-ul WordPress cu ajutorul unui plugin nou creat.