Share
Hva du skal skapeTemaet tilpasser er et flott verktøy for å gi brukerne mer frihet til å justere et tema uten å måtte redigere koden. Men hvis du vil la brukerne endre fargene på nettstedet, kan det bli komplisert. Å legge til en kontroll for hvert enkelt element de kan forandre, vil gjøre ting tungvint og brukere kan ende opp med et nettsted som ser ut som en garish rot.
I stedet for å legge til mange kontroller for alle elementene du vil at brukerne skal kunne endre, kan du bare lage et fargeskjema, slik at brukerne kan velge noen farger og deretter bruke dem til en rekke elementer i temaet.
I denne opplæringen tar jeg deg gjennom den første delen av denne prosessen, som konfigurerer kontrollpanelet for temaet. I neste del vil jeg vise deg hvordan du kobler disse kontrollene til temaet ditt slik at når brukere velger farger, blir de gjennomført til temaet.
Start med å installere starttemaet og aktivere det. Tematilpasset vil se slik ut:
Etter å ha fullført opplæringen, vil tilpasseren ha to ekstra seksjoner.
Det første trinnet er å lage en fil i temaet ditt for å holde tilpassingsfunksjonene dine. Jeg skal jobbe med et grunnleggende starttema, basert på temaet som ble opprettet under serien min om å skape et WordPress-tema fra statisk HTML. Jeg har gjort noen få modifikasjoner på det slik at det vil fungere med fargeskjemafunksjonene, så hvis du vil jobbe gjennom denne opplæringen, foreslår jeg at du laster ned starttemaet.
I hovedmappen til temaet ditt lager du en mappe som heter inc og derved opprett en fil som heter customizer.php.
Åpne din functions.php fil og legg til følgende, som inkluderer den nye filen du nettopp har opprettet:
Accentsconagua
include_once ('inc / customizer.php');Nå i din customizer.php fil, legg til denne funksjonen:
funksjon wptutsplus_customize_register ($ wp_customize) add_action ('customize_register', 'wptutsplus_customize_register');Dette skaper en funksjon som vil inneholde alle dine innstillinger og kontroller, og hakker den til customize_register action hook. Ditt tema er klar til å gå!
Det første trinnet er å legge til innstillingene og kontrollene for fargeskjemaet. Du legger til kontroller for fire fargeplukkere, hovedfarge, sekundærfarge og to koblingsfarger.
Inne i funksjonen du nettopp har opprettet, legg til følgende:
/******************************************* Fargevalg **** ****************************** / // legg til seksjonen for å inneholde innstillingene $ wp_customize-> add_section ('textcolors', array ('title' => 'Fargeskjema',)));Dette skaper en tom seksjon for fargeskjema kontrollene.
Umiddelbart nedenfor legg til:
// hovedfarge (side tittel, h1, h2, h4, h6, widget overskrifter, nav lenker, footer overskrifter) $ txtcolors [] = array ('slug' => 'color_scheme_1', 'default' => '# 000' , 'label' => 'Hovedfarge'); // sekundær farge (sidebeskrivelse, sidebar overskrifter, h3, h5, nav-koblinger på hover) $ txtcolors [] = array ('slug' => 'color_scheme_2', 'default' => '# 666', 'label' = > 'Secondary Color'); // linkfarge $ txtcolors [] = array ('slug' => 'link_color', 'default' => '# 008AB7', 'label' => 'Link Color'); // linkfarge (hover, aktiv) $ txtcolors [] = array ('slug' => 'hover_link_color', 'standard' => '# 9e4059', 'label' => 'Linkfarge (på hover)');Dette legger til en ny seksjon til temaet tilpasser kalt 'Color Scheme'. Deretter setter du opp argumentene for de fire fargene du skal jobbe med: en slug, standardverdi og etikett. Standardverdien er fargen som brukes i temaet, slik at du kanskje vil endre din til fargene i temaet ditt.
Deretter må du opprette innstillinger for fargene dine ved å bruke argumenter du nettopp har definert. Under den siste kodeblokken skriver du:
// legg inn innstillingene og kontrollene for hver farge foreach ($ txtcolors som $ txtcolor) // SETTINGS $ wp_customize-> add_setting ($ txtcolor ['slug'], array ('standard' => $ txtcolor ['standard'] , 'type' => 'alternativ', 'capability' => 'edit_theme_options')); Dette bruker a for hver uttalelse for å arbeide gjennom hver av de fargene du nettopp har definert, opprette en innstilling for hver bruker de argumentene du definerte. Men du må fortsatt legge til kontroller slik at brukerne kan samhandle med disse innstillingene ved hjelp av temaet tilpasser.
Inne i for hver braces og under add_setting () funksjonen du nettopp lagt til, sett inn følgende:
// CONTROLS $ wp_customize-> add_control (ny WP_Customize_Color_Control ($ wp_customize, $ txtcolor ['slug'], array ('label' => $ txtcolor ['label'], 'section' => 'textcolors' => $ txtcolor ['slug']))));Dette legger til en fargeplukker for hver av fargene dine, ved hjelp av WP_Customize_Color_Control () funksjon, som skaper fargeplukkere for temaet tilpasser.
Hele ditt for hver uttalelsen vil nå se slik ut:
// legg inn innstillingene og kontrollene for hver farge foreach ($ txtcolors som $ txtcolor) // SETTINGS $ wp_customize-> add_setting ($ txtcolor ['slug'], array ('standard' => $ txtcolor ['standard'] , 'type' => 'alternativ', 'capability' => 'edit_theme_options')); // CONTROLS $ wp_customize-> add_control (ny WP_Customize_Color_Control ($ wp_customize, $ txtcolor ['slug'], array ('label' => $ txtcolor ['label'], 'section' => 'textcolors' => $ txtcolor ['slug'])))); Du vil nå kunne se din nye seksjon når du åpner temaet tilpasset med temaet aktivert:
Og når du utvider en av kontrollene, kan du se fargeplukkeren:
For øyeblikket vil ingenting du gjør med fargeplukkeren faktisk bli reflektert i temaet ditt, siden du ikke har lagt til noe CSS for å få det til å fungere - vi kommer til det i del 2 av denne serien. For nå legger vi til en annen seksjon for å gi brukerne litt mer kontroll over deres fargevalg.
Neste del vil ikke tillate brukere å velge farger, men i stedet gir dem muligheten til å legge til en solid bakgrunn til overskriften og / eller bunnteksten til nettstedet deres. Hvis de velger dette, vil bakgrunns- og tekstfargene til elementene endres.
Under koden du nettopp lagt til, men fortsatt inne i din wptutsplus_customize_register () funksjon, legg til følgende:
/ ************************************* Solid bakgrunnsfarge ******** ****************************** / // legg til seksjonen for å inneholde innstillingene $ wp_customize-> add_section ('background' , array ('title' => 'Solid Backgrounds',))); // legg inn innstillingen for topptekst $ wp_customize-> add_setting ('header-background'); // legge til kontrollen for topptekst $ wp_customize-> add_control ('header-background', array ('label' => 'Legg til en solid bakgrunn til overskriften?', 'section' => 'background', 'settings => 'header-background' = '' no ',' header-background-on '=>' ja ' ,))); // legg inn innstillingen for footer bakgrunnen $ wp_customize-> add_setting ('footer-background'); // legge til kontrollen for footer bakgrunnen $ wp_customize-> add_control ('footer-background', array ('label' => 'Legg til en solid bakgrunn til bunnteksten?', 'section' => 'background', 'settings '=>' footer-background ',' type '=>' radio ',' valg '=> array (' footer-background-off '=>' nei ',' footer-background-on '=>' ja ' ,)));Dette legger til en ny ny seksjon kalt "Solid Backgrounds" og legger til to kontroller til den, begge er radiobokser. I hvert tilfelle er det to valg: ja og nei. I den andre delen av denne serien vil jeg vise deg hvordan du definerer variabler basert på disse valgene, og bruk dem til å endre CSS i temaet.
Du kan nå se den nye delen i temaet tilpasser:
Igjen vil ingenting skje hvis du velger en av radioboxene, siden du ikke har koblet dette til temaets CSS ennå, men det kommer til å komme.
I denne første delen har du lagt til innstillingene og kontrollene som trengs for å opprette grensesnittet for temaoppdatering for fargevalg.
I neste del vil jeg vise deg hvordan du definerer variabler basert på valgene dine brukerne i temaet tilpasser, og bruk deretter disse variablene til å angi CSS.
