Accentsconagua

Crearea paginilor personalizate de administrare WordPress, Partea 2

Cod
Share

În tutorialul anterior din această serie, am început să lucrăm la pagina noastră de administrare personalizată. 

În cele din urmă, obiectivele la care lucrăm vor demonstra modul în care putem folosi propriul nostru cod personalizat, precum și API-ul WordPress, pentru a crea pagini care sunt puțin mai flexibile decât ceea ce poate fi natural disponibil prin intermediul unuia dintre API-urile standard. 

Acest lucru nu înseamnă că ar trebui să evităm sau să evităm API-urile oferite de WordPress. De fapt, eu sunt un fan al folosirii lor cât mai mult posibil. Dar când apare un proiect în care trebuie să introduceți funcționalități suplimentare sau să personalizați modul în care funcționează ceva, atunci dezvoltarea acestei funcționalități va fi lăsată la latitudinea dvs..

În al doilea rând, folosim, de asemenea, principii, cum ar fi principiul responsabilității unice, pentru a demonstra modul în care putem spune o abordare bine organizată și orientată spre obiect a codului pe care îl scriem.

Înainte de a merge mai departe, totuși, să analizăm ceea ce am acoperit până acum.

Pentru primul mesaj ...

Reamintim că am furnizat o definiție de lucru a principiului responsabilității unice:

Adunați împreună lucrurile care se schimbă din aceleași motive. Separați acele lucruri care se schimbă din diferite motive.

Și am folosit-o pentru a ajuta la ghida organizarea creării paginii noastre de submeniu și submeniu.

Ne-am uitat, de asemenea, la codul pentru prima versiune a pluginului, l-am pus la dispoziție pentru descărcare și am pus bazele muncii pe care o vom face în acest tutorial.

Dacă nu ați revizuit tutorialul anterior sau cel puțin ați revizuit codul, recomand că vă recomandăm să faceți acest lucru; în caz contrar, s-ar putea să vă întrebați de ce facem unele dintre deciziile pe care le luăm sau de ce o parte din cod este organizat în modul în care este.

Cu asta a spus, să continuăm.

Înainte de a începe

Ca și în multe dintre tutorialele mele, îmi place să vă asigurați că aveți totul în picioare înainte să continuăm. Pentru acest tutorial, veți avea nevoie de următoarele:

  • un mediu local de dezvoltare
  • o copie a programului WordPress instalat și gata de utilizare
  • o copie a plugin-ului nostru din tutorialul anterior instalat și activat
  • un IDE cu plugin-ul încărcat și pregătit pentru editare suplimentară

Dacă oricare dintre cele de mai sus nu are sens, vă rugăm să revedeți tutorialul anterior sau această serie despre cum să configurați un mediu de dezvoltare locală.

În ceea ce privește codul care urmează, vom trece prin ea pas cu pas. Voi explica exact ceea ce facem și vom furniza atât comentarii de cod cât și comentarii în tutorial pentru a vă asigura că înțelegeți tot ce se întâmplă de-a lungul drumului.

Crearea paginii de administrare

Pe măsură ce vom continua cu plugin-ul în acest articol, acesta este ceea ce vom face:

  1. Creați marcajul pentru pagina de administrare care moștenește stilurile WordPress native.
  2. Introduceți o opțiune cu care utilizatorul poate interacționa.
  3. Sterilizați opțiunea înainte de ao salva.
  4. Extrageți valoarea opțiunii și setați-o la valoarea din pagină.

În acest tutorial, ne vom concentra pe următoarele două puncte. În următorul articol, ne vom concentra pe punctele trei și patru.

Pentru cei care sunt familiarizați cu API-ul pentru Setări, aceasta pare a fi o depășire. Dar, după cum veți vedea în restul acestui tutorial și în această serie, există un motiv pentru care o vom rupe în bucăți mai mici.

Cu ceea ce este prezentat ca planul nostru de acțiune, să începem.

Marcarea paginii

Când am lăsat ultima dată această funcție, codul a arătat astfel:

Acum suntem gata să începem să creăm aspectul paginii. Ori de câte ori lucrez la plugin-uri pentru clienți, eu numesc aceste "vederi". 
Aceasta nu este menită să fie confundată cu paradigma model-vedere-controler. Dar nu le numesc șabloane fie pentru că în WordPress, șabloanele sunt cele utilizate pentru a afișa conținutul unei pagini pe front-end. 
Deci, opinii este.
Primul lucru pe care dorim să-l facem este să creați un director de vizualizări în directorul admin al plugin-ului nostru.
Odată ce sa terminat, putem numi acest lucru la fel de simplu ca settings.php sau ceva mai descriptiv. Depinde de dvs. și complexitatea a ceea ce construiți. Deoarece acesta este un plugin simplu, mă lipesc de un nume simplu.
Apoi, să începem să creăm marcajul de bază care va furniza elementul standard de wrapper WordPress împreună cu titlul paginii:
 
 
Nu, nu trebuie să ne uităm prea mult, dar vom schimba asta.
Adăugați o opțiune
În acest moment, suntem gata să adăugăm o opțiune. În scopul acestei postări, vom permite utilizatorului să introducă ceva într-un element de text de intrare. Acest lucru ne va permite să aruncăm o privire la modul de dezinsecție a informațiilor și, eventual, să le arătăm pe front-end.
Pentru a face acest lucru, trebuie să avem o informație cheie. Trebuie să cunoaștem atributul de nume pe care îl vom numi intrare element. Aceasta este pentru a putea salva corect baza de date. 
Deci, în scopul acestui exemplu, să spunem că acest mesaj va fi folosit pentru afișarea necondiționată în partea de sus a fiecărui post. Nu vom ajunge la punctul din acest articol, dar vom revedea acest lucru în următorul articol.
În tine settings.php vizualizați, adăugați următorul cod.
 
  
 
  
 
Dacă ați vedea pagina în acest moment, ar trebui să vedeți exact ceea ce vă așteptați: o etichetă și o casetă de introducere.
Asigurați opțiunea
În mod normal, aș arăta o captură de ecran aici, dar nu am terminat încă. Trebuie să introducem încă două lucruri.
     
  1. Un WordPress nonce
    2.  
  2. Butonul de trimitere
    3.  
Să facem asta acum. Dacă nu sunteți familiarizat cu valorile nonce, vă recomandăm să citiți acest articol. Scurtcircuitul este următorul:
Un nonce este un "număr utilizat o singură dată" pentru a ajuta la protejarea adreselor URL și a formularelor de anumite tipuri de utilizare incorectă, rău intenționat sau altfel.
În a noastră settings.php fișier, să adăugăm următorul bloc de cod:
În cele din urmă, versiunea finală a codului nostru ar trebui să arate astfel:

Și versiunea finală a paginii ar trebui să arate astfel:

În acest moment, suntem gata să salvăm opțiunile. Acum, pentru a face acest lucru, trebuie să verificăm câteva lucruri:

  1. Are permisiunea utilizatorului să salveze opțiunile?
  2. Există o notă validă care este transmisă din formular?

În plus, trebuie să:

  1. Sanitizați informațiile pentru a vă asigura că nu intră în baza de date date rău intenționate.
  2. Trebuie să putem scoate această informație din baza de date și să o ocupăm în formă.

În cele din urmă, trebuie să afișăm acest lucru pe front-ul paginii web.

Concluzie

Deci, în următoarele două articole, ne vom concentra pe a face exact acest lucru.

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

  • Principiul unic de responsabilitate
  • Setări de administrare personalizate 1.0
  • add_options_page
  • admin_url
  • esc_html
  • Valorile WordPress Nonce
Cod
×