Share
În această serie discutăm cum să implementăm Ajax în interfața WordPress. În primul post din serie, am analizat modul în care Ajax funcționează la nivel înalt, a analizat modul în care a introdus Ajax în Tabloul de bord al WordPress și a revizuit cele două cârlige disponibile pentru includerea lui Ajax în WordPress.
În acest moment, este momentul să construim ceva care să demonstreze modul în care putem folosi Ajax în interfața WordPress. Pentru a face acest lucru, vom scrie plugin-ul propriu, asigurându-vă că urmărim cele mai bune practici WordPress pe parcurs.
Până la sfârșitul acestui articol, vom avea un plugin complet cu codul sursă disponibil public pe GitHub. Cu asta a spus, să începem.
Dacă ați citit vreunul dintre articolele anterioare, atunci știți că întotdeauna îmi place să încep proiectele mele, planificând ceea ce vom face. Acest proiect nu este diferit.
În acest exemplu, vom introduce o casetă de selectare care permite cititorilor care sunt conectați la un site WordPress să verifice mesajele de blog pe care le-au citit. În acest fel, vor vedea numai mesaje pe care le-au citit încă de la conectarea pe site.
Pentru a construi acest lucru, vom folosi câteva lucruri:
Odată ce ați instalat mediul de lucru, iată planul de acțiune pe care îl urmăm pentru pluginul nostru:
Am înțeles? Mergeți mai departe și conectați-vă ca utilizatorul pe care l-ați creat cu rolul "Abonat" și să începem!
Odată ce ați importat datele de testare, setarea ar trebui să arate astfel:
De aici, suntem gata să începem să scriem pluginul.
Înainte de a scrie, de fapt, orice cod, îmi place să merg și să scot fișierele plugin. Aceasta înseamnă că vom configura directorul, structura plugin-ului de bază și orice directoare pe care ar putea să le folosim pentru dependențe de plugin-uri.
Din moment ce vom oferi unele stil de lumina, precum și fișiere JavaScript pentru inițierea solicitării Ajax, iată ce ar trebui să arate structura directorului de bază. Directorul lang este opțional, deși consider că este o bună practică:
Acum, să lăsăm textul necesar plugin.php. Rețineți că acest lucru nu va fi altceva decât un schelet. Acesta va fi în primul rând responsabil pentru stabilirea fundației pentru ceea ce vom construi mai târziu în articol:
În acest moment, puteți de fapt să activați plugin-ul în tabloul de bord al plugin-ului WordPress, deși nimic nu se va întâmpla. Dacă sunteți pregătit pentru asta, continuați-vă și faceți-o acum - veți putea urmări plugin-ul să vină la viață pe măsură ce lucrăm la el.
De vreme ce vom introduce o casetă de selectare pentru fiecare postare, care permite utilizatorilor să comită dacă au citit sau nu postul, trebuie să ținem cont de următoarele:
Putem realiza amândouă prin adăugarea următoarei funcții:
/ ** * Adaugă o căsuță de la sfârșitul unei postări în vizualizare unică, care permite utilizatorilor conectați * să le marcheze postarea ca fiind citită. * * @param $ content Conținutul mesajului * @return Conținutul mesajului cu sau fără caseta de selectare adăugată * / funcția publică add_checkbox ($ content) // Doar modificăm conținutul dacă utilizatorul este logat dacă (is_user_logged_in ( ) && is_single ()) // Construiți elementul care va fi folosit pentru a marca această postare ca citită $ html = '„; $ html. = '„; $ html. = '„; // Adăugați-l la conținut $ content = $ html; // se închide dacă returnează $ content; // end add_checkbox
Citiți cu atenție comentariile, deoarece ar trebui să explice exact ce se întâmplă; cu toate acestea, dacă nu sunteți clar, nu ezitați să lăsați un comentariu.
Apoi, trebuie să adăugăm următoarea linie în constructor astfel încât continutul filtru este numit:
Accentsconagua
// Configurați acțiunea pentru redarea casetei de selectare add_filter ('the_content', array (& $ this, 'add_checkbox')); În cele din urmă, să adăugăm un pic de stil doar pentru a da căsuței un aspect ușor și unic ușor în contextul temei Twenty Eleven. În plugin-ul lui plugin.css fișier, adăugați următorul cod:
# ive-read-this-container marja: 1em 0 1em; fundal: #eee; frontieră: 1px solid #ccc; umplutură: 0.25cm;
Acum, dacă vă conectați la instalarea WordPress și navigați la partea de jos a unui singur post, ar trebui să vedeți ceva asemănător cu următoarea imagine:
În acest moment, suntem gata să începem să scriem niște JavaScript.
Primul lucru pe care trebuie să-l facem este să configurați JavaScript astfel încât să apară numai dacă containerul "Am citit această" este pe pagină. Există o varietate de moduri de a face acest lucru, dar din moment ce încărcăm JavaScript pe fiecare pagină, vom folosi JavaScript pentru a verifica prezența casetei de verificare "Am citit acest lucru" pe care o scriem la pagina.
Pentru aceasta, adăugați următorul cod la plugin.js. Comentariile codului trebuie să fie explicite. Dacă nu, lăsați un comentariu!
(funcția ($) $ (funcția () // Dacă în această pagină se află "Am citit acest container", să configuram handlerul evenimentului dacă (1 === $ (' container ") lungime) // end if); (jQuery)); În codul pe care îl vedeți mai sus, orice lucru pe care îl plasăm în condițional va fi declanșat numai dacă elementul container "Am citit această" este prezent.
În acest caz, știm că trebuie să trimitem ID-ul postului pe server. Deoarece utilizatorul este conectat, vom putea obține ID-ul acestuia pe partea de server.
Deci, următorul pas este să obțineți codul postului pe care suntem. Din fericire, Twenty Eleven stochează numărul postului în articol ID-ul elementului. Trebuie doar să o analizăm.
Să facem asta acum:
// Folosim atributul change astfel incat handler-ul evenimentului sa apara // ori de cate ori este bifat caseta de selectare sau eticheta asociata. $ ('input [nume =' ive-read-this ']') schimbare (function (evt) // Putem prelua ID-ul acestei postari ID-ul. Acest lucru va fi necesar // pentru a putea marca faptul că utilizatorul a citit această postare specială și o putem ascunde. var sArticleId, iPostId; // Obțineți codul de articol și împărțiți - cel de-al doilea index este întotdeauna ID-ul postului în Twenty Eleven sArticleId = $ ("articol"). iPostId = parseInt (sArticleId.split ('-') [1]); ); În acest moment, suntem pregătiți să configuram o solicitare Ajax. Vom folosi jQuery $ .post metodă pentru a face acest lucru și vom folosi standardul WordPress ajaxurl să ne ocupăm de răspunsul nostru.
Să mergem mai departe și să scriem codul care va trimite ID-ul mesajului. Ne vom face griji cu privire la răspunsul de mai târziu în acest articol, prin urmare, comentariul "TODO" din cod.
// Inițiți cererea de a marca acest post special ca fiind citit $ .post (ajaxurl, post_id: iPostId, funcția (răspunsul) // TODO);
În acest moment în dezvoltare, sursa JavaScript completă ar trebui să arate astfel:
(funcția ($) $ (funcția () // Dacă în această pagină se află "Am citit acest container", să configuram handlerul evenimentului dacă (1 === $ (' container ") lungime) // Folosim atributul change astfel incat handler-ul evenimentului sa fie incarcat // ori de cate ori este bifat caseta de validare sau eticheta asociata. $ ('input [name =" ive-read-this "]). schimbare (funcție (evt) // Putem prelua ID-ul acestei postări din ID-ul. Acest lucru va fi necesar // pentru a putea marca faptul că utilizatorul a citit această postare specială și o putem ascunde. var sArticleId, iPostId; // Obțineți codul de articol și împărțiți - cel de-al doilea index este întotdeauna ID-ul postului în Twenty Eleven sArticleId = $ ("articol"). iPostId = parseInt (sArticleId.split ('-') [1]); // Inițiați cererea de a marca această post special ca fiind citit $ .post (ajaxurl, post_id: iPostId, funcția (răspunsul) // TODO); ); // end if); (JQuery)); Pentru cei dintre voi care au lucrat prin exemplul codului pe măsură ce ați citit articolul, veți observa imediat că browserul dvs. aruncă o eroare de consolă:
Uncaught ReferenceArror: ajaxurl nu este definit
Hopa! Și acest este locul în care trebuie să vă asigurați că includeți corect biblioteca Ajax WordPress.
Pentru a face acest lucru, va trebui să intrăm în wp_head acțiune. Adăugați următoarea linie de cod în constructorul pluginului:
// Include biblioteca Ajax pe front-end add_action ('wp_head', array (& $ this, 'add_ajax_library')); Apoi, adăugați următoarea funcție. Aceasta este de fapt responsabil pentru includerea bibliotecii Ajax:
/ ** * Adaugă Biblioteca Ajax WordPress pe interfață. * / funcția publică add_ajax_library () $ html = '„; echo $ html; // end add_ajax_library
Acum, dacă încercați să executați codul, nu ar trebui să aveți nicio problemă. În acest moment, suntem gata să continuăm.
Acum, când am primit cererea trimisă serverului, putem să scriem un handler pentru evenimente de la server. Acesta trebuie să funcționeze:
-1; altfel, ne vom întoarce 1. Vom rezolva aceste valori în rutina de răspuns din JavaScript.Mai întâi, vom adăuga cârligul în constructorul pluginului:
// Configurați manipularea evenimentului pentru a marca această postare ca citită pentru utilizatorul curent add_action ('wp_ajax_mark_as_read', array (& $ this, 'mark_as_read')); Apoi, vom implementa manipulatorul:
/ ** * Utilizează ID-ul curent al utilizatorului și ID-ul postului de intrare pentru a marca această postare ca citită * pentru utilizatorul curent. * * Stocăm ID-ul acestei postări în meta utilizatorului asociat, astfel încât să îl putem ascunde * de afișarea ulterioară în listă. * / funcția publică mark_as_read () // În primul rând, trebuie să ne asigurăm că parametrul post ID a fost setat și că este o valoare numerică dacă (isset ($ _POST ['post_id']) && is_numeric ($ _POST ['post_id '])) // Dacă nu reușim să actualizăm meta utilizatorului, răspunde cu -1; în caz contrar, răspundeți cu 1. echo false == update_user_meta (wp_get_current_user () -> ID, $ _POST ['post_id'], 'ive_read_this')? "-1": "1"; // end if die (); // sfârșitul mark_as_read
În acest scop, să revizuim cele restante A FACE în funcția de răspuns a JavaScript pe care lucrăm. Iată scriptul complet:
(funcția ($) $ (funcția () // Dacă în această pagină se află "Am citit acest container", să configuram handlerul evenimentului dacă (1 === $ (' container ") lungime) // Folosim atributul change astfel incat handler-ul evenimentului sa fie incarcat // ori de cate ori este bifat caseta de validare sau eticheta asociata. $ ('input [name =" ive-read-this "]). schimbare (funcție (evt) // Putem prelua ID-ul acestei postări din ID-ul. Acest lucru va fi necesar // pentru a putea marca faptul că utilizatorul a citit această postare specială și o putem ascunde. var sArticleId, iPostId; // Obțineți codul de articol și împărțiți - cel de-al doilea index este întotdeauna ID-ul postului în Twenty Eleven sArticleId = $ ("articol"). iPostId = parseInt (sArticleId.split ('-') [1]); // Inițiază cererea de a marca acest post special ca fiind citit $ .post (ajaxurl, action: 'mark_as_read', post_id: iPostId, funcția (răspunsul) // Dacă serverul întoarce '1' (1 === parseInt (răspuns)) $ ('# ive-read-a- acest container ") slideUp ('fast'); // În caz contrar, să avertizăm utilizatorul că a existat o problemă. Într-un mediu mai amplu, ne-ar // să ne ocupăm de acest lucru mai grațios. A apărut o eroare la marcarea acestui post ca fiind citit. Încercați din nou. "); // end if / else); ); // end if); (JQuery)); Dacă utilizatorul se întâmplă să-și găsească drumul către o pagină individuală de postare (cum ar fi legătura cu acesta), trebuie să verificăm dacă a fost marcat anterior ca acesta să fie citit.
Pentru a face acest lucru, trebuie să refactor add_checkbox astfel încât să verifice dacă utilizatorul este conectat și citește meta utilizatorului pentru a determina dacă postul a fost marcat anterior drept citit:
/ ** * Adaugă o căsuță de la sfârșitul unei postări în vizualizare unică, care permite utilizatorilor conectați * să le marcheze postarea ca fiind citită. * * @param $ content Conținutul mesajului * @return Conținutul mesajului cu sau fără caseta de selectare adăugată * / funcția publică add_checkbox ($ content) // Doar modificăm conținutul dacă utilizatorul este logat dacă (is_single )) // Dacă utilizatorul este logat ... dacă (is_user_logged_in ()) // Și dacă a citit anterior această postare ... dacă ('ive_read_this' == get_user_meta (wp_get_current_user () -> ID, get_the_ID , true)) // Construiți elementul pentru a indica că această postare a fost citită $ html = '„; $ html. = '„; $ html. = __ ("Am citit această postare", "ive-read-this"); $ html. = '„; $ html. = '„; // În caz contrar, dați-le opțiunea de a marca acest post ca fiind citit altceva // Construiți elementul care va fi folosit pentru a marca această postare ca citit $ html = '„; $ html. = '„; $ html. = '„; // end if // Adăugați-l la conținut $ content = $ html; // end if // se închide dacă returnează $ content; // end add_checkbox În acest moment, aveți un plugin de lucru:
Nu e rău, corect?
Desigur, există întotdeauna loc pentru a experimenta pe cont propriu cu asta. De exemplu, puteți lucra la excluderea acestor postări din bucla principală dacă au fost marcate ca citite. O altă opțiune ar fi adăugarea unui nume de clasă personalizat și apoi stylingul postului pentru a indica faptul că utilizatorul curent la citit.
În fine, rețineți că puteți prelua întregul cod sursă în întregime pe GitHub.
