Share
În această serie de articole, revizuim o serie de sfaturi și strategii pe care le putem folosi pentru a construi mai multe pluginuri WordPress întreținute și vom merge totul în contextul unui plugin care folosește casete meta.
În postul anterior, am implementat funcționalitatea specială pentru filele noastre și am implementat și prima textarea care vor fi folosite pentru capturarea unor intrări de utilizator. Pentru cei care au urmat, știi că am ajuns doar până la:
Nu am finalizat procesul actual de dezinfectare, validare și salvare a datelor, și nu am deranjat introducerea conținutului pentru restul filelor. În următoarele două articole, vom face exact acest lucru.
În mod specific, în acest articol, vom continua să introducem restul interfeței de utilizator și apoi vom trece la scrierea codului responsabil pentru verificarea intrărilor de utilizator și asocierea lor cu postul dat.
Cu ceea ce se află în fața noastră, să începem.
Așa cum am menționat, în ultimul post am introdus a textarea în noi Proiect tab. Dacă ați urmat cu tutorialele și / sau utilizați codul în depozitul disponibil, atunci ar trebui să vedeți ceva de genul:
Ideea din spatele Proiect tab-ul este simplu: acesta este un loc în care utilizatorii vor putea să noteze note, să colecteze idei și, în principiu, să aibă un notepad în loc să-i ajute să-și adune ideile înainte de a scrie un mesaj.
Dar despre Resursăs Fila? Ideea din spatele acestei file este că utilizatorii vor putea să colecteze diferite adrese URL la pagini, tweet-uri, imagini și alte informații referitoare la conținutul pe care doresc să-l scrie, astfel încât să poată încorpora, leagă și / sau să le citeze în postarea lor.
Iată cum va funcționa:
În ceea ce privește ultimele două elemente, vom avea grijă de asta în următorul articol. Pentru moment, hai să avem grijă să adăugăm dinamic câmpuri de intrare.
Localiza admin / opinii / amprente parțiale / resources.php și actualizați codul pentru a arăta astfel:
Apoi, să creăm un fișier în admin / active / js și spune-i resources.js. Înlăturați fișierul astfel încât să pară următoarele:
(functie ($) 'use strict'; $ (function () );) (jQuery);
Apoi, trebuie să configurați un handler de evenimente astfel încât atunci când utilizatorul face clic pe Adăugați o resursă buton, face următoarele:
Iată codul complet comentat despre cum se obține acest lucru cu mai multe informații de mai jos:
Accentsconagua
/ ** * Creează un nou element de intrare care va fi adăugat la DOM, folosit pentru a reprezenta o singură resursă * (fie o adresă, un tweet, o adresă URL de imagine etc.) care trebuie să fie menționată în postare. * * @ din 0.4.0 * @ param obiect $ O referință la obiectul jQuery * Obiect @return Un element de intrare care trebuie atașat DOM. * / funcția createInputElement ($) var $ inputElement, iInputCount; / * Mai întâi, conta numărul de câmpuri de intrare care există deja. Acesta este modul în care vom * implementa numele și atributele ID ale elementului. * / iInputCount = $ ('# autori-comentarii-resurse'). copii () lungime; iInputCount ++; // Apoi, creați elementul de intrare real și apoi îl returnați apelantului $ inputElement = $ ('') .attr (' tip ',' text ') .attr (' nume ',' authors-commentary-resource- '+ iInputCount) .attr (' id ', autori-commentary-resource + iInputCount). ($) ($) ($) ($) $ ($) $ ($) (*) * / $ ('#', '', '', ' autori-comentarii-resurse ") .append (createInputElement ($)););));) (jQuery);În codul de mai sus, există o funcție special creată pentru crearea unui element de intrare și utilizarea numărului de elemente preexistente pentru a-i oferi un nume unic și ID.
Există, de asemenea, un handler de pregătire pentru configurarea DOM, care configurează o funcție de declanșare ori de câte ori utilizatorul face clic pe Adăugați o resursă buton. Când se face clic pe buton, se numește funcția menționată mai sus, iar elementul de intrare este atașat la containerul părinte.
Pentru a vă asigura că acest lucru arată cel mai bine, trebuie să scrieți câteva stiluri. Deci, așa cum am făcut cu sursa JavaScript, localizați admin / active / css / admin.css și apoi adăugați următorul cod în partea de jos a fișierului:
# authors-input-resources-comments [type = "text"] lățime: 100%; margin-bottom: 10px;
Acest lucru va asigura că fiecare element de intrare va avea o lățime de 100%, astfel încât fiecare să locuiască pe propria linie.
În cele din urmă, trebuie să enquege JavaScript pe care l-am scris cu WordPress, astfel încât să răspundă în mod corespunzător la elementele pe care le-am afișat pe partea noastră parțială. Pentru aceasta, localizați enqueue_admin_scripts funcția în admin / clasă-autori-commentary.php, și actualizați funcția astfel încât să arate astfel:
id) wp_enqueue_script ($ this-> name.'tabs ', plugin_dir_url (__FILE__).' authors- commentary / admin / assets / js / tabs.js ', array (' ; wp_enqueue_script ($ this-> name, '-resources', plugin_dir_url (__FILE__). 'authors-commentary / admin / assets / js / resources.js', array ('jquery'), $ this-> version); În acest moment, ar trebui să puteți încărca editorul de post în browserul dvs., faceți clic pe Resurse , apoi începeți dinamic adăugarea de câmpuri multiple de introducere pe pagina dvs..
Amintiți-vă că, de fapt, nu facem nimic pe partea de server încă, deci nu dezinfectăm, validăm sau salvăm aceste informații. Vom face asta în următorul articol.
Acum, că avem un loc pentru a colecta diverse note și resurse pentru a fi utilizate în toate posturile noastre, ce elemente ar face Publicat fila conține?
Toate cele trei sunt lucruri perfect acceptabile pentru introducerea în Publicat tab; cu toate acestea, pentru a nu reinventa roata și pentru a continua să introducă noi funcționalități, precum și alte modalități de a lucra cu API-ul WordPress, vom merge cu opțiunea finală.
Mai precis, vom încărca o listă cu toate comentariile care există în postare. Alături de fiecare comentariu va fi o casetă de selectare. Dacă comentariul a primit un răspuns, acesta va fi verificat; în caz contrar, acesta nu va fi verificat.
Noi vom nu includeți pingback-uri pentru acest lucru, deoarece autorul nu răspunde de obicei la pingback-uri.
Cu asta a spus, încărcare admin / opinii / amprente parțiale / published.php și adăugați următorul cod:
load_post_comments (); ?>
COMMENT_AUTHOR; ?>: COMMENT_CONTENT; ?>
Rețineți că sunăm la o funcție numită load_post_comments. Din moment ce nu l-am definit încă, hai să intrăm admin / clasa-autori-comentarii-meta-box.php și adăugați următorul cod:
get_the_ID (), 'status' => 'aproba'); $ comments = get_comments ($ args); returneaza comentariile $;
Această funcție va prelua o colecție a tuturor comentariilor aprobate pentru postarea respectivă. Partea parțială listată mai sus va itera apoi prin comentarii și apoi va crea o etichetă și o casetă de selectare care va permite utilizatorului să selecteze dacă comentariul a primit un răspuns sau nu.
Sub etichetă, veți observa autorul comentariului și comentariul. Aceasta se referă în principal la o modalitate de a identifica cu ușurință comentariul care a mai rămas.
În cele din urmă, trebuie să adăugăm încă un lucru la foaia de stil:
# autor-comentariu-comentarii etichetă font-weight: bold;
Și am terminat.
În cele din urmă, ar trebui să ajungeți cu un ecran la fel cum vedeți mai sus.
În următorul articol, vom reveni la server și vom începe să lucrăm la codul pentru validarea, dezinfectarea, serializarea și recuperarea întregului cod asociat interfeței cu utilizatorul pe care tocmai am creat-o.
Între timp, nu uitați să finalizați codul de pe GitHub (disponibil în partea dreaptă a acestui post) și nu ezitați să lăsați toate întrebările și comentariile din feed.
