Interagera med WordPress Theme Customizer

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

I del 1 av WordPress Theme Customizer-serien nämnde jag att du måste ladda för att interagera med Theme Customizer $ wp_customize objekt, som är ett exempel på WP_Customize_Manager klass. För att göra det måste du använda customize_register actionkrok:


add_action ('customize_register', 'my_theme_customize_register');
funktion my_theme_customize_register ($ wp_customize) {

// Interagera med $ wp_customize-objekt

}

Du kan placera den här koden i ditt temas funktioner.php eller en fil som ingår i den.

Lägga till eller ta bort Theme Customizer-element (avsnitt, inställningar och kontroller)

När du har laddat $ wp_customize objekt du kan använda någon av dess metoder för att lägga till, få eller ta bort inställningar, kontroller och avsnitt i det (add_setting, get_setting, remove_setting, add_control … du får poängen).

Så om du vill skaffa sig eller avlägsna ett avsnitt, kontroll eller inställning, allt du behöver är dess ID. Den här raden tar bort färgavsnittet (placera det i funktionen my_theme_customize_register från första kodavsnittet):

$ wp_customize-> remove_section ('färger');

Att lägga till ett avsnitt, kontroll eller inställning är något annorlunda eftersom det kräver några fler parametrar. Jag kommer inte gå igenom dem alla av två skäl:

  1. Det är inte riktigt vad syftet med den här serien är, vi kommer att skapa en Theme Customizer-pannplatta som du bara kan släppa in i ditt tema istället
  2. Alex Mansfield täckte det redan i sitt 6000 ord monster av a Tema Customizer handledning att varje WordPress-temautvecklare måste läsa och sedan tweeta om (allvarligt, om du inte redan har det, gå och läsa det nu).

Men ändå, låt oss ta en titt på hur du kan lägga till din egen inställning med en kontroll i ett nytt tematillpassningsavsnitt, liksom några av argumenten. Eftersom det är mycket lättare att arbeta med verkliga exempel är det här vi går efter:

  • Ett nytt avsnitt, märkt “Layout”
  • En ny inställning som lagrar ditt temas layout
  • En ny radiokontroll med två alternativ – sidofält till vänster och sidofält till höger

Det första du lägger till i Theme Customizer är avsnittet “Layout”:

$ Wp_customize-> add_section (
// ID
'Layout_section',
// Argumentuppsättning
array (
'title' => __ ('Layout', 'my_theme'),
'capability' => 'edit_theme_options',
'description' => __ ('Tillåter dig att redigera ditt temas layout.', 'my_theme')
)
);

Försök inte se det i anpassning ännu, ett avsnitt visas inte om det har en inställning och en kontroll läggs till. Så låt oss lägga till båda:

$ Wp_customize-> add_setting (
// ID
'My_theme_settings [layout_setting]',
// Argumentuppsättning
array (
'default' => 'höger sidofält',
'typ' => 'alternativ'
)
);
$ Wp_customize-> add_control (
// ID
'Layout_control',
// Argumentuppsättning
array (
'type' => 'radio',
'label' => __ ('Temalayout', 'my_theme'),
'section' => 'layout_section',
'choice' => array (
'left-sidebar' => __ ('Left sidebar', 'my_theme'),
'right-sidebar' => __ ('Right sidebar', 'my_theme')
),
// Den sista måste matcha inställnings-ID ovanifrån
'settings' => 'my_theme_settings [layout_setting]'
)
);

Förutsatt att du läser Alexs tutorial- och / eller Codex-sidor finns det bara en parameter i add_setting-array-array – ‘typ’ – som jag vill fokusera på. Du har två möjligheter här, “alternativ” och “tema_mod” och du kan hämta dem med hjälp av get_option och get_theme_mod, respektive. Jag använder alltid ‘alternativ’ helt enkelt för att det gör att du kan serialisera dina temainställningsvärden genom att ge dem ID: er my_theme_settings [setting_1], my_theme_settings [setting_2] etc. På så sätt lagras alla värden som en databaspost i din wp_options-tabell.

Och slutligen, efter att du lagt till de två kodavsnitten för att fungera som du anslöt till customize_register actionkrok (första kodavsnittet i det här inlägget), Theme Customizer har anpassats:

Nytt avsnitt läggs till Theme Customizer

Nytt avsnitt läggs till Theme Customizer

Använda värden för Theme Customizer-inställningar i ditt tema

När du har gett dina användare möjlighet att lagra den här inställningen kan du ta tag i dess värde och ansluta till body_class filterkrok och lägg till den i en mängd befintliga kroppsklasser:

add_filter ('body_class', 'my_theme_body_classes');
funktion my_theme_body_classes ($ klasser) {

/ *
* Eftersom vi använde 'alternativ' i add_setting argument array
* vi hämtar värdet med hjälp av get_option-funktionen
* /
$ my_theme_settings = get_option ('my_theme_settings');

$ klasser [] = $ my_theme_settings ['layout_setting'];

returnera $ klasser;

}

Detta lägger antingen till vänster eller. Höger sidofält till en rad kroppsklasser i ditt tema. Genom att använda dessa två klasser i ditt temas stil.css-fil kan du skapa två olika layouter. Till exempel:

/ * Sidofältet till höger är standardlayout * /
#innehåll {
flyta till vänster;
bredd: 60%;
}
#sidebar {
flottör: höger;
bredd: 30%;
}

/ * Använd klass .lift-sidofält för att åsidosätta standardlayout * /
.vänster sidofält # innehåll {
flottör: höger;
}
.vänster-sidofältet #sidebar {
flyta till vänster;
}

Bäst av allt, tack vare WordPress Theme Customizer kan användare förhandsgranska båda layouterna innan de sparar något. Ta det, temainställningssidor!

Sammanfattning och vidare läsning

TL; DR-versionen av detta inlägg skulle gå så här: Du kan få $ wp_customize-objekt och sedan antingen lägga till något (avsnitt, inställning eller kontroll) till eller ta bort från det. Allt annat kommer till inställningsparametrarna.

Del tre är där den här serien blir intressant eftersom vi börjar automatisera hela processen och arbeta med Theme Customizer Boilerplate som du kan släppa in i ditt tema och börja använda direkt. Håll dig uppdaterad!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map