Utöka WordPress Theme Customizer Boilerplate

  1. 1. Introduktion till WordPress Theme Customizer
  2. 2. Interagera med WordPress Theme Customizer
  3. 3. WordPress Theme Customizer Boilerplate
  4. 4. Läser för tillfället: Utöka WordPress Theme Customizer Boilerplate
  5. 5. Theme Customizer Boilerplate – Villkorade alternativ, teman för barn och plugins

Del 3 av serien Theme Customizer introducerade dig till Theme Customizer Boilerplate som låter dig förenkla kod som hanterar dina temalternativ. Allt du behöver göra är att passera en rad alternativfält och pannplattan kommer att ta hand om att registrera Theme Customizer-avsnitt, inställningar och kontroller för dig bakom kulisserna.


Hittills har pannplattan gjort det möjligt att använda textfält, kryssrutor, alternativknappar och välj fält i Theme Customizer. Denna artikel visar hur du kan utöka det.

Obs! Innan du fortsätter, ladda ner den senaste versionen av WordPress Theme Customizer Boilerplate från Github-arkivet. Jag har gjort några förbättringar av det sedan sista handledning, och det är viktigt att din kod är uppdaterad. Ta en titt på föregående inlägg för fler anteckningar om ändringar, men i korthet, när du har kopierat pannplattan till din temamapp behöver du inte redigera dess filer alls – all redigering görs med filter- och actionkrokar.

Ansluter till Theme Customizer Boilerplate

Det finns flera action- och filterkrokar i WordPress Theme Customizer Boilerplate. Du kan ansluta till någon av dem från ditt temas funktioner.php-fil med add_action och add_filter funktioner:

  • ’Thsp_cbp_directory_uri’ – Filterkrok definierad i helpers.php, låter dig ändra plats för Customizer Boilerplate i din temamapp. Som standard ser kedjan ut så här – get_template_directory_uri (). ’/ Customizer-standardtext’ – men om du hellre vill flytta den till en anpassad plats är det denna krok som kan hjälpa dig.
  • ’Thsp_cbp_menu_link_text’ – Filterkrok definierad i helpers.php, låter dig ändra menytekstlänk. Boilerplate lägger till en länk under Utseende i WordPress-instrumentpanelen, vilket ger användarna enkel åtkomst till Theme Customizer. Som standard kommer den länken att säga “Theme Customizer” och du kan ändra texten med “thsp_cbp_menu_link_text” filterkroken.
  • ’Thsp_cbp_capability’ – Filterkrok definierad i helpers.php. Tillåter dig att ändra standardförmågan som används i $ wp_customize-> add_setting-metoden.
  • ’Thsp_cbp_option’ – Filterkrok definierad i helpers.php. Om du använder “alternativ” i dina inställningsargument, använd den här kroken för att ändra namnet på posten dina temainställningsvärden lagras under i wp_options-tabellen. Standardvärdet är “thsp_cbp_theme_options”, se till att du ansluter till den här och ändrar det till något som har ditt temanamn i det.
  • ’Thsp_cbp_options_array’ – Filterkrok definierad i options.php, MÅSTE du ansluta till den och ersätta standardalternativet (som innehåller exempelalternativ) med alternativ som används i ditt tema. Jag kommer att upprepa det, veta det och understryka det: You MÅSTE ansluta till den och ersätta standardalternativet med alternativ som används i ditt tema.
  • ’thsp_cbp_custom_controls’ – Handlingskrok definierad i custom-controls.php, genom att ansluta till den kan du skapa dina egna anpassade kontroller, fortsätt att läsa för att se ett exempel på hur du gör det.
  • ’tshp_cbp_remove_sections’’tshp_cbp_remove_controls’ och ’tshp_cbp_remove_settings’ – Filterkrokar definierade i customizer.php. Du kan skicka dem-arrayer med inbyggda sektions-ID (eller kontroll-ID eller inställnings-ID) för att ta bort några av de inbyggda sektionerna, kontrollerna eller inställningarna.

Obs! Medan vi är utdragbara och skapar dina egna krokar så att andra utvecklare kan använda dem för att utöka din kod, är det omöjligt att överdriva hur viktigt detta är. När allt är så fungerar WordPress (core). Och jag kunde inte tacka Pippin och hans artiklar tillräckligt för att få denna idé till mitt huvud.

Anpassade kontroller

Den uppdaterade versionen av Theme Customizer (som du just har checkat ut, eller hur?) Har några fler kontroller du kan använda – textarea-fält, HTML5-nummerfält och bilderfält, som i princip är en fin version av radioknappar.

Dessa anpassade kontroller definieras i custom-controls.php. Jag går inte igenom alla här, men låt oss titta på ett (HTML5-nummerfält) för att se hur det fungerar:

/ **
* Skapar anpassningskontroll för inmatningsfältet [typ = nummer]
*
* @since Theme_Customizer_Boilerplate 1.0
* /
klass CBP_Customizer_Number_Control utökar WP_Customize_Control {

public $ type = 'number';

public function render_content () {
echo '';
}

}

Som du kan se, allt du behöver göra är att definiera ny kontroll $ -typ och dess render_content-funktion som matar ut kontrollen på skärmen Theme Customizer.

Använda Customizer Boilerplates inbyggda anpassade kontroller

Det är samma sak som enkla fält som behandlas i tidigare handledning. Det enda du behöver vara medveten om är “typer” du behöver använda för var och en:

  • Nummerfält – ‘siffra’
  • Textarea-fält – ’Textarea’
  • Bilder som fungerar som radioknappar – ’Images_radio’, här är ett exempel på denna kontroll i en kommande gratis Cazuela-tema:

Teman Customizer Boilerplate

Att känna till namnen på dessa nya kontrolltyper och lägga till en är lätt. Så här kan du lägga till en nummerfältkontroll i matrisen som innehåller alla dina alternativ:

/ *
* ============
* ============
* Nummerfält
* ============
* ============
* /
'new_number_field' => matris (
'setting_args' => array (
'default' => '',
'typ' => 'alternativ',
'capability' => $ thsp_cbp_capability,
'transport' => 'uppdatera',
),
'control_args' => array (
'label' => __ ('Number', 'my_theme_textdomain'),
'type' => 'nummer', // Textarea-kontroll
'prioritet' => 8
)
)

Obs! Om du inte är säker på var du ska lägga till detta, ska du markera avsnittet “Använda alternativ för att lägga till avsnitt för kundanpassningar, inställningar och kontroller” i del 3 i denna serie. Det finns också ett prov för var och en av anpassade kontroller i filen option.php.

Lägga till dina egna anpassade kontroller

Låt oss komma tillbaka till “thsp_cbp_custom_controls” actionkroken som jag nämnde tidigare:

/ **
* Handlingskrok som låter dig skapa dina egna kontroller
* /
do_action ('thsp_cbp_custom_controls');

Det är en enkel WordPress-actionkrok som låter dig lägga till dina egna anpassade kontroller utan att ändra Theme Customizer Boilerplate-filer. Varför skulle du vilja undvika att redigera dem? För om du ansluter till pannplattan istället, när någon uppdaterar den, kan du bara ta tag i den senaste versionen, släppa den i ditt tema och inte förlora ändringarna du gjort. Tänk redigera WordPress kärnfiler kontra skriva ett plugin, redigera ett tema kontra skapa ett barn tema osv.

Om du någonsin behöver lägga till dina egna anpassade kontroller, så kan du göra det:

funktion my_theme_add_customizer_boilerplate_control () {
/ **
* Skapar anpassad kontroll för användning med Theme Customizer Boilerplate
* Använd ett unikt klassprefix!
*
* @since Theme_Customizer_Boilerplate 1.0
* /
klass CBP_Customizer_My_Control utökar WP_Customize_Control {

public $ type = 'my_type'; // Ändra detta

public function render_content () {
// Kontrollutgång går här
}

}
}
add_action ('thsp_cbp_custom_controls', 'my_theme_add_customizer_boilerplate_control');

Se till att du prefixar din anpassade kontrollklass med något unikt, så att namnet inte kolliderar med en annan klass. Jag använde ‘CBP_’ (Customizer Boilerplate) – eftersom du använder pannplatta i ett tema är ditt temas namn mycket meningsfullt och borde fungera bra för dig.

Theme Customizer: Vad är nästa?

Nu när WordPress Theme Customizer Boilerplate är utdragbar genom krokar, kommer vi att titta på för att lägga till “villkorade temalternativ” – sådana som bara kommer att visas om en viss plugin är aktiv och hjälper dig att hålla skärmen Theme Customizer avstängd.

Vad är dina tankar om Customizer Boilerplate hittills? Planerar du att använda det i dina teman? Några idéer om hur det skulle kunna förbättras? Din feedback är alltid välkommen.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me