Share
API-ul personalizării temelor, adăugat în WordPress 3.4, permite dezvoltatorilor să personalizeze și să adauge controale la Aspect> Personalizați ecranul de administrare. Titan Framework vă permite să extindeți și să utilizați un număr bun de câmpuri / setări pentru a crea o temă bazată pe Live Theme Customizer.
Titan Framework fiind un cadru de opțiuni ajută la crearea mai multor tipuri de opțiuni scriind doar câteva rânduri de cod. Să vedem cum putem folosi opțiunile de personalizare a temelor prin intermediul platformei Titan.
Accentsconagua
titan-cadru-checker.php fișier inclus în proiectul dvs. Codul pe care o voi folosi aparține temei mele personalizate Neat. Neat conține un fișier numit -opțiuni de personalizare-init.php care este prezent în active / admin /titanframework/customizer-options-init.php. Aici am implementat Titan Framework pentru a înregistra toate setările, panourile și secțiunile pentru acest tutorial.
Iată codul pentru a adăuga o secțiune personalizată în tema WP.
createThemeCustomizerSection (array (// Nume meniul de opțiuni 'name' => 'Secțiunea mea', // Numele panoului în care toate secțiunile vor fi prezente 'panel' => 'Panoul meu'));
Am plasat câteva linkuri utile la documentația Titan Framework în partea de sus a acestui fișier. Vă recomandăm să treceți prin aceste linkuri.
Următorul (linia # 14) este un ADD_ACTION () funcția care poartă o tf_create_options cârlig și an aa_customizer_options funcționează ca parametri. Acest cârlig vă ajută să creați opțiuni în cadrul secțiunii personalizate.
aa_customizer_options este o funcție personalizată pentru înregistrarea setărilor, secțiunilor sau panourilor. Dacă ați citit articolele anterioare, am discutat o regulă pentru lucrul cu Titan Framework:
Suna getInstance () atunci când trebuie să interacționați cu Titan Framework.La fel ca pe linia # 19 din codul de mai sus. Aceasta înseamnă că se numește o instanță asociată cu variabila $ Titanși ia un parametru unic, preferabil numele temei. eu folosesccurat, care este numele temei mele.
După ce apelați o instanță, adăugați o secțiune din cadrul personalizatorului folosind createThemeCustomizerSection () funcţie. Liniile # 26 până la # 34 creează o secțiune în $ Titan denumit $ aa_section1. createThemeCustomizerSection () ocupă o serie de parametri, cum ar fi nume, panou, desc, etc.
Folosesc doi dintre acești parametri (adică numele și panoul) pentru a crea panoul personalizat pentru temă și apoi o secțiune din interiorul acestuia. Un panou este un grup de secțiuni, în timp ce o secțiune conține setări în interiorul acestuia.
Am creat un panou numit "Panoul meu"și o secțiune numită"Secțiunea mea " meniul din interiorul panoului.
Imaginea de mai sus afișează personalizatorul temelor nou modificat. Aici puteți găsi noul panou, adică. Panoul meu.
Interior Panoul meu există o secțiune numită Secțiunea mea.
În articolul precedent, am abordat modul de creare a unei secțiuni personalizate în cadrul unui panou personalizat al instrumentului de personalizare a temelor cu Titan Framework. Să creăm câteva opțiuni / setări în interiorul secțiunii pe care am creat-o și să implementeze tema la front-end.
Lipiți următoarele linii chiar sub codul scris în articolul anterior din interiorul -opțiuni de personalizare-init.php fişier. Acest fișier este inclus în functions.php a temei noastre prin admin-init.php fişier.
createOption (array ('id' => 'aa_sec_body_bg_clr', // Codul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'color', // Tipul de opțiune pe care o creați ' 'Culoarea fundalului site-ului', // Numele opțiunii care va fi afișată în panoul de administrare 'default' => '#fff' // Valoarea implicită a opțiunii noastre)); // Culoarea textului corpului $ aa_section1-> createOption (array ('id' => 'aa_sec_body_txt_clr', // ID-ul care va fi folosit pentru a obține valoarea acestei opțiuni 'type' => 'color', // Type of opțiune pe care o creați 'name' => 'Text Text Color', // Numele opțiunii care va fi afișată în panoul de administrare 'default' => '# 000' // Valoarea implicită a opțiunii noastre)); Eu folosesc createOption () funcția Titan Framework pentru a crea opțiuni. Deoarece trebuie să creez această opțiune în secțiunea personalizată numită $ aa_section1, Am apelat funcția de creare a opțiunilor prin variabila secțiunii din rândul # 8.
Am înregistrat două setări. Ambele sunt opțiuni de tip color, unde prima opțiune ajută la configurarea culoarea fundalului corpului (linia # 10 până la # 13).
Am setat mai mulți parametri pentru această setare de culoare, ID-ul și Nume fiind cele mai importante. ID-ul, care ar trebui să fie unic, este folosit pentru a obține valoarea acestei opțiuni, în timp ce Nume este ceea ce se arată în interiorul personalizatorului.
Apoi am creat o altă opțiune pentru culoarea textului corpului (linia # 18 la # 25). Deoarece are același tip de opțiune, este similară cu cea anterioară cu valori diferite în parametri. Să vedem ce se întâmplă în personalizatorul.
Culorile fundalului corpului și setările pentru culoarea textului corpului sunt afișate împotriva numelor Culoarea fundalului site-ului și Culoarea textului site-ului în secțiunea noastră numită Secțiunea mea.
Până în prezent, am adăugat opțiuni în personalizatorul temelor. Permiteți-mi să vă arăt acum cum să obțineți valori din acestea.
În primul rând, voi recupera valorile salvate ale ambelor opțiuni și le voi salva în două variabile diferite. Apoi, voi folosi aceste două variabile în interiorul unui CSS în fișier pentru a modifica valorile culorilor din tema noastră. Pentru a face acest lucru, lipiți următoarele rânduri de cod în partea de sus a paginii header.php fişier.
getOption ('aa_sec_body_bg_clr'); // Culoarea txt a corpului $ aa_sec_body_txt_clr_val = $ titan-> getOption ('aa_sec_body_txt_clr'); ?>Folosind acest cod, voi obține valorile opțiunilor care au fost create în -opțiuni de personalizare-init.php fişier. Sunt necesare două măsuri pentru a realiza acest lucru:
getOption () funcţie.Linia # 17 este locul unde am înregistrat instanța. Liniile # 20 și # 23 sunt unde am recuperat valorile acestor opțiuni, ceea ce a fost al doilea pas. getOption () funcția în aceste două linii obține valorile de la aa_sec_body_bg_clr și aa_sec_body_txt_clr, care reprezintă ID-urile unice pentru opțiunile culorii de fundal a site-ului și a opțiunilor pentru culoarea textului site-ului.
Valorile de culoare preluate sunt salvate în variabile $ aa_sec_body_bg_clr_val și $ aa_sec_body_txt_clr_val.
Să folosim aceste două variabile, care conțin valorile de culoare alese de utilizator, la front-end:
Inserați acest cod sub wp-cap () astfel încât stilurile noastre să fie incluse după foaia de stil originală a temei noastre. Priviți linia # 7 și # 20 pentru fiecare dintre aceste etichete - ecou comanda este utilizată pentru a imprima ieșirea pentru culoarea de fundal și culoarea textului.
Rețineți că proprietățile CSS au fost marcate ca !important, care asigură prioritatea CSS.
Urmați acești pași pentru a examina previzualizările.
Odată ce ați setat culorile, puteți vedea o previzualizare live a acestor modificări pe site-ul dvs..
am ales # 000000 ca site-ul meu culoarea de fundal și #bfbfbfca Site Text Color-puteți verifica imaginea de ecran de mai sus.
După ce ați terminat, faceți clic pe Salvați și publicați buton.
Deci, asta e vorba. Acum puteți crea cu ușurință opțiuni în tema Customizer cu Titan Framework. A fost ușor? Nu ezitați să contactați Twitter sau să comentați mai jos dacă aveți întrebări.
Până acum știi cum să creezi orice tip de container cu Cadru Titan. Nu pot sublinia suficient importanța ultimelor articole. Dacă nu știți cum să creați aceste containere, va fi greu să înțelegeți oricare dintre următoarele articole. Deci, înapoiați-vă și revizuiți conceptele dvs. despre cum să creați diferite tipuri de containere cu Titan-cadru. Ar trebui să știți cum să creați:
Din următorul articol, vom discuta despre fiecare posibil tip de opțiune care poate fi adăugat în cadrul Titan. Stați așa!
