Share
Aceasta este o parte a unei serii privind modul în care pluginul și tema dvs. pot oferi cea mai bună experiență a utilizatorilor prin "instalarea" în interfața UI de la WordPress. Acest lucru înseamnă mai mult decât doar in cautarea o parte din WordPress (pe care am acoperit-o în prima parte), dar acolo unde este cazul, imitând același flux de lucru care ar fi (sperăm) familiarizat cu utilizatorii WordPress. O parte a acestui lucru este modul în care structurați paginile și prezentați informațiile utilizatorului final. Un instrument incredibil de util de la ambii o perspectivă UI și dezvoltator este meta-box. În acest tutorial ne uităm la modul în care puteți adăuga casete meta la propria pagină de administrare personalizată.
Folosirea meta-boxurilor este obișnuită în WordPress. Este folosit pe paginile widget-uri, meniuri și tabloul de bord - și, bineînțeles, ecranul de editare post. Ele pot fi un instrument fantastic pentru îmbunătățirea experienței utilizatorului:
Un punct final care nu trebuie să treacă neobservat: atunci când este implementat în mod corespunzător, casetele de meta permit și terților să adauge sau să elimine conținut din pagina de administrare, făcând pluginul sau tema să fie ușor extinse.
Vă rugăm să rețineți că nu susțin utilizarea meta-boxurilor pentru orice - doar în cazul în care este logic să faceți acest lucru. După cum sa discutat în prima parte, există momente în care interfața de utilizator existentă de WordPress nu este suficientă sau adecvată pentru ceea ce încearcă să faceți pluginul. În aceste cazuri, tu nu ar trebui constrângeți-vă la interfața de administrare a administratorului - dar nici nu trebuie să o ignorați.
WordPress este foarte bun la a fi extins și casetele meta nu fac excepție. Scripturile și stilurile pe care WordPress le folosește pentru poziționarea, stilul și animarea cutii de meta sunt, de asemenea, disponibile pentru noi. Utilizarea lor înseamnă că casetele meta (împreună cu toate "caracteristicile" lor) pot fi adăugate cu un cod relativ mic.
Cu toate acestea, pentru a profita de acest lucru, trebuie să imităm structura unei pagini de administrare a WordPress, astfel încât selectorii utilizați în scripturi și stiluri să se aplice paginii noastre. Acum, desigur, diferite pagini pun în aplicare meta-boxes diferit. De exemplu, tabloul de bord are până la 4 coloane de dimensiuni egale cu casete meta, în timp ce pagina post editare permite doar 1 sau 2, cu una care acționează ca o bara laterală. În funcție de modul în care doriți să apară pagina dvs., va trebui să structurați pagina în consecință. În acest tutorial, voi trece prin aspectul ecranului post edit 1/2-meta box. Astfel, vă permite să aruncați o privire la schema de bază a unei pagini de administrare.
Accentsconagua
.împachetaAcest element împachetează întreaga pagină de administrare. Se adaugă o marjă în partea superioară și dreaptă pentru a ține pagina de administrare departe de laturile ecranului. Acest lucru ar trebui să fie utilizat pe toate paginile de admin.
Înainte este pictograma ecranului. Acest lucru ar trebui să apară din nou pe toate paginile de admin. Marcajul pentru pictograma de pe ecran poate fi generat utilizând funcția screen_icon (). Am acoperit utilizarea sa în prima parte a acestei serii. screen_icon ( 'mi-id') produce HTML:
Următorul este titlul paginii. Titlul trebuie să fie înfășurat în interior Etichete. Dacă este cazul, se poate adăuga un link "adăugați un nou" în interiorul acestor etichete:
% s% s ', esc_html __ (' Titlul paginii ',' plugin_domain '), esc_url (admin_url (admin.php? page = my-link-to-add-new)), esc_html __ ("Adăugați noi", plugin_domeniu)); ?> De obicei, cu casete meta, acceptați o anumită formă de intrare de la utilizator. Pentru a face acest lucru va trebui să înfășurați întreaga pagină în interiorul unui formular. În orice caz, este necesar să se stocheze preferințele meta-casetei (care casete meta sunt închise și locația casetelor meta).
#poststuffAcest element împachetează suportul meta cutie. Este un element important pe care WordPress îl folosește în direcționarea stilurilor și scenariilor sale.
# Post-corpAcest element acționează ca suport pentru meta-box. Are două clase importante:
METABOX-titular și columns- *. Al doilea dintre acestea specifică aspectul paginii (indiferent dacă are 1 sau 2 coloane). Opțiunea de layout specificată de utilizator poate fi obținută cu get_current_screen () -> get_columns (). În cele ce urmează, folosim acest lucru pentru a adăuga clasa coloanele-1 sau coloanele-2 în mod corespunzător (cu cel din urmă în mod implicit).
# Post-corp Există două containere cu meta-box, care acționează ca "coloane" de meta-casete. Primul, .Postbox-container-1, acționează ca bara laterală în structura cu 2 coloane și în structura cu 1 coloană se află chiar deasupra celui de-al doilea container meta-box. Apoi este # Post-corp conținut. Acest element (opțional) nu conține nicio căsuță meta, dar conține orice conținut pe care doriți să îl plasați în partea de sus a paginii și nu puteți fi mutat. În ecranul post editare, de exemplu, conține titlul postului și editorul TinyMCE.
Pentru a imprima casetele meta din interiorul containerului relevant, folosim do_meta_boxes care are trei argumente:
ecran $ - ID-ul ecranului (sau putem folosi un șir gol pentru a utiliza ID-ul curent al ecranului).$ context - Acest identificator de șir utilizat la înregistrarea căsuței meta. Aceasta poate fi orice, dar ar trebui să fie descriptivă (de exemplu, "partea" și "normală"). Aceasta vă permite să definiți poziția implicită și ordinea câmpurilor meta.$ obiect - Aceasta este transmisă callback-ului meta-căsuței ca primul argument și de obicei este obiectul care este editat (de exemplu, un obiect post, pe ecranul post edit). Dacă acest lucru nu este relevant pentru pagina dvs. de admin, puteți trece nul.Acum avem structura paginii pe care acum ne dorim (sau orice terță parte) pentru a putea adăuga casete metașe la pagină. De asemenea, dorim să încărcăm JavaScript care să permită ca aceste casete meta să fie minimizate, ascunse sau mutate.
Pentru a permite adăugarea metalelor, trebuie să tragem două cârlige. Primul:
add_meta_box_ screen_id
Parcurge obiectul care este editat (sau null). Al doilea:
add_meta_box
Parolează două variabile: ID-ul ecranului și obiectul care este editat. Utilizatorii pot apoi să se conecteze la aceste acțiuni și să adauge căsuțele meta de pe pagină.
În continuare vrem să încărcăm scriptul WordPress postbox.js. Acest script permite utilizatorului să mute, să minimizeze sau să închidă casetele meta (și salvează preferințele). Scriptul trebuie inițializat, astfel încât va trebui să tipărim o linie de javascript în subsol pentru a face acest lucru.
În cele din urmă, adăugăm o opțiune de ecran care permite utilizatorului să comute între aspectul una și două. Opțiunile de ecran care permit utilizatorului să ascundă casetele meta sunt adăugate automat. Vom folosi încărcare - $ pagenow cârlig pentru a declanșa apelul nostru de apel numai pe pagina corespunzătoare. Pentru paginile de administrare personalizate, $ pagenow este ID-ul ecranului.
2, "implicit" => 2)); / * Imprimă script-ul în subsolul paginii. Aceasta "inițializează" funcțiile meta boxes / / wptuts_print_script_in_footer () ?>
Tot ce rămâne este să adăugați casetele meta.
În mod normal, se pot adăuga casete de meta utilizând add_meta_boxes sau, mai bine, încă add_meta_boxes_ post_type cârlige. Un tip de post general mai general poate fi considerat drept ID-ul ecranului. Am declanșat aceste cârlige în interiorul lui wptuts_add_screen_meta_boxes () funcția de mai sus. Tot ce rămâne rămâne să creezi aceste acțiuni și să le folosești add_meta_box () funcţie.
/ * Pe parcursul $ $ screen_id se presupune că va ține ecranul ID * / add_action ('add_meta_boxes _'. $ Screen_id, 'wptuts_add_my_meta_box'); funcția wptuts_add_my_meta_box () add_meta_box ('my_meta_box_id', // Meta Box ID __ ('Meta Box', 'plugin_domain'), // Meta caseta Titlu 'wptuts_my_meta_box_callback', // Callback definirea plugin-urilor pluginului $ screen_id, // Ecran la care se adaugă caseta meta "normal" // Context); Puteți descărca o clasă de pagină de admin simplu, bazată pe acest tutorial de la GitHub.
