Crearea WordPress Meta Boxes mentenabilă Aspectul

În această serie, ne străduim să creăm metode de întreținere WordPress. Adică, ne uităm la unele bune practici pe care le putem folosi în dezvoltarea noastră WordPress pentru a ne asigura că scriem cod care poate fi întreținut de noi înșine sau de echipa noastră, deoarece continuă să evolueze în timp.

În primul mesaj, ne-am uitat la structura inițială a directoarelor și am setat codul de bază necesar pentru a obține un plugin care rulează în WordPress. În acest post, vom continua să planificăm și să construim pluginul nostru. 

De asemenea, vom vorbi despre deciziile pe care le luăm atunci când vine vorba de a separa părți din codul nostru și de modul în care acesta determină mentenabilitatea.

Planificare Comentariul autorului

În postul anterior, am început să lucrăm la un plugin numit Comentariul autorului. Ideea din spatele plugin-ului este că va permite autorilor postului să lase diverse note și active asociate postului care au fost folosite fie ca inspirație, fie ca gânduri după ce postul a fost scris și primit, și alte informații similare.

Când scriem un post, să spunem că dorim să surprindem trei informații specifice:

1. Notele utilizate la pregătirea postului
2. Activele și resursele utilizate în cadrul postării
3. Tweets și link-uri către comentarii și feedback după publicare

Pentru a fi clar, vrem să avem o modalitate de a păstra notele care au mers în crearea postului înainte de a fi scrisă, link-uri către diferite materiale - fie articole externe, imagini, clipuri video, mostre de cod și așa mai departe - lista de tweets, link-uri către comentarii și diferite fragmente din e-mailurile pe care le-am primit.

În acest moment, avem suficient să continuăm pentru a începe pregătirea meta-boxului și a aspectului cu tab-uri pentru acesta.

Tabelele Meta Box

Înainte de a începe de fapt să scriem orice cod, să numim filele care vor fi asociate cu fiecare dintre stările postării noastre, așa cum sunt enumerate mai sus. Acest lucru ne va ajuta să organizăm conceptual elementele de intrare astfel încât acestea să fie grupate logic împreună.

Cu toate acestea, puteți să le numiți orice doriți, dar dacă urmăriți împreună cu acest tutorial și cu codul sursă furnizat, atunci acesta este ceea ce vă puteți aștepta să vedeți.

1. Se va apela prima filă Proiect deoarece va conține toate punctele de glonț, propoziții și alte note care au mers la pregătirea postului.
2. Se va apela a doua tabă Resurse deoarece acesta va include informații despre alte postări, link-uri, videoclipuri și așa mai departe, pe care le putem face referire în postarea noastră sau pe care le putem încorpora în postarea noastră.
3. Se va apela fila finală Publicat deoarece va conține linkuri către comentarii, câmpuri pentru e-mail și alte informații care sunt relevante pentru post după ce au fost publicate.

Destul de bine, nu-i așa? Vom vorbi mai multe despre elementele de intrare pentru fiecare filă odată ce ajungem la acel punct al codului, dar pentru moment trebuie să ne concentrăm pe crearea casetei meta și implementarea filelor.

Crearea metalei

Pentru a crea meta caseta, vom profita de add_meta_box funcția documentată în Codul WordPress. Pentru a face acest lucru, vom introduce o nouă clasă, actualizând fișierul de bootstrap al pluginului și introducând câteva vizualizări care vor fi folosite pentru a face markup în browser.

Clasa Meta Box

Pentru a ne asigura că codul nostru este bine încapsulat și că fiecare clasă reprezintă o singură idee, vom crea un cod Authors_Commentary_Meta_Box clasă. Această clasă va fi responsabilă pentru înregistrarea unui cârlig cu add_meta_box acțiune, configurarea meta-casei și redarea conținutului său.

Pentru cei care nu folosesc pentru a scrie plugin-uri într-un mod orientat obiect cu WordPress, această abordare ne permite să ne segmentăm domeniile de responsabilitate - cum ar fi o meta-box - și să avem o singură clasă care să reprezinte tot ceea ce merge în crearea unei.

Pentru a face acest lucru, creați mai întâi clasă-autori-comentarii-meta-box.php în directorul de administrare. Apoi, adăugați următorul cod:

 * / clasa Authors_Commentary_Meta_Box / ** * Înregistrați această clasă cu API-ul WordPress * * @since 0.2.0 * / funcția publică __construct () add_action ('add_meta_boxes', array ($ this, 'add_meta_box'));  / ** * Funcția responsabilă pentru crearea metaboxului real. * * @ din 0.2.0 * / funcția publică add_meta_box () add_meta_box ("autori-comentariu", "Comentariul autorului", array ($ this, 'display_meta_box'), 'post', 'normal', 'default') ;  / ** * Redă conținutul casetei meta. * * @ din 0.2.0 * / funcția publică display_meta_box ()  

Comentariile și conținutul clasei ar trebui să o facă relativ ușor de înțeles. Ea face trei lucruri, dar trebuie să fie clar:

1. Constructorul înregistrează add_meta_box cu acțiunea WordPress corespunzătoare.
2. add_meta_box funcția definește proprietățile casetei meta.
3. display_meta_box funcția nu face nimic încă - vom lucra la acest moment.

Înainte de a continua, există câteva modificări pe care trebuie să le prezentăm restului pluginului.

În primul rând, trebuie să includeți acest fișier nou în fișierul de bootstrap al pluginului. În autori-commentary.php, adăugați următoarea linie de cod peste actualul require_once afirmație:

/ ** * Clasa care reprezintă caseta meta care va dispărea filele de navigare și fiecare dintre câmpurile * pentru căsuța meta. * / require_once plugin_dir_path (__FILE__). 'Admin / clasa-autori-comentarii-meta-box.php';

Adăugăm această linie deasupra codului inițial, deoarece codul inițial depinde de acest fișier special; prin urmare, trebuie încărcat mai întâi.

Apoi, trebuie să introducem o nouă proprietate în partea laterală admin / clasă-autori-commentary.php care se va referi la o instanță a casetei meta:

/ ** * O referință la caseta meta. * * @ din 0.2.0 * @access private * @var Authors_Commentary_Meta_Box $ meta_box O referință la caseta meta pentru plugin. * / privat $ meta_box;

În cele din urmă, trebuie să instanțiăm codul în constructorul clasei:

/ ** * Inițializați clasa și setați proprietățile acesteia. * * @ din 0.1.0 * @var string $ name Numele acestui plugin. * @var string $ version Versiunea acestui plugin. * / funcția publică __construct ($ name, $ version) $ this-> name = $ name; $ this-> version = $ version; $ this-> meta_box = nou Autorii_Commentare_Meta_Box (); 

În acest moment, ar trebui să puteți activa pluginul, să navigați la o pagină de postare și să vedeți o casetă metală goală:

Nimic prea interesant, dar avem ceea ce avem nevoie pentru a începe să introducem navigarea cu ajutorul filelor.

Adăugarea filelor

În acest moment, suntem gata să introducem porțiunea de navigare cu fișiere din caseta meta. În cele din urmă, obiectivul nostru este să introducem marcajul și stilurile pentru fila în acest post și apoi să implementăm comportamentul și elementele din postul următor din seria.

Cu asta a spus, să creați mai întâi a vizualizari subdirector în cadrul admin director. Din punct de vedere tehnic, am făcut acest lucru în articolul precedent; cu toate acestea, nu am avut conținut în director, așa că nu a fost bifat în controlul sursă (astfel, directorul nu a fost adăugat - deci dacă urmăriți împreună cu depozitul, acum este timpul pentru a crea directorul).

Apoi, creați un fișier din directorul de vizualizări numit autori-comentarii-navigation.php. Acest fișier va servi în principal ca marcare; cu toate acestea, acesta va include un pic de PHP în momentul în care ne descurcăm cu acest plugin.

Adăugați în fișier următorul cod. O vom discuta mai detaliat după blocul de cod:

 
 Proiecte publicate 
 

După ce ați terminat, introduceți următorul cod în Authors_Commentary_Meta_Box, adăugați următorul cod pentru a importa această piesă de markup:

În afară de div container pe care îl avem, observați următoarele:
 
Am înfășurat trei ancore într-un an h2 element. h2 elementul conține atribute de clasă din nav-tab-înveliș și actual. Acest lucru ne permite să moștenim stiluri direct din WordPress fără a face nimic din partea noastră.
 
Fiecare ancora are a nav-tab clasa din care primul are nav-tab-activă clasă. Acest lucru ne dă un pic de stil de la care moștenim din WordPress.
 
Fiecare ancora are și href atributul lui javascript :; deoarece ancorele nu ne vor duce de oriunde. În schimb, într-un tutorial viitor, vom folosi JavaScript pentru a controla filele și conținutul afișat în cadrul fiecăruia.
 
În acest moment, ar trebui să vedeți următoarele:
Rețineți că toate stilurile aplicate la file au fost furnizate de WordPress. Singurul lucru pe care ați putea dori să-l optimizați este marginea care există între file și linia orizontală de sub ei. 
Să facem asta acum.
Inclusiv o foaie de stil
În admin director, adăugați un alt subdirector numit bunuri și în interiorul acestuia un director numit css. Apoi, creați un fișier gol numit admin.css.
După aceasta, includeți următoarele linii în fișierul CSS:
a.nav-tab margin-bottom: -4px; 
Apoi asigurați-vă că includeți următorul apel în constructorul clasă-autori-commentary.php:
add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_admin_styles'));
În cele din urmă, adăugați următoarea funcție - este responsabilă pentru incluziunea foii de stil reale:
/ ** * Include toate fișierele specific pentru tabloul de bord. * * @ din 0.2.0 * / funcția publică enqueue_admin_styles () wp_enqueue_style ($ this-> name. '-admin', plugins_url ('autori-commentary / admin / assets / css / admin.css'), false, $ această versiune); 
În acest moment, ar trebui să arate mult mai curat:
Cu acest lucru, am finalizat tot ce trebuie să facem pentru fundația de bază a filelor de navigare pentru meta-caseta noastră.
Pregătirea pentru a vă deplasa înainte
În următorul articol, vom introduce conținutul pentru fiecare filă și vom lucra prin JavaScript care este necesar pentru a comuta filele și fiecare din conținutul lor.
Pentru cei care au mai multă experiență în WordPress, această serie de articole poate simți că se mișcă într-un ritm mai lent, dar asta e punctul - căutăm să fim cât mai exhaustivi cu putință atunci când nu numai că vom construi interfața cu utilizatorul, ci de asemenea, în explicarea raționamentului din spatele fiecărei decizii.
Între timp, nu uitați să finalizați codul sursă pe GitHub, urmați-l și lăsați orice întrebări sau comentarii în feed-ul de mai jos.



		
			
	   
	




Cod