Share
I den senaste artikeln definierade vi en enkel metodik för allt som krävs för att skapa en ny sektion, inställningar och kontroller inom teman Customizer.
I den här artikeln kommer vi att fortsätta med att göra mer av samma; Vi kommer dock att lägga till nya inställningar och kontroller i den befintliga sektionen, men vi ska titta på en mängd olika alternativ som radioknappar, välj rutor och inmatningsrutor.
Så med det sagt, låt oss fortsätta.
Minns från den senaste artikeln, att vår metodik är enligt följande:
Accentsconagua
get_theme_mod Vi gör det för varje av de nya kontrollerna på följande inställningar och kontroller. Vid behov talar vi om datavalidering och sanering efter behov.
När vi har nått slutet av artikeln kommer en version av den här artikelns kod också att hämtas från GitHub.
Låt oss lägga till ett nytt alternativ till teman Customizer som tillåter användaren att välja mellan färgscheman - en är standard svart på vitt färgschema, den andra kommer att vara omvänd.
För att göra detta måste vi först lägga till en inställning och en kontroll till vår tcx_register_theme_customizer fungera. Lägg till följande två funktionssamtal nedan:
$ wp_customize-> add_setting ('tcx_color_scheme', array ('default' => 'normal', 'transport' => 'postMessage')); $ wp_customize-> add_control ('tcx_color_scheme', array ('section' => 'tcx_display_options', 'label' => 'Färgschema', 'typ' => 'radio', 'val' => => 'Normal', 'inverse' => 'Inverse')))); Observera att vi lägger till en ny inställning som identifierats av tcx_color_scheme ID och vi använder uppenbarligen skicka meddelande transporttyp.
För det andra märker vi att vi också har tillhandahållit en standard värde som är inställt på vanligt. Detta värde är det som tar oss till add_control ring upp.
Observera att vi binder den till tcx_display_options som vi definierade i den senaste artikeln. Vi har gett det etiketten Färgschema eftersom det är självklart vad det är att vi ändrar, och vi ställer in typ av kontroll som en radio knapp.
För att kunna göra detta måste vi överföra en rad val där den första nyckeln är värdet av alternativet och det andra värdet är etiketten för alternativknappen.
Detta är därför standardvärdet för add_setting samtalet är inställt på vanligt.
Nu borde vi kunna spara vårt arbete, uppdatera teman Customizer och se sedan det nya alternativet.
Men vid denna tidpunkt kommer det fortfarande inte göra mycket.
Nu måste vi springa in i js / tema-customizer.js och lägg till följande kodkod:
wp.customize ('tcx_color_scheme', funktion (värde) value.bind (funktion (till) if ('inverse' === till) $ ('body') .css (bakgrund: '# 000' färg: '#fff'; else $ ('body') .css (bakgrund: '#fff', färg: '# 000'););); Detta instruerar Teman Customizer att ändra kroppbakgrundsfärg och teckensnittsfärgen baserad på inställningen av radioknapparna.
Genom att implementera den här koden bör du kunna uppdatera Teman Customizer och sedan se ändringarna inträffa. Saken är att värdena faktiskt inte sparas i databasen.
get_theme_mod Det sista som vi behöver genomföra för att säkerställa att data läses från databasen för att ändra färgschema är att lägga till en stil på stil blockera i tcx_customizer_css fungera:
bakgrund: # 000; färg: #fff; bakgrund: #fff; färg: # 000;
Lätt nog att förstå, eller hur? Det fungerar exakt samma sätt som vår JavaScript-kod gör, förutom att det verkligen gäller temat när sidan laddas i stället för bara när du förhandsgranskar det.
Nu fortsätter vi processen genom att införa en annan inställning och en annan kontroll med vår metod, så att våra användare kan välja en global typsnitt för deras tema.
För att göra detta använder vi en Välj element med en uppsättning alternativ där användaren kan välja önskad front.
Vid denna tidpunkt bör metodiken bli mycket bekant.
Först definierar vi en inställning för tcx_font som vi kommer att använda för att referera hela koden lite senare:
$ wp_customize-> add_setting ('tcx_font', array ('default' => 'tider', 'transport' => 'postMessage')); Precis som med den tidigare inställningen tillhandahålls vi standard värdet som vi definierar tillfälligt när vi implementerar en ny kontroll.
Som tidigare nämnts kommer vi att ge användarna möjlighet att välja ett teckensnitt med hjälp av en Välj element. Det här liknar väldigt hur radioknappar fungerar så att vi ger en matris med nycklar och värden som definierar typsnittet. dock den faktiska typ av elementet kommer att vara annorlunda.
Så med det sagt, lägg till följande kod till tcx_register_theme_customizer fungera:
$ wp_customize-> add_control ('tcx_font', array ('section' => 'tcx_display_options', 'label' => 'Tema teckensnitt', 'typ' => 'välj', 'val' => => 'Times New Roman', 'arial' => 'Arial', 'courier' => 'Courier New'))); Detta kommer att introducera en Välj element i temat anpassaren med följande tre alternativ för teckensnitt:
Och nu måste vi skriva upp teckensnittet så att de dynamiskt ändrar teckensnittet på temat.
För att göra detta, öppna js / tema-customizer.js och lägg sedan till följande kodblock. Observera att det här kommer att bli lite mer komplicerat än det vi brukar göra i teman Customizer JavaScript.
Först, se till att du har var sFont definierad överst på JavaScript-filen strax över det första samtalet till wp.customize.
Lägg sedan till följande kodkod:
wp.customize ('tcx_font', funktion (värde) value.bind (funktion (till) switch (to.toString (). toLowerCase ()) case 'times': sFont = 'Times New Roman'; case 'arial': sFont = 'Helvetica'; break; default: sFont = 'Times New Roman': sFont = 'Helvetica': sFont = 'Courier New, Courier' '; break; $ (' body ') .css (fontFamily: sFont););); Även om funktionen är något längre är det faktiskt ganska enkelt: Vi tar det inkommande värdet och använder sedan en switch fallet för att bestämma vilken typsnitt som valts. Baserat på det valda värdet tilldelar vi det till sFont variabel.
Och för defensiva kodningsändamål, om man inte definierar eller något går fel under transporten, så kommer vi till standard Times New Roman.
Slutligen ange då värdet på sFont till typsnittsfamilj attribut av kropp element som använder jQuery s css fungera.
get_theme_mod Nu, i enlighet med vår metodik, behöver vi uppdatera vår tcx_customizer_css funktion så att teckensnittet tillämpas korrekt på kroppen.
Detta är faktiskt ett enkelt samtal:
typsnittsfamilj:
Gjort.
Till sist, låt oss tillåta användaren att justera upphovsrättsmeddelandet som visas längst ner i sidfoten.
Låt oss justera mallen nu. För närvarande ska det se ut så här:
© Alla rättigheter förbehållna
Men låt oss uppdatera det så att det ser ut så här:
©
Även om detta blir lite före vår metodik är det nödvändigt för oss att definiera så att temat anpassaren kan dra nytta av det nya spänna element, och så att vi kan visa upphovsrättsmeddelandet som definierat av användaren.
Först introducerar vi vår sista inställning:
$ wp_customize-> add_setting ('tcx_footer_copyright_text', array ('standard' => 'Alla rättigheter reserverade', 'sanitize_callback' => 'tcx_sanitize_copyright', 'transport' => 'postMessage')); Men märke här, det finns en sak som skiljer sig från tidigare ingångar och det är "sanitize_callback" -nyckeln och värdet. Det här definierar en funktion som ska eldas när data är serialiserad till databasen - trots allt gör vi inte olagligt innehåll till databasen.
Så gör vi här, vi definierar en funktion som heter tcx_sanitize_copyright som kommer att ta bort eventuella taggar, snedstreck och andra olagliga taggar som bör serialiseras till databasen:
funktion tcx_sanitize_copyright ($ input) return strip_tags (stripslashes ($ input));
Vi returnerar helt enkelt värdet av den saniterade ingången.
Därefter är det dags att lägga till den faktiska kontrollen för inställningen.
$ wp_customize-> add_control ('tcx_footer_copyright_text', array ('section' => 'tcx_display_options', 'label' => 'Upphovsrättsmeddelande', 'typ' => 'text')); Här, igen, bindar vi det till tcx_display_options avsnittet och vi ger den etiketten "Copyright Message" för att användarna ska vara tabellen att läsa. Slutligen har vi definierat detta som en text inmatning.
Naturligtvis, vid den här tiden vet du att vi inte kan göra någonting med kontrollen tills vi har kopplat den till JavaScript.
JavaScript för detta är väldigt enkelt, särskilt om du har gett spänna element ett unikt ID som vi gjorde ovan.
wp.customize ('tcx_footer_copyright_text', funktion (värde) value.bind (funktion (till) $ ('# copyright-message') .text (till););); I huvudsak tar det värdet av till argument och anger sedan det som värdet av spännas text.
get_theme_mod Och slutligen, även om vi redan har gjort det i mallen, går vi vidare och granskar koden här:
©
Observera att vi läser värdet av tcx_footer_copyright_text och då skriver vi ut det värdet ut till skärmen.
Och för nu är det det! Vi har tittat på några av de grundläggande kontrollerna, givet användaren en betydande kontroll över utseende och känsla av detta, men väldigt grundläggande tema, och vi har täckt hur man introducerar datasanering tillsammans med serialiseringsprocessen.
Det enda som finns kvar att täcka är några av de mer avancerade, inbyggda kontrollerna som WordPress erbjuder. Så i nästa artikel tar vi en titt på några av de funktionerna och hur man implementerar dem också.
!
