Share
Ce veți creaPersonalizatorul temelor este un instrument excelent pentru a permite utilizatorilor dvs. mai multă libertate de a schimba o temă fără a fi nevoie să editați codul. Dar dacă doriți să permiteți utilizatorilor să schimbe culorile site-ului, lucrurile se pot complica. Adăugarea unui control pentru fiecare element pe care îl pot modifica va face lucrurile greoaie, iar utilizatorii ar putea ajunge la un site care arată ca un dezastru.
În loc să adăugați o mulțime de elemente de control pentru toate elementele pe care doriți ca utilizatorii să poată schimba, puteți crea o schemă de culori, permițând utilizatorilor să selecteze câteva culori și apoi să le aplice pe o serie de elemente din temă.
În acest tutorial, vă voi trece prin prima parte a acestui proces, care stabilește comenzile de personalizare a temelor. În următoarea parte, vă voi arăta cum să conectați aceste controale la tema dvs., astfel încât atunci când utilizatorii să aleagă culori, aceștia sunt difuzați pe tema.
Începeți prin instalarea temei de pornire și activarea acesteia. Personalizatorul temei va arăta astfel:
După terminarea tutorialului, personalizatorul dvs. va avea două secțiuni suplimentare.
Primul pas este să creați un fișier în tema dvs. pentru a vă menține funcțiile personalizate. Voi lucra cu o temă de bază, bazată pe tema creată în timpul seriei mele despre crearea unei teme WordPress din HTML static. Am facut cateva modificari pentru aceasta, asa ca va functiona cu functiile schemei de culoare, deci daca doriti sa lucrati prin acest tutorial, va sugeram sa descarcati tema initiala.
În dosarul principal al temei, creați un dosar numit inc și în acest sens, creați un fișier numit customizer.php.
Deschide-ți functions.php fișier și adăugați următoarele, care vor include noul fișier pe care tocmai l-ați creat:
Accentsconagua
include_once ('inc / customizer.php');Acum în tine customizer.php fișier, adăugați această funcție:
funcția wptutsplus_customize_register ($ wp_customize) add_action ('customize_register', 'wptutsplus_customize_register');Aceasta creează o funcție care va conține toate setările și comenzile dvs. și o va lega la customize_register cârlig de acțiune. Tema dvs. este gata să meargă!
Primul pas este să adăugați setările și comenzile pentru schema de culori. Veți adăuga comenzi pentru patru elemente de selectare a culorilor, culoarea principală, culoarea secundară și două culori pentru link-uri.
În interiorul funcției pe care tocmai ați creat-o, adăugați următoarele:
/******************************************* Schema de culori **** **************************************** / // adauga sectiunea care contine setarile $ wp_customize-> add_section ('textcolors', array ('title' => 'Schema de culori',));Aceasta creează o secțiune goală pentru comenzile schemei de culoare.
Imediat mai jos, adăugați:
// $ txtcolors [] = array ('slug' => 'color_scheme_1', 'default' => '# 000' , 'label' => 'Culoarea principală'); // culoare secundară (descrierea site-ului, rubricile bara laterală, h3, h5, linkurile nav pe hover) $ txtcolors [] = array ('slug' => 'color_scheme_2', 'default' => > "Culoare secundară"); // culoarea linkului $ txtcolors [] = array ('slug' => 'link_color', 'default' => '# 008AB7', 'label' => 'Culoarea linkului'); // link color (hover, active) $ txtcolors [] = array ('slug' => 'hover_link_color', 'default' => '9e4059', 'label' => 'Aceasta adaugă o nouă secțiune elementului de personalizare a temelor numit "Schema culorilor". Apoi, stabilește argumentele pentru cele patru culori cu care veți lucra: un slog, o valoare implicită și o etichetă. Valoarea implicită este culoarea utilizată în temă, deci este posibil să doriți să vă schimbați culorile din tema.
Apoi trebuie să creați setări pentru culorile dvs. utilizând argumentele pe care tocmai le-ați definit. Sub ultimul bloc de cod, tastați:
// adăugați setările și comenzile pentru fiecare culoare ($ txtcolor ca $ txtcolor) // SETTINGS $ wp_customize-> add_setting ($ txtcolor ['slug'], array ('default' => $ txtcolor ['default'] , 'type' => 'opțiune', 'capabilitate' => 'edit_theme_options')); Aceasta folosește a pentru fiecare instrucțiune pentru a lucra prin fiecare dintre culorile pe care tocmai le-ați definit, creând o setare pentru fiecare folosind argumentele pe care le-ați definit. Însă trebuie să adăugați controale, astfel încât utilizatorii să poată interacționa cu aceste setări utilizând personalizatorul temelor.
În interiorul pentru fiecare brațele și sub add_setting () funcția pe care tocmai ați adăugat-o, introduceți următoarele:
// CONTROLS $ wp_customize-> add_control (noul WP_Customize_Color_Control ($ wp_customize, $ txtcolor ['slug'], array ('label' => $ txtcolor ['label'], => $ txtcolor ['slug'])));Aceasta adaugă un selector de culori pentru fiecare dintre culorile dvs., folosind WP_Customize_Color_Control () care creează elemente de selectare a culorilor pentru personalizatorul temelor.
Întregul tău pentru fiecare declarația va arăta astfel:
// adăugați setările și comenzile pentru fiecare culoare ($ txtcolor ca $ txtcolor) // SETTINGS $ wp_customize-> add_setting ($ txtcolor ['slug'], array ('default' => $ txtcolor ['default'] , 'type' => 'opțiune', 'capabilitate' => 'edit_theme_options')); // CONTROLS $ wp_customize-> add_control (noul WP_Customize_Color_Control ($ wp_customize, $ txtcolor ['slug'], array ('label' => $ txtcolor ['label'], => $ txtcolor ['slug']))); Acum veți putea vedea noua secțiune atunci când deschideți instrumentul de personalizare a temelor cu tema activată:
Și când extindeți unul dintre comenzile, veți putea vedea selectorul de culori:
În momentul de față, nimic din ceea ce faceți cu selectorul de culori nu va fi reflectat în tema dvs., deoarece nu ați adăugat niciun CSS pentru a funcționa - vom ajunge la acest aspect în partea a doua a seriei. Pentru moment, vom adăuga o altă secțiune pentru a oferi utilizatorilor un pic mai mult control asupra schemei de culori.
Următoarea secțiune nu va permite utilizatorilor să aleagă culori, ci le va oferi opțiunea de a adăuga un fond solid antetului și / sau subsolului site-ului. Dacă selectează acest lucru, culorile de fundal și text ale acelor elemente se vor schimba.
Sub codul pe care tocmai l-ați adăugat, dar încă în interiorul dvs. wptutsplus_customize_register () adăugați următoarele:
/ ************************************** Culori de fond solide ******** ******************************* / // adauga sectiunea care contine setarile $ wp_customize-> add_section ('background' , array ('title' => 'Fundaluri solide',)); // adăugați setarea pentru fundalul antetului $ wp_customize-> add_setting ('header-background'); // adăugați controlul pentru fundalul antetului $ wp_customize-> add_control ('header-background', array ('label' => 'Adăugați fundal solid în header', 'section' => '=>' header-background-on '=>' nu ',' header-background-on '=> ,))); // adăugați setarea pentru background-ul subsolului $ wp_customize-> add_setting ('footer-background'); // adăugați controlul pentru subsolul subsolului $ wp_customize-> add_control ('footer-background', array ('label' => 'Adăugați fundal solid la subsol?', 'section' => 'background' 'footer-background-off' => 'nu', 'footer-background-on' => 'da' ,)));Aceasta adaugă o nouă secțiune nouă denumită "Fundaluri solide" și apoi adaugă două controale, ambele fiind casete radio. În fiecare caz, există două opțiuni: da și nu. În a doua parte a acestei serii vă voi arăta cum să definiți variabilele bazate pe acele opțiuni și să le utilizați pentru a modifica CSS în temă.
Acum puteți vedea noua secțiune din personalizatorul temei:
Din nou, nu se va întâmpla nimic dacă selectați una dintre cutiile radio, deoarece nu ați legat-o cu această temă încă de CSS, dar asta va veni.
În această primă parte, ați adăugat setările și comenzile necesare pentru a crea interfața personalizată a temelor pentru schema de culori.
În următoarea parte vă voi arăta cum să definiți variabilele pe baza alegerilor pe care le fac utilizatorii dvs. în personalizatorul temelor și apoi să utilizați acele variabile pentru a seta CSS.
