Share
În tutorialul anterior, am început să vorbim despre spații de nume și autoloading cu PHP în contextul dezvoltării WordPress. Și deși niciodată nu am introdus vreunul dintre aceste două subiecte, le-am definit și am început să punem fundamentul pentru modul în care le vom prezenta într-un tutorial viitoare.
Înainte de a face acest lucru, totuși, există câteva funcționalități pe care trebuie să le finalizăm pentru a completa pluginul nostru. Scopul este de a termina plugin-ul și funcționalitatea acestuia, astfel încât să avem un plugin de bază orientat pe obiecte, care este documentat și funcționează bine cu un avertisment; nu utilizează spații de nume sau autoloading.
Acest lucru, la rândul său, ne va oferi șansa de a vedea cum arată un plugin înainte și după introducerea acestor subiecte.
Înainte de a continua, vă recomand să citiți tutorialul anterior. În acest fel, veți înțelege ce spații de nume și automate sunt, veți avea versiunea de lucru a plugin-ului până la acest punct (de vreme ce vom construi pe el) și atunci veți fi gata să pleacă din acel punct înainte.
Odată ce ați citit-o, nu ezitați să reveniți la acest tutorial și să vă reluați activitatea.
Ca și în toate tutorialele mele, presupun că aveți un mediu de lucru activ pe mașina dvs. Aceasta include următoarele:
Dacă sunteți atât de departe în serie (sau ați citit oricare dintre lucrările mele anterioare), atunci presupun că deja aveți ceva ca cele de mai sus deja existente.
Și când o faci, suntem gata să începem.
Reveniți din tutorialul anterior:
Vom construi un plugin care face ușor încărcarea foilor de stil și a stilurilor JavaScript în plugin-ul nostru și care afișează o casetă de meta care solicită utilizatorului o întrebare care să îi ajute să creadă ceva despre care să facă blog.
Da, e simplu și nu este posibil ca cineva să folosească în afara studierii conceptelor pe care le acoperim în acest blog. Dar mijloacele prin care predăm conceptele pe care le folosim sunt cele importante.
Acest plugin ne oferă posibilitatea de a face exact acest lucru.
La sfârșitul ultimului tutorial am plecat cu un plugin care afișează o întrebare aleatoră scriitorului din partea superioară a barei laterale în ecranul de creare a postului WordPress.
De fiecare dată când actualizați pagina, se încarcă o nouă întrebare. În prezent, nu este rău, dar există unele îmbunătățiri pe care le putem face în ceea ce privește stilul conținutului din căsuța meta.
Adică, putem introduce foi de stil care ne vor ajuta să creăm o prezentare puțin mai vizibilă. În plus, ne va oferi șansa de a explora câteva tehnici orientate spre obiecte pe care le putem folosi atunci când lucrăm cu elemente precum stiluri de stil.
Deci, să începem.
În scopul acestui tutorial, nu voi folosi niciun tip de preprocesor. Voi folosi doar CSS de vanilie. Dar modul în care vom enqueue assets va fi un pic mai mult orientat pe obiect decât ceea ce mulți dezvoltatori WordPress sunt obișnuiți să vadă.
Toate acestea vor contribui la scopul utilizării spațiilor de nume și autoloading în această serie. Dar, mai întâi, să începem cu introducerea acestor foi de stil, crearea interfețelor clasei necesare, clase și comunicarea cu API-ul WordPress.
În admin director, creați un subdirector numit bunuri. În cadrul bunuri director, creați un subdirector numit css și apoi adăugați fișierul admin.css.
Structura directorului final ar trebui să arate cam așa:
Nu suntem gata să oferim încă vreun tip de stiluri. În schimb, trebuie să ne îndreptăm atenția asupra codului de pe partea de servere care răspunde de incluziunea acestei foi de stil.
Când vine vorba de înregistrarea și enqueuing atât stil de foi și JavaScript, majoritatea dezvoltatorilor plugin-ului WordPress sunt familiarizați cu cârligele necesare pentru a face exact asta. Mai exact, mă refer la admin_enqueue_scripts și wp_enqueue_style.
Și, deși vom folosi aceste cârlige, o să o punem într-o manieră simplă, orientată spre obiect. Nu, această serie nu are scopul de a se arunca adânc în principii orientate pe obiecte, dar, atunci când este cazul, mă bucur să încerc să le arăt.
În programarea orientată pe obiecte, o interfață este definită ca atare:
O interfață este o structură / sintaxă de programare care permite calculatorului să impună anumite proprietăți unei clase.
Un alt mod de a gândi este:
Dacă aveți o clasă care implementează o interfață, clasa trebuie sa defini funcționalitatea pe care interfata o dictează.
Deci, dacă interfața are două semnături de metode cu o anumită vizibilitate și nume, atunci clasa de implementare a interfeței trebuie să aibă două metode cu aceeași vizibilitate și același nume, precum și o implementare reală a metodei.
Și asta vom face. În primul rând, trebuie să definim interfața noastră. Deci, în UTIL directorul, creați interfață-assets.php și apoi adăugați următorul cod:
Observați că interfața nu definește de fapt funcționalitatea. În schimb, specifică ce ar trebui să definească clasele care implementează această interfață.
După cum puteți presupune, clasele care vor implementa această interfață vor avea două metode de mai sus împreună cu o implementare reală pentru fiecare funcție. Și vom vedea cum funcționează acest lucru momentan.
Apoi, asigurați-vă că ați inclus acest fișier în fișierul plugin principal:
Apoi, trebuie să creați un fișier care să implementeze această interfață. Deoarece lucrăm cu fișierele CSS, vom crea un încărcător CSS.
Încărcătorul CSS
Aceasta este clasa care este responsabilă de implementarea interfeței și de efectuarea lucrării reale de înregistrare a funcției cu cârligul WordPress necesar (și de fapt dând implementarea funcției respective).
Dacă aruncați o privire la codul de mai jos, ar trebui să pară foarte asemănătoare cu ceva pe care l-ați văzut sau poate ați lucrat într-un proiect anterior:
Codul de mai sus ar trebui să să fie relativ ușor de urmărit având în vedere comentariile codului, dar voi sublinia ce se întâmplă:
Accentsconagua
init și Puneți în coadă sunt ambele funcții necesare deoarece clasa implementează Assets_Interface.init se numește, înregistrează Puneți în coadă funcția cu cârlig responsabil pentru înregistrarea unei foi de stil.Puneți în coadă metoda înregistrează admin.css fișier și utilizări filemtime ca o modalitate de a ști dacă fișierul sa schimbat sau nu (ceea ce ne permite să bustăm orice versiune cache a fișierului la servire).În această implementare, actualul admin.css fișierul este adăugat pe fiecare pagină. Adăugarea unei condiționări pentru a verifica ce pagină este activă și apoi pentru a determina dacă foaia de stil trebuie adăugată sau nu poate fi adăugată ca exercițiu post-tutorial. Pentru o sugestie, verificați get_current_screen ().
Apoi, trebuie să includeți acest fișier în fișierul principal de plugin:
Apoi, trebuie să instanțializăm încărcătorul CSS și să îl sunăm
initîn principaltutsplus_namespace_demofuncţie:init ();Presupunând că ați făcut totul bine, ar trebui să puteți reîmprospăta Adăugați postare nouă pagina, vizualizați sursa și vedeți
admin.csslistată ca o foaie de stil disponibilă.Mai avem încă de făcut înainte de a fi gata să încheiem această parte a tutorialului. Trebuie să scriem niște CSS.
Stilul Meta Box
Deoarece majoritatea tutorialului s-au concentrat pe unele tehnici orientate pe obiecte și avem în continuare câteva subiecte noi de explorat în această serie, vom face această parte relativ ușoară.
Mai degrabă decât să folosim doar anumite stiluri implicite, așa cum este prevăzut de WordPress, să îmbunătățim cu puțin meta-caseta.
Mai întâi, localizați
facefuncția înMeta_Box_Displayclasă. Să o modificăm astfel încât să emită conținutul fișierului într-un element de paragraf cu atributul ID al "tutsplus-author-prompt".Pentru a face acest lucru, vom introduce o nouă metodă care va utiliza o metodă API WordPress pentru dezinfectarea HTML.
array ('id' => array (),)); returnați wp_kses ($ html, $ permis_html);Apoi vom apela această funcție din interiorul
facepentru a afișa conținutul în caseta meta.question_reader-> get_question_from_file (fișier $); $ html = "$ întrebare
"; echo $ this-> sanitized_html ($ html);Acum putem deschide admin.css și facem câteva mici modificări pentru a actualiza aspectul casetei meta din Adăugați postare nouă ecran. Să adăugăm următorul CSS:
# tutsplus-autor-prompt font-style: italic; text-align: centru; culoare: # 333;Și în acest moment, caseta de meta ar trebui să arate acum ceva asemănător:
Așa cum am menționat la început, nu este nimic important, dar este ceva care îmbunătățește aspectul și simțul întrebării doar puțin.
Ce urmeaza?
În acest moment, am introdus o serie de clase, interfețe și alte caracteristici orientate spre obiect. Avem un plugin care utilizează date dintr-un fișier text, care comunică cu API-ul WordPress și care dezinstalează informațiile înainte de al redacta pe pagina de pornire.
Avem o fundație bună din care să începem să vorbim despre spațiile de nume. În următorul tutorial, vom face exact asta. Dacă încă nu ați reușit să prindeți restul seriei, atunci vă recomandăm că vom continua să construim pe ceea ce am învățat.
Dacă, între timp, căutați alte materiale legate de WordPress, puteți găsi toate tutorialele mele anterioare pe pagina mea de profil și puteți să mă urmați pe blogul meu sau pe Twitter.
Până atunci, nu uitați să descărcați versiunea de lucru a pluginului (versiunea 0.2.0) atașată la acest post. Linkul este disponibil în bara laterală sub un buton intitulat Descărcați atașamentul. Și, ca de obicei, nu ezitați să puneți întrebări în comentarii!
Resurse
