WordPress Theme Customizer Boilerplate

WordPress Theme Customizer Boilerplate
  1. 1. Introduktion till WordPress Theme Customizer
  2. 2. Interagera med WordPress Theme Customizer
  3. 3. Läser för tillfället: 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

Uppdatering: Den här artikeln har redigerats den 19 februari 2013 för att återspegla ändringarna i Theme Customizer Boilerplate.


Förhoppningsvis läste du och tyckte om de första två inläggen av Theme Customizer-serien – Introduktion till WordPress Theme Customizer och Interacting With Theme Customizer. Nu är det dags att gå till huvudrätten och börja montera Theme Customizer-pannplatta som du kan använda i dina teman. Det här inlägget innehåller några långa block med kod, så var uppmärksam på inline-kommentarer.

Notera: Om du hellre bara vill använda pannplattan direkt kan du ladda ner den från Github och ändra fält i $ -alternativ genom att ansluta till ‘thsp_cbp_options_array’ filterkrok.

Vad vi skapar

Theme Customizer Boilerplate-katalogstruktur

Theme Customizer Boilerplate-katalogstruktur

  • customizer.php – Detta är den huvudsakliga Theme Customizer-panneplattfilen, den som lägger till sektioner, inställningar och kontroller med hjälp av data från alternativen
  • anpassade controls.php – Anpassade kontrollklasser och en actionkrok som låter dig lägga till dina egna anpassade kontroller
  • helpers.php – Hjälparfunktioner, används för att hämta temalternativ, standardinställningar osv.
  • options.php – Exempel på alternativ och en filterkrok som låter dig redigera alternativen och använda dina egna fält
  • anpassar-controls.css – Grundläggande CSS för bildbyte radioanpassad kontroll

Hela idén är att kunna kopiera dessa filer till en underkatalog i din temakatalog, inkludera customizer.php-fil från dina features.php och ändra allt du gillar, inklusive och speciellt alternativen array, genom att använda Theme Customizer Boilerplate krokar (förklarade i del 4). Uppdatering: Tidigare skulle du bara redigera options.php, men med krokar gör det mycket renare.

Låt oss nu använda ett riktigt exempel – vi lägger till en textkontroll till ett nytt tematillpassningsavsnitt. Arrayen placeras i en hjälpfunktion och har ett filter applicerat på när det returneras. På så sätt kan du lägga till fler alternativ från ett barntema eller plugin. Här är det:

/ **
* Hjälparfunktion som innehåller många temalternativ.
*
* @ return array $ optioner Array av temalternativ
* @uses thsp_get_theme_customizer_fields () definierade i customizer / helpers.php
* /
funktion thsp_get_theme_customizer_fields () {

/ *
* Använda hjälpfunktion för att få standardförmåga
* /
$ required_capability = thsp_settings_page_capability ();

$ optioner = array (


// Avsnitt ID
'new_customizer_section' => array (

/ *
* Vi kontrollerar om detta är ett befintligt avsnitt
* eller en ny som måste registreras
* /
'exist_section' => falsk,
/ *
* Avsnitt relaterade argument
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => array (
'title' => __ ('Ny sektionstitel', 'my_theme_textdomain'),
'description' => __ ('Ny sektionsbeskrivning', 'my_theme_textdomain'),
'prioritet' => 10
),

/ *
* 'fält' -fältet innehåller alla fält som måste vara
* läggs till i detta avsnitt
* /
'fält' => array (

/ *
* ==========
* ==========
* Textfält
* ==========
* ==========
* /
// Fält-ID
'new_text_field' => array (
/ *
* Ställa in relaterade argument
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => array (
'default' => __ ('Standardtextvärde', 'my_theme_textdomain'),
'typ' => 'alternativ',
'capability' => $ required_capability,
'transport' => 'uppdatera',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Kontrollera relaterade argument
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => array (
'label' => __ ('Ny textkontrolletikett', 'my_theme_textdomain'),
'type' => 'text', // Textfältkontroll
'prioritet' => 1
)
)

)

),

);

/ *
* Filterkroken 'thsp_customizer_options' gör att du kan göra det
* lägg till / ta bort några av dessa alternativ från ett barntema
* /
returnera Apply_Filters ('thsp_customizer_options', $ optioner);

}

Uppdatering: Arrayen förblir densamma, men nu kan du också skicka alternativen array till en filterkrok, se del 4 för mer information.

Ser komplicerad ut vid första anblicken, jag vet, men låt mig förklara.

De $ alternativ array består av sektioner (endast en i detta fall – new_customizer_section), varje sektion har sina argument, fält och ett booleskt värde (existens_sektion) för att indikera om det är ett nytt avsnitt, eller vi lägger bara till några fält till ett befintligt ett. Argumentmatrisen är identisk med vad du skulle skicka till $ Wp_customize-> add_section metod. Fältuppsättningen är något mer komplex.

Uppdatering: valmängd i kontrollargument är nu en multidimensionell matris.

Varje fält består av en Customizer-inställning och en Customizer-kontroll. Det är därför vi har inställning_args och control_args-matriser. De är nästan exakt samma som argumentmatriser du skulle skicka till $ Wp_customize-> add_setting och $ Wp_customize-> add_control metoder. Den enda skillnaden är “val” -fält i kontrollargument, $ wp_customize-> add_control kräver att det är en enkel nyckel => värde-par-array och vi använder en multidimensionell matris istället.

På det här sättet är det möjligt att skicka mer data till var och en av alternativen, så om du till exempel laddar Google-teckensnitt i ditt tema kommer du att kunna ha strängar som låter dig ladda rätt teckensnitt i valfältet . Du kan se ett exempel på detta tema som använder Customizer Boilerplate.

Så om du redan är medveten om dessa tre metoder är det allt mycket bekant.

Att lägga till en kontrollruta är nästan densamma, du behöver bara ändra “typ” till “kryssruta” i “kontroll_args” array:

/ *
* ==============
* Kryssrutefält
* ==============
* /
'new_checkbox_field' => matris (
'setting_args' => array (
'default' => sant,
'typ' => 'alternativ',
'capability' => $ required_capability,
'transport' => 'uppdatera',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => array (
'label' => __ ('Ny radiokontrolletikett', 'my_theme_textdomain'),
'type' => 'kryssruta', // Kontrollbox för fältkontroll
'prioritet' => 2
)
),

Radio- och väljkontroller är nästan desamma, du behöver bara ange givna val:

/ *
* ===========
* ===========
* Radiofält
* ===========
* ===========
* /
'new_radio_field' => matris (
'setting_args' => array (
'default' => 'option-2',
'typ' => 'alternativ',
'capability' => $ thsp_cbp_capability,
'transport' => 'uppdatera',
),
'control_args' => array (
'label' => __ ('Ny radiokontrolletikett', 'my_theme_textdomain'),
'type' => 'radio', // Radiokontroll
'choice' => array (
'option-1' => array (
'label' => __ ('Alternativ 1', 'my_theme_textdomain')
),
'option-2' => array (
'label' => __ ('Alternativ 2', 'my_theme_textdomain')
),
'option-3' => array (
'label' => __ ('Alternativ 3', 'my_theme_textdomain')
)
),
'prioritet' => 3
)
),

/ *
* ============
* ============
* Välj fält
* ============
* ============
* /
'new_select_field' => array (
'setting_args' => array (
'default' => 'option-3',
'typ' => 'alternativ',
'capability' => $ thsp_cbp_capability,
'transport' => 'uppdatera',
),
'control_args' => array (
'label' => __ ('New select field label', 'my_theme_textdomain'),
'type' => 'välj', // Välj kontroll
'choice' => array (
'option-1' => array (
'label' => __ ('Alternativ 1', 'my_theme_textdomain')
),
'option-2' => array (
'label' => __ ('Alternativ 2', 'my_theme_textdomain')
),
'option-3' => array (
'label' => __ ('Alternativ 3', 'my_theme_textdomain')
)
),
'prioritet' => 4
)
)

Och slutligen två komplexa kontrolltyper som är inbyggda i WordPress – filuppladdning och bildöverföring:

/ *
* ===========
* ===========
* Filuppladdning
* ===========
* ===========
* /
'new_file_upload_field' => matris (
'setting_args' => array (
'default' => '',
'typ' => 'alternativ',
'capability' => $ thsp_cbp_capability,
'transport' => 'uppdatera',
),
'control_args' => array (
'label' => __ ('Filuppladdning', 'my_theme_textdomain'),
'type' => 'upload', // File upload field control
'prioritet' => 5
)
),

/ *
* ============
* ============
* Bildöverföring
* ============
* ============
* /
'new_image_upload_field' => matris (
'setting_args' => array (
'default' => '',
'typ' => 'alternativ',
'capability' => $ thsp_cbp_capability,
'transport' => 'uppdatera',
),
'control_args' => array (
'label' => __ ('Bilduppladdning', 'my_theme_textdomain'),
'type' => 'bild', // Fältkontroll för bildöverföring
'prioritet' => 6
)
)

Observera att jag använde “Typ” => “alternativ” när du ställer in argument för alla dessa fält. Detta gör att alla värden kan lagras som ett värde i din databas. Alternativet är ‘Typ’ => ‘tema_mod’ men låt oss för närvarande hålla oss till “alternativet”.

Använda Alternativ Array för att lägga till anpassningsavsnitt, inställningar och kontroller

Om du inte är säker på hur du ska interagera med WordPress Theme Customizer, gå och kolla, eftersom det är vad vi ska göra nu. Den enda skillnaden är att i stället för att lägga till sektioner, inställningar och kontroller en i taget, automatiserar vi processen med hjälp av en seriell serie som vi skapade. Låt oss bara hoppa in i det:

funktion thsp_cbp_customize_register ($ wp_customize) {

/ **
* Anpassade kontroller
* /
kräva (dirname (__ FILE__). '/custom-controls.php');


/ *
* Få alla fält med hjälp av en hjälpfunktion
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Få namnet på DB-posten under vilka alternativen kommer att lagras
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Gå igenom matrisen och lägg till avsnitt om Customizer
* /
förhand ($ thsp_sections som $ thsp_section_key => $ thsp_section_value) {

/ **
* Lägger till Customizer-avsnittet, om det behövs
* /
if (! $ thsp_section_value ['befintlig_sektion']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Lägg till avsnitt
$ Wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // slut om

/ *
* Gå igenom "fält" -fältet i varje avsnitt
* och lägg till inställningar och kontroller
* /
$ thsp_section_fields = $ thsp_section_value ['fält'];
förhand ($ thsp_section_fields som $ thsp_field_key => $ thsp_field_value) {

/ *
* Kontrollera om 'alternativ' eller 'tema_mod' används för att lagra alternativet
*
* Om ingenting är inställt, kommer $ wp_customize-> add_setting-metoden som standard till 'tema_mod'
* Om 'alternativ' används som inställningstyp lagras dess värde i en post i
* {prefix} _options tabell. Alternativnamnet definieras av funktionen thsp_cbp_option ()
* /
if (isset ($ thsp_field_value ['setting_args'] ['type']) && 'option' == $ thsp_field_value ['setting_args'] ['type']) {
$ setting_control_id = $ thsp_cbp_option. '['. $ thsp_field_key. ']';
} annat {
$ setting_control_id = $ thsp_field_key;
}

/ *
* Lägg till standard återuppringningsfunktion, om ingen är definierad
* /
if (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb'])) {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Lägger till Customizer-inställningar
* /
$ Wp_customize-> add_setting (
$ setting_control_id,
$ Thsp_field_value [ 'setting_args']
);

/ **
* Lägger till Customizer-kontroll
*
* "sektionsvärde" måste läggas till i "control_args" -fältet
* så att kontrollen kan läggas till det aktuella avsnittet
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* $ wp_customize-> add_control-metoden kräver 'val' för att vara en enkel nyckel => värdepar
* /
if (isset ($ thsp_field_value ['control_args'] ['val'])) {
$ thsp_cbp_choices = matris ();
förhand ($ thsp_field_value ['control_args'] ['choice'] som $ thsp_cbp_choice_key => $ thsp_cbp_choice_value) {
$ thsp_cbp_choices [$ thsp_cbp_choice_key] = $ thsp_cbp_choice_value ['label'];
}
$ thsp_field_value ['control_args'] ['choice'] = $ thsp_cbp_choices;
}


// Kontrollera kontrolltyp
if ('color' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
ny WP_Customize_Color_Control (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
)
);
} elseif ('image' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
ny WP_Customize_Image_Control (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
)
);
} elseif ('upload' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
ny WP_Customize_Upload_Control (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
)
);
} annat {
$ Wp_customize-> add_control (
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
);
}

} // slutförfrågan

} // slutförfrågan

}
add_action ('customize_register', 'thsp_cbp_customize_register');

Gå igenom alla sektioner, lägga till de som inte redan finns och sedan gå igenom alla fälten i varje sektion, lägga till en inställning och en kontroll för varje. Det är allt som händer här.

Kommer du ihåg att vi använde “typ” => “alternativ” för alla inställningar? Det är därför vi nu har ”My_theme_options [$ thsp_field_key]” för både inställningar och avsnitt. Detta lagrar alla värden som en seriell serie som du kan hämta med get_option (“my_theme_options”). Eller så kan du bara använda hjälpfunktioner definierade i helpers.php för att hämta både aktuella värden och standardvärden för alla fält:

/ **
* Få alternativvärden
*
* Array som innehåller alla alternativvärden
* Alternativets standardvärde används om användaren inte har angett ett värde
*
* @uses thsp_get_theme_customizer_defaults () definierat i /customizer/options.php
* @ return array Aktuella värden för alla alternativ
* @since Theme_Customizer_Boilerplate 1.0
* /
funktion thsp_cbp_get_options_values ​​() {

// Få alternativet som standard
$ option_defaults = thsp_cbp_get_options_defaults ();

// Analysera de lagrade alternativen med standardvärdena
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), array ()), $ option_defaults);

// Returnera den parsade matrisen
returnera $ thsp_cbp_options;

}


/ **
* Få alternativ som standard
*
* Returnerar en matris som innehåller standardvärden för alla alternativ
*
* @uses thsp_get_theme_customizer_fields () definierade i /customizer/options.php
* @ return array $ thsp_option_defaults Standardvärden för alla alternativ
* @since Theme_Customizer_Boilerplate 1.0
* /
funktion thsp_cbp_get_options_defaults () {

// Hämta matrisen som innehåller alla temalternativfält
$ thsp_sections = thsp_cbp_get_fields ();

// Initiera matrisen för att hålla standardvärdena för alla temalternativ
$ thsp_option_defaults = array ();

// Gå igenom alternativet parametrar array
förhand ($ thsp_sections som $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['fält'];

förhand ($ thsp_section_fields som $ thsp_field_key => $ thsp_field_value) {

// Lägg till en associerande matrisnyckel till standardfältet för varje alternativ i parametrarrayen
if (isset ($ thsp_field_value ['setting_args'] ['default'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['default'];
} annat {
$ thsp_option_defaults [$ thsp_field_key] = falsk;
}

}

}

// Returnera standardinställningen
returnera $ thsp_option_defaults;

}

Det är bara en sak till som jag borde nämna – sanering av återuppringningsfunktion som vi angav i ‘setting_args’ -fältet. Funktionen definieras i ext.php och kör data helt enkelt igenom wp_kses_post fungera:

/ **
* Tema kundanpassning sanering återuppringning funktion
* /
funktion thsp_sanitize_cb ($ input) {

return wp_kses_post ($ input);

}

Var man ska härifrån?

För närvarande kan du använda denna Theme Customizer Boilerplate i dina teman, allt du behöver göra är att ladda ner den från Github, kopiera till ditt temas katalog och inkludera huvudfilen från features.php, som är 100% funktionell och tillräckligt bra för de flesta teman.

Eftersom ditt tema inte är “som de flesta teman” ser vi nästa vecka hur du kan utöka pannplattan med filter och actionkrokar.

Jag skulle gärna vilja höra hur du tror att den här pannplattan kan förbättras eller utvidgas, så snälla skjut bort i kommentarerna.

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