Share
Această serie este axată pe sfaturi și strategii pe care le putem folosi pentru a scrie pluginuri WordPress - în special cele care folosesc casete meta - care sunt logic organizate și ușor de întreținut.
În primele două posturi ale seriei, am stabilit structura directorului inițial, am setat codul pluginului și am discutat despre ce va face pluginul. În ultimul post, am început să creăm căsuța meta și să introducem filele care vor conține fiecare dintre funcțiile pe care le vom lucra.
Acest articol va continua să se bazeze pe ceea ce am făcut până acum. Vom introduce conținutul în fiecare filă, vom implementa funcționalitatea care ne va permite să comutăm conținutul menționat și vom începe să introducem câmpurile pentru conținut în prima filă.
Înainte de a începe implementarea filelor care vor comuta între toate opțiunile capabile, trebuie să introduceți paralele, șabloane, vizualizări sau orice doriți să le apelați, astfel încât să avem fișiere special pentru manipularea informațiilor noastre.
Mai întâi, navigați la admin / vizualizări / amprente parțiale și adăugați următoarele fișiere (toate acestea pot fi goale, deocamdată am furnizat mai jos un cod de bază):
Accentsconagua
drafts.phpresources.phppublished.phpFiecare dintre aceste fișiere va corespunde uneia dintre filele din interfața meta-cutii. Să mergem mai departe și să introducem conținut de substituent pentru fiecare dintre file. Înainte de a termina cu articolul, vom implementa interfața de utilizare a primei filuri, dar acest lucru ne va oferi ceva vizibil cu care să lucrăm înainte de a continua să lucrăm la funcția propriu-zisă.
Adăugați următorul cod la drafts.php.
Acesta este locul în care se află conținutul proiectului.
Vom analiza acest aspect parțial în articol.
Adăugați următorul cod la resources.php.
Aici se va localiza conținutul Resurselor.
Vom analiza acest aspect parțial în serie.
Adăugați următorul cod lapublished.php.
Aici se va localiza conținutul publicat.
De asemenea, vom analiza acest aspect parțial în serie.
Avem încă un lucru de făcut înainte de a testa acest lucru în tabloul de bord WordPress: Trebuie să includem efectiv aceste fișiere în vizualizarea meta-box pentru a putea vedea informațiile.
Acest lucru este simplu de făcut. În primul rând, deschis autori-comentarii-navigation.php. Adăugați în fișier următorul cod (rețineți că întregul cod nou este o serie de include_once declaraţii).
Proiecte publicate
Presupunând că ați creat toate fișierele și le-ați inclus corect, suntem gata să aruncăm o privire la Tabloul de bord. Dacă toate au fost implementate corect, ar trebui să vedeți ceva de genul:
Evident, nu vrem ca tot conținutul să apară în prima filă, așa că trebuie să facem niște schimbări. Deci, să facem asta.
În cele din urmă, scopul nostru este de a folosi stilurile și funcțiile încorporate pe care le oferă WordPress. De fiecare dată când introduceți ceva ce nu se află în afara funcției de bază a WordPress, este ceva ce veți fi responsabil de menținerea în timp.
În plus, lucrați și la crearea unui plugin care este integrat cât mai strâns cu UI-ul WordPress. În acest scop, vom folosi o combinație de stiluri încorporate și stiluri personalizate și JavaScript pentru a obține exact ceea ce sperăm să obținem.
Știm că primul lucru pe care vrem să-l facem este să ascundem totul, cu excepția primei viziuni (adică totul, cu excepția Schițe).
Pentru a face acest lucru, trebuie să adăugăm o clasă atributul lui ascuns la paralele pentru Resurse tab și la Publicat fila.
Fiecare dintre următoarele fișiere ar trebui să arate astfel:
drafts.php:
Acesta este locul în care se află conținutul proiectului.
resources.php:
Aici se va localiza conținutul Resurselor.
published.php:
Aici se va localiza conținutul publicat.
Iar rezultatul acestei modificări minore ar trebui să fie următorul:
Ușor, nu? Acesta este motivul pentru care vă recomandăm să păstrați cât mai mult posibil funcționalitatea și stilurile de bază ale WordPress.
Bineînțeles că trebuie să introducem codul pentru a schimba datele între file, nu? Asa ca sa facem asta acum.
În primul rând, trebuie să vă asigurați că prima filă este marcată ca activă. Presupunând că ați urmat împreună cu acest tutorial și repozitoriul său corespunzător GitHub, atunci codul dvs. ar trebui să arate astfel:
Proiecte publicate
Ceea ce este minunat, deoarece marchează deja prima dvs. filă ca fiind activă cu utilizarea acesteia nav-tab-activă clasă. Ne-am desființat munca pentru noi:
Acum, există o serie de modalități de a realiza pasul doi. O vom face într-un mod care este documentat și explicat în cursul acestui articol, dar știți că există sunteți alte alternative pe care probabil că le veți vedea și că nu sunt neapărat greșite.
Linia de jos este că există o serie de modalități de a face față acestei situații, gestionăm-o una dintre multele modalități disponibile.
Deci, mai întâi, să adăugăm un fișier JavaScript la admin / active / js și o să sunăm tabs.js. Scheletul fișierului ar trebui să arate după cum urmează:
(functie ($) 'use strict'; $ (function () );) (jQuery);
Apoi, asigurați-vă că importați JavaScript numai în paginile postării. Pentru a face acest lucru, introducem un cârlig în constructorul nostru, unde am inclus deja câteva foi de stil. Constructorul complet este de mai jos:
nume = $ nume; $ this-> version = $ version; $ this-> meta_box = nou Autorii_Commentare_Meta_Box (); add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_admin_styles')); add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_admin_scripts')); Apoi implementăm funcția:
id) wp_enqueue_script ($ this-> nume. "-tabs", plugins_url ("autori-comentarii / admin / assets / js / tabs.js"), array ('jquery'), $ this->; În acest moment, avem tot ce avem nevoie pentru a implementa JavaScript pentru a controla filele. Mai jos, veți găsi codul comentat pentru aceasta și o scurtă explicație după fragmentul de cod, de asemenea:
(functie ($) 'utilizarea stricta'; $ (function () // apuca wrapper-ul pentru Navigation Tabs var navTabs = $ (' '), tabIndex = null; / * Ori de câte ori se face clic pe fiecare dintre filele de navigare, verificați dacă acesta are numele de clasă "nav-tab-active" *. face orice (după cum este deja * marcat ca fiind activ.) * * Apoi, când o filă nouă este marcată ca activă, vizualizarea copilului respectiv trebuie marcată * ca vizibilă. variabilele. * / navTabs.children () fiecare functie () $ (this) .on ('click', function (evt) evt.preventDefault (); $ (this) .hasClass ('nav-tab-active')) // Anulează fila curentă și marchează noua ca activă $ ('.nav-tab -active') .removeClass '); $ (acest) .addClass (' nav-tab-active '); // Salvați indexul fila care tocmai a fost marcată ca activă. fi 0 - 3. tabIndex = $ (acest) .index (); // Ascunde vechiul conținut activ $ ('# authors-commentary-navigation') .children ('div: not (.inside.hidden)') .addClass ("ascuns"); $ ('# autori-comentarii-navigare') .children ('div: nth-child (' + (tabIndex) + ')') .addClass ("ascuns"); // și afișați noul conținut $ ('# authors-commentary-navigation') .children ('div: nth-child (' + (tabIndex + 2) + ')'). ); ); ); ) (jQuery);Doar în cazul în care comentariile codului nu sunt clare, codul de mai sus configurează un handler de evenimente pentru toate filele. Când se face clic pe o filă, se pare că aceasta are nav-tab-activă clasă. Dacă da, atunci nu se întâmplă nimic.
În caz contrar, vom comuta fila și ascunde conținutul a fost active și afișați noul conținut eliminând ascuns nume de clasă pe care l-am adăugat mai devreme în articol.
Până acum, ar trebui să puteți comuta între file și să vedeți fiecare dintre cele trei implementări diferite fără probleme. Cu aceasta a spus, să mergem mai departe și să trecem la implementarea funcționalității pentru prima filă.
Deși nu vom finaliza funcționalitatea completă în timpul acestui tutorial, vom lucra pentru noi în articolul următor. Să presupunem că, în scopul acestui plugin, Schițe Interfața UI va fi un loc în care utilizatorul îl tratează pur și simplu ca pe un tampon pentru idei.
Poate include link-uri către articole, linkuri către tweets, scurte note despre contur, câteva propoziții și așa mai departe. În general, servește ca un "catch-all" pentru toate artefactele pe care autorul le poate folosi pe tot parcursul postului.
În acest scop, vom folosi un simplu, simplu textarea. În plus, nu vrem să introducem elemente de UI suplimentare decât sunt necesare, așa că vom face nu introduceți un buton de trimitere. În schimb, vom salva datele ori de câte ori utilizatorul dă clic pe "Actualizare" în editorul postului.
În acest fel, totul este salvat în același timp.
Din nou, nu vom intra în procesul de validare, dezinfectare și serializare, dar vom introduce o zonă de text în cadrul Schițe parțial pentru a ne face într-un loc frumos pentru articolul următor.
Deschis drafts.php, adăugați următorul cod, iar codul dvs. final ar trebui să arate astfel:
După aceea, actualizați admin.css fișier pentru a vă asigura că textarea se potrivește bine cu restul casetei meta:
# autori-comentarii-schițe lățime: 100%; înălțime: 250px;
Acum, când vizualizați meta-caseta, ar trebui să vedeți un format bine format textarea cu caseta meta cu filele care funcționează atunci când se face clic.
În următorul articol, vom continua să implementăm interfața de utilizator pentru fiecare dintre filele care există în caseta meta.
Apoi vom începe procesul de dezintoxicare, serializare și validare pe măsură ce începem să salvăm informațiile pe care utilizatorul le pune în meta-caseta. De asemenea, vom merge mai departe introducând câmpuri suplimentare în plugin.
.
