Un ghid pentru începători în Cadrul Titan Adăugarea tipurilor de texte și Textarea

Titan Framework oferă o gamă largă de opțiuni pe care le puteți adăuga într-un plugin sau o temă pentru a oferi utilizatorilor finali setări dinamice. Astăzi voi discuta despre două din opțiunile de bază: a text tip și a textarea opțiune. Să vedem cum să creați o opțiune de tip text într-un panou de administrare, într-o secțiune metabox sau într-o temă personalizată.

Opțiuni de tip text în cadrul Titan

În cadrul Titan, există mai multe tipuri de opțiuni, iar astăzi vom examina unul cu tipul text. Asa arata:

textopțiunea de tip din Titan Framework poartă o gamă largă de parametri de setare:

  • Nume: Aceasta controlează numele cu care este afișată opțiunea.
  • id: Un nume unic care este folosit pentru a obține valorile salvate.
  • desc: Afișează o scurtă descriere cu numele opțiunii.
  • Mod implicit: Acest parametru specifică valoarea implicită a opțiunii.
  • previzualizare live: (Opțional) Acest parametru este utilizat numai atunci când a text opțiunea de tip este utilizată în interiorul secțiunii customizer temă. Vă ajută să afișați o previzualizare live a modificărilor din tema dvs..
  • css: (Opțional) Când un câmp de text este adăugat într-o pagină de admin sau într-o secțiune personalizată pentru temă, acest parametru poate ajuta la generarea de CSS. Cum?
  • înlocuitor: (Opțional) Acest lucru afișează textul fals de fiecare dată când câmpul de text este gol.
  • is_password: (Opțional) O etichetă suplimentară, localizată imediat după câmpul de formular. Acceptă alfanumerice și simboluri. Aplicațiile potențiale includ indicarea unei unități, mai ales dacă câmpul este utilizat cu numere. De exemplu, dacă utilizați câmpul ca intrare pentru numere de pixeli, ați introduce valoarea ca "px". Sau dacă, ca unitate procentuală, ați introduce "%" ca valoare.

Toți acești parametri sunt de tip şir așteptați pentru is_password parametru care este boolean. Dacă nu aveți nevoie de parametrii opționali, nu este necesar să le includeți.

Containerele disponibile pentru opțiunea de tip text

Containerele sunt, în principiu, paginile de admin, filele, casetele de meta și secțiunile personalizate ale temelor. Acestea sunt în esență zonele în care vă puneți opțiunile. Nu toate tipurile de opțiuni pot fi plasate în aceste recipiente. Cu exceptia text tip poate fi utilizat în orice container, adică:

  • Panoul Administratorului
  • Fila Admin
  • METABOX
  • Temă personalizator

Să revizuim modul de creare a opțiunilor în cadrul Titan:

  • Apelați o instanță unică prin getInstance () funcţie.
  • Creați opțiuni prin createOption () funcționează în interiorul unui container.
  • Obțineți valorile opțiunii salvate prin getOption () funcţie.

Deci, să analizăm cum text tip este creată în interiorul fiecăruia dintre aceste containere.

Crearea unei opțiuni de tip text în interiorul unui panou de administrare

Exemplu de declarație

Următorul cod este utilizat în timp ce adăugați o textopțiune în interiorul unui panou de administrare:

createOption (array ('id' => 'aa_txt', // ID-ul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'text', // Tipul de opțiune pe care o creați ' Opțiunea "Textul meu", // Numele opțiunii care va fi afișată în panoul de administrare "desc" => "Aceasta este opțiunea noastră" // Descrierea opțiunii care va fi afișată în panoul de administrare);

Acest cod va adăuga a textintroduceți opțiunea din interiorul unui panou de administrare $ aa_panel.  createOption () funcția ocupă o serie de parametri care sunt susținute de text opțiune. 

În acest caz, am folosit parametri ca id, tip, nume și desc. Din toate acestea, ID-ul este cel mai important parametru și trebuie să fie întotdeauna unic. Acesta va fi folosit mai târziu pentru a obține valorile salvate. 

Deci, a text opțiune cu ID aa_txt și numele "Opțiunea mea de text"a fost creat în panoul de administrare $ aa_panel

Imaginea de mai sus arată Opțiunea mea de text în panoul de administrare Neat Opțiuni

Acesta este un panou de administrare personalizat și a fost creat cu Titan Framework. Dacă doriți să știți cum, consultați articolele anterioare din această serie.  

Exemplu de utilizare

Utilizați următorul cod pentru a recupera valorile salvate de la acesta text opțiune.

getOption ('aa_txt'); / ** * * Imprimați valoarea opțiunii * * / echo $ aa_txt_val; // Imprimați valoarea salvată în opțiunea aa_txt 

Am folosit id-ul text ca parametru în interiorul getOption () funcția și a salvat valoarea într-o variabilă $ aa_txt_val. Voila! Tot ce trebuie să faceți este să utilizați această valoare, pe care am făcut-o folosind ecou comanda.

Afișarea rezultatului la frontal

Să presupunem că am intrat în valoarea demo "AA Text Settings ' și l-au salvat. Deci, aici este captura de ecran a rezultatului codului de mai sus.

Crearea unei opțiuni de tip text în interiorul unei file Admin

Exemplu de declarație

Să ne uităm la codul a text în cadrul unei file admin.

createOption (array ('id' => 'aa_txt_in_tab1_panel2', // ID-urile trebuie să fie întotdeauna unice. ID-ul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'text' Crearea "name" => "Opțiunea mea de text", // Numele opțiunii care va fi afișată în panoul admin 'desc' => 'Aceasta este opțiunea noastră' // Descrierea opțiunii care va fi afișată în admin panou));

De data aceasta am creat o text introduceți opțiunea cu ID aa_txt_in_tab1_panel2 interior $ aa_tab1. $ aa_tab1 este o filă admin care există într-un panou de administrare personalizat $ aa_panel2. Procesul de creare a unei file admin a fost explicat în articolele mele anterioare. Deci, puteți să vă adresați pentru ajutor.

Rețineți că am folosit același nume, ceea ce înseamnă că numele pot fi identice, dar ID-urile sunt întotdeauna unice.

Imaginea de mai sus arată Opțiunea mea de text interior Tab. 1 de panou Opțiuni neat 2.

Exemplu de utilizare

Să recuperăm valorile salvate din aceasta text opțiune.

getOption ('aa_txt_in_tab1_panel2'); / ** * * Imprimați valoarea opțiunii * * /?> 
Valoarea primei casete text tab este:

getOption () funcția preia valoarea salvată prin ID aa_txt_in_tab1_panel2 și apoi l-am tipărit prin ecou comanda.

Afișarea rezultatului la frontal

Valoarea pe care am introdus-o a fost "AA Text Settings ' iar producția sa la front-end arată astfel:

Crearea unei opțiuni de tip text în interiorul unui metabox

Exemplu de declarație

Puteți adăuga a textintroduceți opțiunea din interiorul unui metabox prin următorul cod:

createOption (array ('id' => 'aa_mb_txt', // ID-ul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'text', // Tipul de opțiune creăm 'name' => Opțiunea "Textul meu", // Numele opțiunii care va fi afișată în panoul de administrare "desc" => "Aceasta este opțiunea noastră" // Descrierea opțiunii care va fi afișată în panoul de administrare); 

Din nou createOption () funcția adaugă a text în interiorul unui metabox numit $ aa_metbox. Acești parametri sunt utilizați aici și ID-ul este aa_mb_txt.

Imaginea de mai sus afișează un ecran de editare a paginii, unde puteți găsi un nou metabox cu "Opțiunea de text " inauntru. Am creat metaboxuri într-un articol anterior din această serie, așa că faceți referire la aceasta dacă aveți nevoie să vă revizuiți conceptele.

Exemplu de utilizare

Deci, aici este codul pentru a obține valorile salvate.

getOption ('aa_mb_txt', get_the_ID ()); / ** * * Imprimați valoarea opțiunii * * /?> 
Valoarea opțiunii metabox txt pentru această pagină este:

Totul este cam la fel, cu excepția liniei # 15 unde getOption () funcția are doi parametri:

  • aa_mb_txt, care este ID-ul opțiunii de tip text pe care am creat-o
  • get_the_ID () care va returna ID-ul postului / paginii / post-tipului curent.

După aceea, tocmai am folosit ecou comandă și tipăriți valoarea.

Afișarea rezultatului la frontal

Am salvat 'AA Text Settings ' ca valoare a acestei opțiuni și a publicat pagina. Codul de mai sus a fost folosit pentru a afișa acea valoare la front-end.

Crearea unei opțiuni de tip text în Customizatorul temei

Exemplu de declarație

În cele din urmă, să scriem codul pentru crearea unui textintroduceți opțiunea din interiorul unei secțiuni personalizate pentru temă.

createOption (array ('id' => 'aa_sec_head_txt', // ID-ul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'text', // Tipul opțiunii creăm 'name' => "Header Text Site", // Numele opțiunii care va fi afișată în panoul de administrare 'desc' => 'Acesta este antetul site-ului' // Valoarea implicită a opțiunii noastre));

A textintroduceți opțiunea cu ID aa_sec_head_txt este creat în interiorul unei secțiuni customizer temă $ aa_section1. Consultați articolele anterioare, dacă doriți să aflați cum să adăugați secțiuni personalizate în Titan Framework.

Imaginea de mai sus prezintă o secțiune personalizată pentru temă Secțiunea mea în care a Antetul textului site-ului opțiunea este afișată.

Exemplu de utilizare

Iată codul pentru a obține valorile salvate.

getOption ('aa_sec_head_txt'); / ** * * Imprimați valoarea opțiunii * * /?> 

aa_sec_head_txt este a texttip și am recuperat valoarea din nou cu getOption () funcţie. Nu știu rachete aici.

Afișarea rezultatului la frontal

Am intrat 'Textul meu Opțiune Antet' și puteți vedea rezultatul de previzualizare live prezentat mai jos:

Apoi, să acoperim textarea tip în cadrul Titan. Să examinăm modul în care puteți utiliza Legea Titan pentru a crea un textarea tastați opțiunea din panourile de administrare, casetele meta și secțiunea personalizator cu doar câteva rânduri de cod.

Opțiunea de tip Textarea din cadrul Titan-cadru

Probabil ați văzut-o textarea tip în mai multe pluginuri și teme WordPress. Cu ajutorul programului Titan, puteți adăuga acest tip de opțiune la createOption () funcţie. Unii parametri ai acestei opțiuni sunt:

  • Nume: Acest parametru decide numele afișat al textarea.
  • id: Acesta este un nume unic care este utilizat pentru a prelua valorile opțiunilor salvate.
  • desc: Afișează o descriere dintr-o singură linie cu numele opțiunii.
  • Mod implicit: (Opțional) Acesta reprezintă setarea implicită a textareaopțiune.
  • previzualizare live: (Opțional) Acest parametru funcționează exclusiv cu secțiunea de personalizare a temelor și prezintă o previzualizare live a modificărilor pe care le faceți.
  • css: (Opțional) Se generează CSS de fiecare dată când textareaopțiunea este creată în interiorul unei pagini de admin și / sau al unei secțiuni de personalizare a temelor.
  • înlocuitor: (Opțional) Dacă doriți ca un text inactiv să apară în interiorul dvs. textareaapoi utilizați acest parametru.
  • is_code: (Opțional) Acest parametru efectuează o verificare pentru o intrare mai bună a codului și dacă este adevărată, atunci fontul codului devine monospațiat.

Toți parametrii sunt de tip şir, cu excepția cazului is_code care este boolean

Containere disponibile pentru opțiunea de tip Textarea

Această opțiune are un tip textarea și pot fi adăugate în locuri cum ar fi:

  • Pagina de administrare
  • Fila Admin
  • METABOX
  • Temă personalizator

Dar înainte de a vă explica cum să adăugați această opțiune în toate aceste containere, permiteți-mi să rezumă pașii de bază care ar trebui urmați:

  • Suna getInstance () funcționează la începutul fiecărui fișier nou când se folosește Titan Framework.
  • Folosește createOption () pentru a adăuga orice opțiune nouă.
  • Obțineți valorile opțiunilor salvate apelând getOption () funcţie.

Ținând lucrurile la limită, voi explica doar cum să adăugați această opțiune în interiorul acestor containere. Dacă doriți să știți cum să creați aceste containere, citiți articolele anterioare din această serie.

Crearea unei opțiuni de tip Textarea în interiorul unui panou de administrare

Exemplu de declarație

Voi crea o textareaopțiune din interiorul unui panou de admin cu următorul cod.

createOption (array ('id' => 'aa_txtarea', // ID-ul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'textarea', // Tipul de opțiune creăm 'name' => Opțiunea "My Textarea", // Numele opțiunii care va fi afișată în panoul de administrare 'desc' => 'Aceasta este opțiunea noastră' // Descrierea opțiunii care va fi afișată în panoul de administrare);

textareaeste creat în interiorul unui panou de administrare $ aa_panel prin createOption ()funcţie. Această funcție ocupă o serie de parametri și voi folosi doar acelea pe care opțiunea le acceptă. Am folosit-o idtipNume și desc. Parametrul tip este ceea ce determină ce tip de opțiune este.

textareaopțiune cu ID aa_txtarea și nume Opțiunea mea de textare este afișată în captura de ecran de mai sus, pe care tocmai am creat-o.

Exemplu de utilizare

Acum voi recupera valoarea salvată a oricărui utilizator intrat în interiorul acestei textarea.

getOption ('aa_txtarea'); / ** * * Imprimați valoarea opțiunii * * / echo $ aa_txtarea_val; // Imprimați valoarea salvată în opțiunea aa_txt

Pentru a prelua valorile salvate, mai întâi obțineți o instanță unică prin intermediul getInstance () funcția, urmată de getOption () funcția în care folosim ID-ul textareaca parametru. 

Mai târziu, tipăriți valoarea salvată la partea frontală prin intermediul ecou comanda.

Afișarea rezultatului la frontal

Să intrăm în interiorul nostru textarea și salvați-l.

Aici este captura de ecran a ieșirii de la front-end.

Acum, să creăm această opțiune în cadrul unei file admin.

Crearea unei opțiuni de tip Textarea în interiorul unei file Admin

Exemplu de declarație

Iată codul:

createID (array ('id' => 'aa_txtarea_in_tab1_panel2', // ID-urile trebuie să fie întotdeauna unice. ID-ul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'textarea' Crearea "name" => "Opțiunea My Textarea", // Numele opțiunii care va fi afișată în panoul de administrare 'desc' => 'Aceasta este opțiunea noastră' // Descrierea opțiunii care va fi afișată în admin panou)); 

Am creat o textarea opțiune cu ID aa_txtarea_in_tab1_panel2 în interiorul unei file admin $ aa_panel2. Apare împotriva numelui Opțiunea mea de textare.

Imaginea de mai sus arată această opțiune în cadrul celui de-al doilea panou de administrare, adică. Opțiuni neat 2

Exemplu de utilizare

Să obținem valorile salvate.

getOption ('aa_txtarea_in_tab1_panel2'); / ** * * Imprimați valoarea opțiunii * * / 

Valoarea primei cartele textarea tab este:


Din nou, obțineți o instanță, apoi utilizați getOption () și introduceți ID-ul ca parametru al acestuia. În continuare, voi tipări ieșirea de la front-end folosind ecoucomandă în interiorul unei etichete div.

Afișarea rezultatului la frontal

Folosesc din nou același text ca un exemplu.

Rezultatul final este prezentat mai sus.

Crearea unei opțiuni de tip Textarea într-un metabox

Exemplu de declarație

Acum o voi crea textareaopțiune în interiorul unui metabox.

createOption (array ('id' => 'aa_mb_txtarea', // ID-ul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'textarea', // Tipul de opțiune pe care o creați ' Opțiunea "My Textarea", // Numele opțiunii care va fi afișată 'desc' => 'Aceasta este opțiunea noastră' // Descrierea opțiunii care va fi afișată);

 createOption () funcția adaugă a textarea cu ID aa_mb_txtarea în interiorul unui metabox $ aa_metbox. Această opțiune apare pe toate ecranele de editare de pagini / postări.

Imaginea de mai sus afișează a textarea numit Opțiunea mea de textare chiar la sfârșitul ecranului de editare a paginii. Același lucru apare și în interiorul Adăugați postare nouă secțiune.

Exemplu de utilizare

Acum voi scrie codul pentru preluarea valorilor opțiunilor salvate.

getOption ('aa_mb_txtarea', get_the_ID ()); / ** * Imprimați valoarea opțiunii * / 

Valoarea textarea opțiunii metabox pentru această pagină este:


Repetați din nou procesul, adică obțineți mai întâi o instanță și apoi utilizați getOption () funcția și să prezinte ID-ul textarea cu ID-ul post-tipului nostru. Rezultatul este salvat într-o variabilă numită $ aa_mb_txtarea_val. În cele din urmă, am reluat ieșirea într-o etichetă div.

Afișarea rezultatului la frontal

Să încărcăm output-ul final la front-end.

Să trecem la partea finală unde voi crea un a textareaopțiune din cadrul unei secțiuni de personalizare a temelor.

Crearea unei opțiuni de tip Textarea în interiorul unei secțiuni personalizate pentru temă

Exemplu de declarație

Utilizați următorul cod.

createOption (array ('id' => 'aa_sec_desc_txtarea', // Codul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'textarea', // Tipul opțiunii pe care o creați ' "Descrierea site-ului Textarea", // Numele opțiunii care va fi afișată 'desc' => 'Aceasta este descrierea site-ului' // Valoarea implicită a opțiunii noastre);

textareacu ID aa_sec_desc_txtarea există în interiorul unei secțiuni de personalizare a temelor $ aa_section1

Atextarea opțiunea de tip din figura de mai sus este afișată în dreptul numelui Descriere site Textarea în cadrul Secțiunea mea temă customizer secțiune.

Exemplu de utilizare

Să obținem valorile opțiunilor salvate.

getOption ('aa_sec_desc_txtarea'); / ** * * Imprimați valoarea opțiunii * * / 

Acest cod extrage și tipărește valoarea în aproape același mod ca și cele de mai sus.

Afișarea rezultatului la frontal

Iată previzualizarea live a contribuției mele.

Puteți utiliza această opțiune, de exemplu, pentru a adăuga o scurtă descriere pe pagina dvs. de destinație.

Concluzie

E vorba de asta. Acum știi unde și cum textși opțiunea de tip textarea opțiunea de tip poate fi adăugată cu Titan Framework. 

Am văzut pe cei care construiesc produse abuzând opțiunea de tip text în locuri în care un utilizator final ar putea dori să adauge mai multe date decât câteva cuvinte. Ar trebui să utilizați întotdeauna textarea opțiune de tip în acest caz.

Întregul proces este destul de simplu și ușor. Sper că vă place să citiți acest articol. Dacă aveți întrebări, puteți să comentați mai jos sau să mă contactați pe Twitter. 

Cod