WordPress Theme Customizer Kedelplade

WordPress Theme Customizer Kedelplade
  1. 1. Introduktion til WordPress Theme Customizer
  2. 2. Interagerer med WordPress Theme Customizer
  3. 3. I øjeblikket læser: WordPress Theme Customizer Kedelplade
  4. 4. Udvidelse af WordPress Theme Customizer-kedelplade
  5. 5. Tema Customizer Kedelplade – Betingede muligheder, Børnetemaer og plugins

Opdatering: Denne artikel er redigeret 19. februar 2013 for at afspejle ændringerne i Theme Customizer Boilerplate.


Forhåbentlig læste og nød du de to første indlæg i Theme Customizer-serien – Introduktion til WordPress Theme Customizer og interagere med Theme Customizer. Nu er det tid til at gå til hovedret og begynde at samle Theme Customizer-kedelplade, som du kan bruge til dine temaer. Dette indlæg indeholder et par lange blokke med kode, så vær opmærksom på inline kommentarer.

Bemærk: Hvis du hellere bare vil bruge kedelpladen med det samme, kan du downloade den fra Github og ændre felter i $ option array ved at koble til ‘thsp_cbp_options_array’ filterkrog.

Hvad vi skaber

Theme Customizer Boilerplate-katalogstruktur

Theme Customizer Boilerplate-katalogstruktur

  • customizer.php – Dette er den vigtigste Theme Customizer-kedelplade-fil, den der tilføjer sektioner, indstillinger og kontroller ved hjælp af data fra indstillingsgruppen
  • custom-controls.php – Brugerdefinerede kontrolklasser og en handlingskrog, der giver dig mulighed for at tilføje dine egne brugerdefinerede kontroller
  • helpers.php – Hjælpefunktioner, der bruges til at hente temaindstillinger, standardindstillinger osv.
  • options.php – Prøveindstillinger og en filterkrok, der giver dig mulighed for at redigere indstillingsgruppen og bruge dine egne felter
  • tilpasser-controls.css – Grundlæggende CSS til billedeudskiftet radiotilpasningskontrol

Hele ideen er at være i stand til at kopiere disse filer til en undermappe i dit temakatalog, inkludere customizer.php-fil fra din features.php og ændre alt hvad du kan lide, herunder og især indstillingerne af indstillinger ved at bruge Theme Customizer Boilerplate-kroge (forklaret i del 4). Opdatering: Tidligere ville du bare redigere option.php, men at bruge kroge gør tingene meget renere.

Lad os nu bruge et rigtigt eksempel – vi tilføjer en tekstkontrol til et nyt sektion af tematilpasning. Array’en placeres i en hjælperfunktion og har et filter påført, når det returneres. På denne måde kan du tilføje flere indstillinger fra et underordnet tema eller plugin. Her er det:

/ **
* Hjælperfunktion, der indeholder en række temaindstillinger.
*
* @ tilbagevenden array $ indstillinger Array af temaindstillinger
* @ bruger thsp_get_theme_customizer_fields () defineret i customizer / helpers.php
* /
funktion thsp_get_theme_customizer_fields () {

/ *
* Brug af hjælperfunktion for at få standard krævet kapacitet
* /
$ required_capability = thsp_settings_page_capability ();

$ optioner = matrix (


// Sektion ID
'new_customizer_section' => matrix (

/ *
* Vi kontrollerer, om dette er et eksisterende afsnit
* eller en ny, der skal registreres
* /
'eksisterende_sektion' => falsk,
/ *
* Sektionsrelaterede argumenter
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => matrix (
'title' => __ ('Ny sektionstitel', 'my_theme_textdomain'),
'description' => __ ('Ny sektionsbeskrivelse', 'my_theme_textdomain'),
'prioritet' => 10
),

/ *
* 'felter' array indeholder alle de felter, der skal være
* tilføjet til dette afsnit
* /
'felter' => matrix (

/ *
* ==========
* ==========
* Tekstfelt
* ==========
* ==========
* /
// Felt-ID
'new_text_field' => matrix (
/ *
* Indstilling af relaterede argumenter
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => matrix (
'default' => __ ('Standardtekstværdi', 'my_theme_textdomain'),
'type' => 'mulighed',
'capability' => $ required_capability,
'transport' => 'opdater',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Kontroller relaterede argumenter
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => matrix (
'label' => __ ('Ny tekstkontroletiket', 'my_theme_textdomain'),
'type' => 'tekst', // Tekstfeltkontrol
'prioritet' => 1
)
)

)

),

);

/ *
* "thsp_customizer_options" filterkrok tillader det
* tilføj / fjern nogle af disse indstillinger fra et underordnet tema
* /
returnere Apply_Filters ('thsp_customizer_options', $ optioner);

}

Opdatering: Array’en forbliver den samme, men nu kan du også videregive indstillingerne til en filterkrog, se del 4 for flere detaljer.

Ser kompliceret ud ved første øjekast, ved jeg det, men lad mig forklare det.

Det $ optioner array består af sektioner (kun en i dette tilfælde – new_customizer_section), hvert afsnit har sine argumenter, felter og en boolesk værdi (eksisterende_afsnit) for at indikere, om det er en ny sektion, eller vi tilføjer bare nogle felter til en eksisterende en. Argumentarray er identisk med det, du vil videresende til $ Wp_customize-> add_section metode. Feltserray er lidt mere kompleks.

Opdatering: valgmuligheder i kontrolargumenter er nu en multidimensionel matrix.

Hvert felt består af en Customizer-indstilling og en Customizer-kontrol. Derfor har vi indstillinger_args og control_args arrays. De er næsten nøjagtigt de samme som argumenter, arrayer, du vil videregive til $ Wp_customize-> add_setting og $ Wp_customize-> add_control metoder. Den eneste forskel er ‘valg’-matrix i kontrolargumenter, $ wp_customize-> add_control kræver, at det er en simpel nøgle => værdiparray, og vi bruger i stedet en multidimensionel matrix.

På denne måde er det muligt at videregive flere data til hver enkelt af valgene, så hvis du f.eks. Indlæser Google-skrifttyper i dit tema, vil du kunne have strenge, der giver dig mulighed for at indlæse den rigtige skrifttype inden for valg af array . Du kan se et eksempel på dette tema, der bruger Customizer Boilerplate.

Så hvis du allerede er opmærksom på disse tre metoder, er det hele meget kendt.

Tilføjelse af en afkrydsningsfeltkontrol er næsten den samme, du skal bare ændre ‘type’ til ‘afkrydsningsfelt’ i ‘kontrol_args’ array:

/ *
* ==============
* Afkrydsningsfelt
* ==============
* /
'new_checkbox_field' => matrix (
'setting_args' => matrix (
'default' => sandt,
'type' => 'mulighed',
'capability' => $ required_capability,
'transport' => 'opdater',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => matrix (
'label' => __ ('Ny radiokontrolmærke', 'my_theme_textdomain'),
'type' => 'afkrydsningsfelt', // Afkrydsningsfelt for kontrolfelt
'prioritet' => 2
)
),

Radio- og vælgekontroller er næsten de samme, du skal bare specificere de givne valg:

/ *
* ===========
* ===========
* Radiofelt
* ===========
* ===========
* /
'new_radio_field' => matrix (
'setting_args' => matrix (
'default' => 'option-2',
'type' => 'mulighed',
'capability' => $ thsp_cbp_capability,
'transport' => 'opdater',
),
'control_args' => matrix (
'label' => __ ('Ny radiokontrolmærke', 'my_theme_textdomain'),
'type' => 'radio', // Radiostyring
'valg' => matrix (
'option-1' => matrix (
'label' => __ ('Option 1', 'my_theme_textdomain')
),
'option-2' => matrix (
'label' => __ ('Option 2', 'my_theme_textdomain')
),
'option-3' => matrix (
'label' => __ ('Option 3', 'my_theme_textdomain')
)
),
'prioritet' => 3
)
),

/ *
* ============
* ============
* Vælg felt
* ============
* ============
* /
'new_select_field' => matrix (
'setting_args' => matrix (
'default' => 'option-3',
'type' => 'mulighed',
'capability' => $ thsp_cbp_capability,
'transport' => 'opdater',
),
'control_args' => matrix (
'label' => __ ('Ny markeringsfeltmærke', 'my_theme_textdomain'),
'type' => 'vælg', // Vælg kontrol
'valg' => matrix (
'option-1' => matrix (
'label' => __ ('Option 1', 'my_theme_textdomain')
),
'option-2' => matrix (
'label' => __ ('Option 2', 'my_theme_textdomain')
),
'option-3' => matrix (
'label' => __ ('Option 3', 'my_theme_textdomain')
)
),
'prioritet' => 4
)
)

Og endelig to komplekse kontroltyper, der er indbygget i WordPress – upload og fil upload:

/ *
* ===========
* ===========
* Fil upload
* ===========
* ===========
* /
'new_file_upload_field' => matrix (
'setting_args' => matrix (
'default' => '',
'type' => 'mulighed',
'capability' => $ thsp_cbp_capability,
'transport' => 'opdater',
),
'control_args' => matrix (
'label' => __ ('File upload', 'my_theme_textdomain'),
'type' => 'upload', // Fil upload feltkontrol
'prioritet' => 5
)
),

/ *
* ============
* ============
* Billed upload
* ============
* ============
* /
'new_image_upload_field' => matrix (
'setting_args' => matrix (
'default' => '',
'type' => 'mulighed',
'capability' => $ thsp_cbp_capability,
'transport' => 'opdater',
),
'control_args' => matrix (
'label' => __ ('Billed upload', 'my_theme_textdomain'),
'type' => 'billede', // Feltkontrol til billedoverførsel
'prioritet' => 6
)
)

Bemærk, at jeg brugte ‘Type’ => ‘mulighed’ ved at indstille argumenter for alle disse felter. Dette gør det muligt at gemme alle værdier som en værdi i din database. Alternativet er ‘Type’ => ‘tema_mod’ men lad os lige nu holde os med ‘mulighed’.

Brug af valgmuligheder Array til at tilføje tilpassede sektioner, indstillinger og kontroller

Hvis du ikke er sikker på, hvordan du interagerer med WordPress Theme Customizer, skal du gå og tjekke, fordi det er det, vi skal gøre nu. Den eneste forskel er, at i stedet for at tilføje sektioner, indstillinger og kontroller ad gangen, automatiserer vi processen ved hjælp af en serialiseret matrix, vi oprettede. Lad os bare hoppe ind i det:

funktion thsp_cbp_customize_register ($ wp_customize) {

/ **
* Brugerdefinerede kontroller
* /
kræve (dirname (__ FILE__). '/custom-controls.php');


/ *
* Hent alle felterne ved hjælp af en hjælperfunktion
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Få navnet på DB-posten, hvor indstillingerne gemmes
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Gå igennem matrixen, og tilføj afsnittet Customizer
* /
foreach ($ thsp_sections som $ thsp_section_key => $ thsp_section_value) {

/ **
* Tilføjer afsnittet Customizer, hvis nødvendigt
* /
if (! $ thsp_section_value ['eksisterende_sektion']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Tilføj sektion
$ Wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // Afslut Hvis

/ *
* Gå igennem 'felter' array i hvert afsnit
* og tilføj indstillinger og kontroller
* /
$ thsp_section_fields = $ thsp_section_value ['felter'];
foreach ($ thsp_section_fields som $ thsp_field_key => $ thsp_field_value) {

/ *
* Kontroller, om 'option' eller 'theme_mod' bruges til at gemme optionen
*
* Hvis der ikke er indstillet noget, vil $ wp_customize-> add_setting-metoden som standard 'tema_mod'
* Hvis 'option' bruges som indstillingstype, gemmes værdien i en post i
* {præfiks} _optionstabel. Indstillingsnavn defineres af 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. ']';
} andet {
$ setting_control_id = $ thsp_field_key;
}

/ *
* Tilføj standardopkaldsfunktion, hvis ingen er defineret
* /
if (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb'])) {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Tilføjer Customizer-indstillinger
* /
$ Wp_customize-> add_setting (
$ setting_control_id,
$ Thsp_field_value [ 'setting_args']
);

/ **
* Tilføjer Customizer-kontrol
*
* 'sektions'-værdi skal føjes til' control_args 'array
* så kontrol kan tilføjes til det aktuelle afsnit
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* $ wp_customize-> add_control-metode kræver 'valg' for at være en enkel nøgle => værdipar
* /
if (isset ($ thsp_field_value ['control_args'] ['valg'])) {
$ thsp_cbp_choices = matrix ();
foreach ($ thsp_field_value ['control_args'] ['valg'] 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;
}


// Kontroller kontroltype
if ('farve' == $ 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']
)
);
} andet {
$ Wp_customize-> add_control (
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
);
}

} // slut foreach

} // slut foreach

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

Gå igennem alle sektioner, tilføj dem, der ikke allerede findes, og derefter gennem alle felterne i hvert afsnit, tilføj en indstilling og en kontrol for hver. Det er alt, hvad der foregår her.

Husk at vi brugte ‘type’ => ‘mulighed’ til alle indstillingerne? Det er derfor, vi nu har ”My_theme_options [$ thsp_field_key]” til både indstillinger og sektioner. Dette gemmer alle værdier som en serieopstillet array, som du kan hente ved hjælp af get_option (‘my_theme_options’). Eller du kan bare bruge hjælperfunktioner defineret i helpers.php at hente både aktuelle værdier og standardværdier for alle felter:

/ **
* Hent indstillingsværdier
*
* Array, der indeholder alle indstillingsværdier
* Valgmulighedens standardværdi bruges, hvis brugeren ikke har angivet en værdi
*
* @ bruger thsp_get_theme_customizer_defaults () defineret i /customizer/options.php
* @ tilbagevenden array Aktuelle værdier for alle indstillinger
* @since Theme_Customizer_Boilerplate 1.0
* /
funktion thsp_cbp_get_options_values ​​() {

// Få standardindstillingerne
$ option_defaults = thsp_cbp_get_options_defaults ();

// Analyser de gemte indstillinger med standardindstillingerne
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), matrix ()), $ option_defaults);

// Returner den parsede matrix
returner $ thsp_cbp_options;

}


/ **
* Få standardindstillinger
*
* Returnerer en matrix, der indeholder standardværdier for alle indstillinger
*
* @ bruger thsp_get_theme_customizer_fields () defineret i /customizer/options.php
* @return array $ thsp_option_defaults Standardværdier for alle indstillinger
* @since Theme_Customizer_Boilerplate 1.0
* /
funktion thsp_cbp_get_options_defaults () {

// Hent den matrix, der indeholder alle temaindstillingsfelter
$ thsp_sections = thsp_cbp_get_fields ();

// Initialiser arrayet for at indeholde standardværdierne for alle temaindstillinger
$ thsp_option_defaults = matrix ();

// Gå igennem valgmulighedens parametre-array
foreach ($ thsp_sections som $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['felter'];

foreach ($ thsp_section_fields som $ thsp_field_key => $ thsp_field_value) {

// Føj en tilknyttet array-nøgle til standard-arrayen for hver indstilling i parametre-arrayen
if (isset ($ thsp_field_value ['setting_args'] ['default'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['default'];
} andet {
$ thsp_option_defaults [$ thsp_field_key] = falsk;
}

}

}

// Returner standardindstillingen
returner $ thsp_option_defaults;

}

Der er kun en ting mere, jeg skal nævne – sanering af tilbagekaldsfunktion, som vi specificerede i ‘setting_args’ array. Funktion er defineret i ext.php og kører ganske enkelt data igennem wp_kses_post fungere:

/ **
* Tema Customizer sanitering tilbagekaldsfunktion
* /
funktion thsp_sanitize_cb ($ input) {

return wp_kses_post ($ input);

}

Hvor man skal herfra?

Foreløbig kan du bruge denne Theme Customizer-kedelplade i dine temaer, alt hvad du behøver at gøre er at downloade den fra Github, kopiere til dit temas bibliotek og inkludere hovedfilen fra features.php, som er 100% funktionel og god nok til de fleste temaer.

Da dit tema ikke er “som de fleste temaer”, ser vi i næste uge, hvordan du udvider kedelpladen ved hjælp af dets filter og handlingskroge.

Jeg vil meget gerne høre, hvordan du synes, at denne kedelplade kunne forbedres eller udvides, så venligst fyr væk i kommentarerne.

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