Crearea paginilor personalizate de administrare WordPress, Partea 1

Într-o serie anterioară, am furnizat un ghid detaliat pentru a lucra cu API-ul WordPress Settings. Pentru cei care sunt noi în WordPress sau care au folosit alte instrumente, cum ar fi The Customizer pentru a gestiona diferite opțiuni, poate fi ceva ce nu a trebuit să utilizați în tema sau dezvoltarea plugin-ului.

După cum se menționează în Codul:

API-ul pentru setări, adăugat în WordPress 2.7, permite ca paginile de administrare care conțin formularele de setări să fie gestionate semi-automat. Vă permite să definiți pagini de setări, secțiuni din acele pagini și câmpuri din secțiuni.

Nu cred că este ceva necesar pentru a învăța, dar este ceva ce ar trebui să știți că există și știți cum să lucrați cu el dacă găsiți că trebuie să introduceți pagini de opțiuni în zona de administrare WordPress.

Este un API puternic, deși destul de complex, care ne oferă o mulțime de funcționalități. În cele din urmă, ne permite să facem o mulțime de muncă pe partea de server și o muncă minimă pe partea clientului.

Dar ce se întâmplă atunci când lucrăm cu o soluție personalizată pentru clienți și avem nevoie de puțin mai multă flexibilitate decât API-ul Setări? De exemplu, să spunem că trebuie să construim un plugin care să aibă o pagină de setări, dar are nevoie de un set mai flexibil de opțiuni și de funcționalitate de validare adaptată?

În aceste cazuri, este posibil să scriem propriile pagini de administrare WordPress personalizate. În această serie, vom examina cum să facem exact acest lucru.

Înainte de a începe

Ca și în cazul majorității tutoriale de genul acesta, este important să vă asigurați că aveți totul la dispoziție pentru a putea urmări, astfel încât să puteți lucra cu codul sursă pe care îl acoperim în întreaga serie.

Pentru acest tutorial, presupun:

• Aveți un mediu de dezvoltare locală relativ la sistemul dvs. de operare.
• Aveți o copie a programului WordPress instalat și pregătit pentru a fi utilizat pentru instalarea unui plugin.
• Sunteți familiarizați cu practicile de dezvoltare a plugin-urilor WordPress.
• Ești confortabil să lucrezi cu PHP și HTML.

Dacă nu sunteți familiarizat cu modul de configurare a unui mediu de dezvoltare locală care include WordPress, vă rugăm să consultați această serie pentru a face exact acest lucru. 

Și dacă sunteți relativ confortabil cu PHP, chiar dacă doar citiți limba, atunci voi face tot ce pot pentru a oferi instrucțiuni clare și comentarii pentru fiecare bit de cod pe care îl împărtășim.

Odată ce toate acestea sunt în vigoare, suntem gata să începem să lucrăm la pluginul nostru.

Setările personalizate de administrare WordPress

Până la sfârșitul acestei serii, vom avea un plugin care să îndeplinească următoarele cerințe:

• Adaugă un nou element de submeniu în sistemul de meniuri WordPress existent.
• Adaugă o nouă pagină de setări care corespunde noului element de submeniu.
• Sanitizează și serializează opțiunile de pe pagină.
• Validează și returnează valorile salvate și le redă corespunzător.

În plus, ne vom asigura că abordăm acest lucru în modul cel mai modular posibil folosind WordPress Coding Standards și practici similare pentru a face citirea, scrierea și menținerea pluginului cât mai ușor posibil.

1. Pluginul Bootstrap

Primul lucru pe care trebuie să-l facem este să creăm bootstrap-ul plugin-ului. Aceasta va include crearea unui director care să găzduiască fișierele plugin-ului, un README de bază, o copie a licenței, un fișier bootstrap care va fi folosit în cele din urmă pentru a porni pluginul și un director care va fi folosit pentru a ține clasele legate de administrare funcționalitate.

Fișierele sunt disponibile pentru descărcare ca atașament la această postare, dar, între timp, puteți vedea cum arată directorul meu de mai jos:

Mai mult, conținutul pluginului de boot este simplu. Examinați următorul cod pentru un singur fișier PHP personalizate-admin-settings.php, și apoi o voi discuta mai detaliat sub bloc.

Observați că în codul de mai sus există un cod foarte mic. În schimb, sunt multe comentarii. Blocul principal de comentarii din partea de sus a fișierului explică ceea ce face fișierul.
Zona de sub @ WordPress plugin eticheta este ceea ce WordPress va citi pentru a genera titlul pluginului, descrierea și legăturile relative în tabloul de bord al plugin-ului WordPress.
Apoi, împiedicăm accesul direct la fișier. Și, în final, vom crea o funcție particularizată pentru a fi concediată cu plugins_loaded cârlig. Această funcție este cea care va fi utilizată pentru a porni pluginul.
În acest moment, ar trebui să vă puteți conecta la WordPress, să navigați la Tabloul de bord al Pluginului și apoi să vedeți pluginul disponibil pentru activare. Mergeți mai departe și faceți clic pe Activati.
Nimic nu se va întâmpla încă, dar vom începe să adăugăm funcționalitate pe măsură ce lucrăm în acest tutorial.
2. Crearea elementului Submeniu
Pentru a începe lucrul la plugin, să introducem mai întâi un element submeniu. Pentru a face acest lucru, va trebui să profităm de funcția API WordPress add_options_page. Această funcție va necesita cinci parametri:
 
textul care trebuie afișat ca titlu al paginii cu opțiuni corespunzătoare
 
textul care trebuie afișat ca text submeniu pentru elementul de meniu
 
capacitățile necesare pentru a accesa acest element din meniu
 
butonul de meniu utilizat pentru a identifica acest element de submeniu
 
un apel către o funcție responsabilă de redarea paginii de administrare
 
Rețineți că vom folosi clase pentru a ne organiza funcționalitatea, astfel încât multe din ceea ce facem vor fi orientate pe obiecte.
Mai întâi, să creăm o clasă în directorul de administrare numit clasa-submenu.php. Deoarece această clasă este responsabilă pentru introducerea unui nou submeniu, îl vom numi descriptiv.
Conținutul clasei ar trebui să arate astfel:
submenu_page = $ submenu_page;  / ** * Adaugă un submeniu pentru acest plugin în meniul "Instrumente". * / funcția publică init () add_action ('admin_menu', array ($ this, 'add_options_page'));  / ** * Creează elementul de submeniu și solicită obiectului Submeniu pagină să redea * conținutul real al paginii. * / funcția publică add_options_page () add_options_page ('Tuts + Pagina de administrare personalizată', 'Pagina de administrare personalizată', 'manage_options', 'custom-admin-page', array ($ this-> submenu_page, 'render'));  
În acest moment, pluginul nu va face nimic. Încă mai trebuie să creăm realitatea Submenu_Page clasa, iar apoi trebuie să conducem clasele până la fișierul bootstrap.
3. Crearea paginii de submeniu
Să începem cu Submenu_Page clasa întâi. Creați un alt fișier în admin și să-l sunați clasa-submeniu-page.php. Apoi, în fișier, adăugați următorul cod.
Când această pagină se redă, va fi afișată pur și simplu textul: "Aceasta este pagina de submeniu de bază". Vom ajunge în cele din urmă în adăugarea de noi opțiuni. Dar, mai întâi, să aducem pluginul la viață prin instanțierea acestuia în fișierul nostru de bootstrap.
4. Realizarea meniului și a paginii
Apoi, deschideți fișierul custom-admin-settings.php pe care l-am creat mai devreme în acest tutorial. Să mergem mai departe și să scriem codul necesar introducerii noului element de submeniu și a paginii sale asociate.
Amintiți-vă că clasa de submeni necesită o instanță a Submenu_Page clasa să fie trecută în constructorul său, și apoi trebuie să apelăm metoda init din clasa Submeniu pentru a seta întregul lucru în mișcare.
În cod, aceasta arată după cum urmează:
init (); 
În acest moment, ar trebui să puteți reîmprospăta instalarea WordPress, să activați pluginul (dacă nu este deja activat) și apoi să vedeți noua pagină redată în zona de administrare.
În următorul articol, vom examina modul în care putem începe să introducem setările reale pe ecran. În plus, vom analiza câteva exemple de bune practici în ceea ce privește lucrul cu șablonul nostru și cu paralelele șablonului, iar apoi vom vedea cum vor fi conectați la API-urile responsabile nu numai de salvarea lor, ci și de modul în care vom dezinfecta și valida lor.
Dar înainte de a merge atât de departe, vreau să vorbesc puțin despre designul de clasă pe care l-am văzut în acest tutorial. În general vorbind, vreau să vorbesc despre motivul pentru care avem o clasă pentru submeniu si Submenu_Page și cum se referă la fișierul de bootstrap.
Un cuvânt despre responsabilitatea claselor
Pentru cei care sunteți familiarizați cu principiul unic responsabilitate, această secțiune poate să nu vă intereseze. Dar dacă cine are nevoie de o reîmprospătare sau vrea să audă mai mult, citiți mai departe.
Adunați împreună lucrurile care se schimbă din aceleași motive. Separați acele lucruri care se schimbă din diferite motive.
Există mai multe lucruri în această privință, dar dacă ar trebui să vă uitați la fiecare dintre clasele noastre (cel puțin la cele două până acum), atunci este clar că motivele pe care clasele noastre le pot schimba sunt după cum urmează:
 
Conținutul submeniului se poate schimba. Orice din titlul paginii la meniul slug și totul între ele.
 
 Modul în care pagina redă conținutul său poate (și se va schimba). Mai exact, acum nu face decât să econeze un șir. În curând, va include un dosar special. După aceasta, poate fi necesar să includeți mai multe fișiere.
 
Cele două motive de mai sus sunt două motive foarte diferite pe care clasele le pot schimba, așadar păstrarea lor împreună în aceeași clasă ar încălca principiul de mai sus.
În cele din urmă, vă aduc acest lucru nu numai pentru a vă ajuta să aruncați o privire asupra unor principii mai mari de inginerie software care pot fi aplicate în WordPress, dar și pentru a vă ajuta să vă pregătiți pentru unele dintre motivele pentru care vom rupe anumite lucruri care sunt de obicei fișiere mari în contextul pluginurilor.
Lucrul frumos despre învățare principii este că pot fi aplicate în mai multe proiecte și nu doar în proiecte unice. Învățați-i, practicați-le folosind, și faceți mai bine să arhiteze soluții pentru alte persoane. 
Curba de învățare poate fi abruptă, dar odată ce începeți să urcați în sus, devine mai ușor și mai ușor să încorporați principiile în munca de zi cu zi. Apoi, munca pe care o oferiți altora devine mult mai ușor de întreținut în timp.
Concluzie
Nu uitați că puteți descărca plugin-ul în starea sa actuală din acest post. Pe măsură ce progresăm prin seria, voi face cea mai recentă versiune disponibilă pentru fiecare post, astfel încât să puteți urmări împreună cu codul acoperit în fiecare tutorial, să vă dăruiți cu ea și să pregătiți întrebări pe care doriți să le întrebați în comentariile.
Ca o notă laterală, dacă sunteți în căutarea altor utilități pentru a vă ajuta să vă construiți setul de instrumente în creștere pentru WordPress sau pentru a studia și a deveni mai bine versat în WordPress, nu uitați să vedeți ce avem la dispoziție în Piața Envato.
Amintiți-vă că puteți prinde toate cursurile și tutorialele mele pe pagina mea de profil și puteți să mă urmați pe blogul meu și / sau pe Twitter la @tommcfarlin unde vorbesc despre diverse practici de dezvoltare software și cum le putem angaja în WordPress.
În cele din urmă, nu ezitați să lăsați orice întrebări sau comentarii în feed-ul de mai jos. Fac tot ce pot pentru a participa și a răspunde la fiecare întrebare sau critică pe care o oferiți în legătură cu acest proiect.
Resurse
 
Ghidul complet al API-ului pentru setările WordPress
 
API-ul Setări
 
plugins_loaded
 
add_options_page
 
Principiul unic de responsabilitate
 



		
			
	   
	




Cod