Share
Vid denna tidpunkt i serien har vi täckt allt från att förstå varför Theme Customizer är till nytta för dem som är designers och utvecklare, hur man implementerar det i vårt tema och förstår förhållandet mellan sektioner, inställningar och kontroller.
Vi har också tittat på hur man implementerar vår egen inställning och kontroll i en av WordPress 'fördefinierade sektioner.
I den här artikeln ska vi titta på vad som krävs för att presentera vår egen sektion och en mängd olika inställningar och kontroller. Denna artikel kommer att omfatta en metod som kan följas för att implementera nya inställningar och kontroller, och hur man tillämpar denna metod för att införa en ny sektion, inställning och kontroll.
Vi kommer att expandera om detta ämne i den andra delen av den här artikeln genom att införa ytterligare kontroller. Men för nu, låt oss ta en titt på metoden, och låt oss introducera en ny inställning i Theme Customizer.
Innan vi börjar uppdatera vårt tema, låt oss först prata om vad som krävs för att introducera en ny sektion, en ny inställning och en ny kontroll. Observera att vi för närvarande antar att vi alltid ska använda skicka meddelande transport för live uppdateringar, så vi kommer att anta detsamma framåt.
Med det sagt, att ha en metod för att införa nya alternativ är alltid mycket mer användbar än att gå in i något blind, så låt oss ta en titt på vad som behövs för att implementera sektioner, inställningar och kontroller på hög nivå:
Accentsconagua
get_theme_mod Ingenting för komplicerat, eller hur? Naturligtvis talar handlingar högre än ord så låt oss börja med att göra exakt detta.
För att följa metoden som vi har skisserat ovan kommer vi att arbeta med samma funktioner, mallar och JavaScript-filer som vi har definierat i tidigare artiklar, så om du inte har tagit upp, nu är det tid.
Med det sagt, låt oss börja.
I tcx_register_theme_customizer funktion, vi ska genomföra ett avsnitt som heter Skärmalternativ, och vi ska se till att det här placeras längst ner i listan med avsnitt i temat anpassningsanordningen. Detta görs genom att ställa in prioritet egenskapen hos add_section.
$ wp_customize-> add_section ('tcx_display_options', array ('title' => 'Displayalternativ', 'prioritet' => 200)); Observera ovan, vi har definierat två argument:
Om du sparar ditt jobb nu och försöker ladda om anpassningsverktyget ser du inte Skärmalternativ sektion. Det beror på att det inte finns några alternativ för att det ska visas - än.
För att kunna visa sektionen måste vi presentera en inställning för användaren att tweak. För att göra detta introducerar vi ett alternativ som gör det möjligt för användaren att växla upp synligheten för en rubrik.
Det första vi behöver göra är att ringa till add_setting som identifierar inställningen och som definierar dess standardvärde och transportmetoden.
Allt detta borde vara relativt enkelt om du har följt med föregående artikel. Så precis under anropet till add_section, lägg till följande samtal:
$ wp_customize-> add_setting ('tcx_display_header', array ('standard' => 'true', 'transport' => 'postMessage')); Specifikt har vi skapat en ny inställning som heter tcx_display_header som vi ska använda för att växla displayen av rubriken med båda get_theme_mod och använder JavaScript.
Men det räcker inte för att ge användaren möjlighet att anpassa sidhuvudets synlighet - vi behöver nu genomföra en kontroll.
För den här inställningen ska vi introducera en kryssruta som gör det möjligt för användarna att ändra inställningen.
Först måste vi definiera kontrollen. För att göra detta, lägg till följande kod under samtalet till add_setting som vi definierade ovan:
$ wp_customize-> add_control ('tcx_display_header', array ('section' => 'tcx_display_options', 'label' => 'Display Header?', 'typ' => 'kryssrutan')); I det här samtalet bindar vi kontrollen till tcx_display_header inställning så att den vet vilken information som ska göras. I matrisen ger vi ID för sektionen som den här inställningen och kontrollen är bunden till. Därefter ger vi etiketten som kommer att visas bredvid kontrollen och slutligen definierar vi typen av kontroll. Självklart definierar vi en kryssruta.
Vid den här tiden borde du kunna spara ditt arbete, uppdatera temat anpassningsverktyget och sedan se något så här:
Det här är bra - det betyder att allt har anslutits ordentligt så långt som Teman Customizer berörs, men märker att att klicka på kryssrutan inte faktiskt do något.
Nu är det dags att ansluta Theme Customizer till det aktuella temat.
Först vill vi öppna tema-customizer.js. Om du har följt med, ligger den här i js katalog som vi definierade tidigare i serien.
Därefter måste vi lägga till följande kod:
wp.customize ('tcx_display_header', funktion (värde) value.bind (funktion (till) false === till? $ ('#header') .hide (): $ ('#header') .show ););); Observera att det tar in ID för den inställning som vi skapade och sedan kör den följande logik: Om till är lika med falsk, då kommer vi gömma rubrikelementet; Annars visar vi rubrikelementet.
Uppdatera sidan nu och du bör märka att rubriken försvinner (eller återkommer) när du växlar av kryssrutan.
Men när du räddar ditt arbete, händer ingenting. Detta beror på att serialiserat värde inte läses. Det sista vi behöver göra är hävstångseffekt get_theme_mod för inställningarna.
get_theme_mod Slutligen är den sista delen av den metod som är nödvändig för att genomföra vår egen inställning att se till att värdet som lagras via transporten läses när sidan laddas.
För att göra detta, leta reda på tcx_customizer_css funktionen och lägg sedan till följande kod mellan stil blockera:
#header display: none;
Kortfattat läser detta tematvärdet för ID-numret för header-visningsvärdet som vi har sparat. Om den är inställd på falsk, så döljer den rubrikelementet; annars blir CSS aldrig gjord.
Vid denna tidpunkt borde du ha ett fullständigt fungerande genomförande av kryssrutan som dynamiskt byter huvudet när användaren arbetar med anpassaren och som utnyttjar det serialiserade värdet när inställningen sparas och uppdaterar vad användaren ser när de ladda upp temat.
Nu när vi har definierat en metod för att implementera sektioner, inställningar och kontroller, kan vi börja arbeta med en rad andra kontroller, liksom.
I nästa artikel tar vi en titt på den återstående uppsättningen grundläggande kontroller, och efter det tar vi en titt på några av de mer avancerade kontrollerna som WordPress erbjuder i Theme Customizer.
Som med tidigare versioner av temat kan du ladda ner version 0.4.0 från GitHub för att granska koden, leka med den och förbereda sig för nästa uppsättning kontroller som vi kommer att introducera i följande artikel.
