Share
I den siste artikkelen definerte vi en enkel metode for alt som kreves for å etablere en ny seksjon, innstillinger og kontroller innenfor Theme Customizer.
I denne artikkelen skal vi fortsette med å gjøre mer av det samme; Vi skal imidlertid legge til nye innstillinger og kontroller i den eksisterende delen, men vi skal se på en rekke forskjellige alternativer, for eksempel radioknapper, velg bokser og inntastingsbokser.
Så med det sagt, la oss fortsette.
Husk fra den siste artikkelen at vår metodikk er som følger:
Accentsconagua
get_theme_mod Vi gjør dette for hver av de nye kontrollene på følgende innstillinger og kontroller. Når det er nødvendig, snakker vi om data validering og sanitisering etter behov.
Når vi har nådd slutten av artikkelen, vil en versjon av denne artiklens kode også være tilgjengelig for nedlasting fra GitHub.
La oss legge til et nytt alternativ til Theme Customizer som lar brukeren velge mellom fargeskjemaer - en er standard svart på hvitt fargevalg, den andre vil være omvendt.
For å gjøre dette må vi først legge til en innstilling og en kontroll til vår tcx_register_theme_customizer funksjon. Legg til følgende to funksjonssamtaler nedenfor:
$ wp_customize-> add_setting ('tcx_color_scheme', array ('standard' => 'normal', 'transport' => 'postmessage')); $ wp_customize-> add_control ('tcx_color_scheme', array ('section' => 'tcx_display_options', 'label' => 'Fargeskjema', 'type' => 'radio', 'valg' => => 'Normal', 'inverse' => 'Inverse')))); Legg merke til at vi legger til en ny innstilling identifisert av tcx_color_scheme ID, og vi bruker åpenbart postmessage transporttype.
For det andre, legg merke til at vi også har gitt en misligholde verdien som er satt til normal. Denne verdien er det som bringer oss til add_control anrop.
Legg merke til at vi binder det til tcx_display_options som vi definerte i den siste artikkelen. Vi har gitt den etiketten Fargevalg siden det er åpenbart hva det er at vi skifter, og vi setter inn type av kontroll som en radio knapp.
For å gjøre dette må vi passere en rekke valg hvor den første nøkkelen er verdien av alternativet og den andre verdien er etiketten for alternativknappen.
Dette er derfor standardverdien for add_setting samtale er satt til normal.
Nå skal vi kunne lagre arbeidet vårt, oppdatere Theme Customizer, og deretter se det nye alternativet.
Men på dette punktet vil det fortsatt ikke gjøre mye.
Nå må vi hoppe over til JS / tema-customizer.js og legg til følgende kodenavn:
wp.customize ('tcx_color_scheme', funksjon (verdi) value.bind (funksjon (til) if ('inverse' === til) $ ('body') .css (bakgrunn: '# 000' farge: '#fff'); else $ ('body') .css (bakgrunn: '#fff', farge: '# 000'););); Dette instruerer Theme Customizer til å endre kroppBakgrunnsfarge og skrifttypefarge basert på innstilling av radioknappene.
Ved å implementere denne koden, bør du kunne oppdatere Theme Customizer og deretter se endringene oppstå. Saken er, verdiene er faktisk ikke lagret i databasen.
get_theme_mod Den endelige tingen vi må implementere for å sikre at dataene blir lest fra databasen for å endre fargeskjemaet, er å legge til en stil på stil blokkere i tcx_customizer_css funksjon:
bakgrunn: # 000; farge: #fff; bakgrunn: #fff; farge: # 000;
Lett nok å forstå, ikke sant? Den fungerer akkurat som vår JavaScript-kode gjør, bortsett fra at den faktisk gjelder for temaet når siden lastes i stedet for bare når du forhåndsviser det.
Nå fortsetter vi prosessen ved å introdusere en annen innstilling og en annen kontroll ved hjelp av vår metode slik at brukerne våre kan velge en global skrift for temaet deres.
For å gjøre dette bruker vi en å velge element med et sett med alternativer som brukeren kan velge ønsket front.
På dette tidspunktet bør metodikken bli svært kjent.
Først skal vi definere en innstilling for tcx_font som vi vil bruke til å referere gjennom koden litt senere:
$ wp_customize-> add_setting ('tcx_font', array ('default' => 'tider', 'transport' => 'postMessage')); Akkurat som i forrige innstilling, er vi gitt misligholde Verdien at vi skal definere øyeblikkelig når vi implementerer en ny kontroll.
Som tidligere nevnt skal vi gi brukerne muligheten til å velge en skrift ved hjelp av en å velge element. Dette ligner på samme måte hvordan radioknapper fungerer, slik at vi gir en matrise med nøkler og verdier som definerer skrifttypen; men den faktiske type av elementet vil være annerledes.
Så med det sagt, legg til følgende kode til tcx_register_theme_customizer funksjon:
$ wp_customize-> add_control ('tcx_font', array ('section' => 'tcx_display_options', 'label' => 'Tema skrifttype', 'type' => 'velg', 'valg' => => 'Times New Roman', 'arial' => 'Arial', 'courier' => 'Courier New'))); Dette vil introdusere en å velge element i Theme Customizer med følgende tre alternativer for skrifter:
Og nå må vi skrive opp skriftvalgene slik at de dynamisk endrer skriften av temaet.
For å gjøre dette, åpne JS / tema-customizer.js og legg deretter til følgende kodenavn. Merk at dette kommer til å være litt mer komplisert enn det vi pleier å gjøre i Theme Customizer JavaScript.
Først må du sørge for at du har var sFont definert øverst på JavaScript-filen like over det første anropet til wp.customize.
Deretter legger du til følgende kodenavn:
wp.customize ('tcx_font', funksjon (verdi) value.bind (funksjon (til) switch (to.toString (). toLowerCase ()) case 'times': sFont = 'Times New Roman'; case 'arial': sFont = 'Arial'; pause; case 'courier': sFont = 'Courier New, Courier'; pause; case 'helvetica': sFont = 'Helvetica'; break; default: sFont = 'Times New Roman '; break; $ (' body ') .css (fontFamily: sFont););); Selv om funksjonen er litt lengre, er det faktisk ganske enkelt: Vi tar innkommende verdi og bruker deretter en bryter / case for å bestemme hvilken skrift som ble valgt. Basert på den valgte verdien tilordner vi den til sFont variabel.
Og, for defensiv koding, hvis man ikke er definert eller noe går galt under transporten, så går vi til standard Times New Roman.
Endelig gjelder da verdien av sFont til font-family attributten til kropp element ved hjelp av jQuery's css funksjon.
get_theme_mod Nå, i tråd med vår metodikk, må vi oppdatere vår tcx_customizer_css fungere slik at skrifttypen er riktig påført kroppen.
Dette er faktisk en enkel samtale:
font-family:
Ferdig.
Til slutt, la oss tillate brukeren å justere opphavsrettsmeldingen som vises nederst i bunntekstmalen.
La oss justere malen nå. Foreløpig skal det se slik ut:
© Alle rettigheter reservert
Men la oss oppdatere den for å se slik ut:
©
Selv om dette blir litt Før vår metodikk er det nødvendig for oss å definere slik at Theme Customizer kan dra nytte av det nye span element, og slik at vi kan vise opphavsrettsmeldingen som definert av brukeren.
Først presenterer vi vår endelige innstilling:
$ wp_customize-> add_setting ('tcx_footer_copyright_text', array ('standard' => 'Alle rettigheter reservert', 'sanitize_callback' => 'tcx_sanitize_copyright', 'transport' => 'postMessage')); Men legg merke til her, det er en ting som er annerledes enn de forrige inngangene, og det er "sanitize_callback" -tasten og verdien. Dette definerer en funksjon som skal brennes når dataene blir serialisert til databasen - vi gjør ikke det ulovlige innholdet i databasen.
Så, gjør til dette, vil vi definere en funksjon som heter tcx_sanitize_copyright som vil fjerne alle tagger, skråstreker og andre ulovlige koder som skal serialisert til databasen:
funksjon tcx_sanitize_copyright ($ input) return strip_tags (stripslashes ($ input));
Vi returnerer rett og slett verdien av den sanitiserte inngangen.
Deretter er det på tide å legge til den faktiske kontrollen for innstillingen.
$ wp_customize-> add_control ('tcx_footer_copyright_text', array ('section' => 'tcx_display_options', 'label' => 'Copyright Message', 'type' => 'tekst')); Her, igjen, binder vi det til tcx_display_options delen og vi gir den etiketten "Copyright Message" for brukerne å være bord å lese. Endelig har vi definert dette som en tekst inngang.
Selvfølgelig, på dette tidspunktet vet du at vi ikke klarer å faktisk gjøre noe med kontrollen før vi har koblet den til JavaScript.
JavaScript for dette er veldig enkelt, spesielt hvis du har gitt span komponere en unik ID som vi gjorde over.
wp.customize ('tcx_footer_copyright_text', funksjon (verdi) value.bind (funksjon (til) $ ('# copyright-message') .text (til););); I hovedsak tar det verdien av til argument og deretter setter det som verdien av spans tekst.
get_theme_mod Og til slutt, selv om vi allerede har gjort det i malen, går vi videre og vurderer koden her:
©
Legg merke til at vi leser verdien av tcx_footer_copyright_text og så skriver vi ut den verdien ut på skjermen.
Og for nå er det det! Vi har tatt en titt på noen av de grunnleggende kontrollene, gitt brukeren en betydelig kontroll over utseendet på dette, om enn veldig grunnleggende tema, og vi har dekket hvordan å introdusere data sanitisering sammen med serialiseringsprosessen.
Det eneste som er igjen for å dekke er noen av de mer avanserte, innebygde kontrollene som WordPress tilbyr. Så i den neste artikkelen tar vi en titt på noen av disse funksjonene, og hvordan å implementere dem også.
!
