WordPress Theme Customizer Kjeleplate
  1. 1. Introduksjon til WordPress Theme Customizer
  2. 2. Samhandler med WordPress Theme Customizer
  3. 3. Leser for øyeblikket: WordPress Theme Customizer Kjeleplate
  4. 4. Utvide WordPress Theme Customizer Boilerplate
  5. 5. Theme Customizer Kjeleplate – Betingede alternativer, temaer og plugins for barn

Oppdatering: Denne artikkelen er redigert 19. februar 2013 for å gjenspeile endringene som er gjort i Theme Customizer Boilerplate.


Forhåpentligvis leste og likte du de to første innleggene av Theme Customizer-serien – Introduksjon til WordPress Theme Customizer og Interacting With Theme Customizer. Nå er det på tide å gå til hovedretten og begynne å sette sammen Theme Customizer-kjeleplaten du kan bruke i temaene dine. Dette innlegget inneholder noen lange blokker med kode, så vær oppmerksom på inline-kommentarer.

Merk: Hvis du heller bare vil bruke kjeleplaten med en gang, kan du laste den ned fra Github og endre felt i $ -alternativer ved å koble til ‘thsp_cbp_options_array’ filterkrok.

Hva vi skaper

Theme Customizer Boilerplate katalogstruktur

Theme Customizer Boilerplate katalogstruktur

  • customizer.php – Dette er hovedfilen til Theme Customizer-kjeleplaten, den som legger til seksjoner, innstillinger og kontroller ved hjelp av data fra opsjonsmatrise
  • custom-controls.php – Tilpassede kontrollklasser og en handlingskrok som lar deg legge til dine egne tilpassede kontroller
  • helpers.php – Hjelperfunksjoner, brukt til å hente temaalternativer, standardinnstillinger osv.
  • options.php – Eksempelalternativer og en filterkrok som lar deg redigere valgmuligheten og bruke dine egne felt
  • tilpasser-controls.css – Grunnleggende CSS for bildeskiftet radiotilpasset kontroll

Hele ideen er å kunne kopiere disse filene til en underkatalog i temakatalogen din, inkludere customizer.php-fil fra funksjonene dine.php og endre alt du liker, inkludert og spesielt alternativmaterialet, ved å bruke Theme Customizer Boilerplate kroker (forklart i del 4). Oppdater: Tidligere ville du bare redigere options.php, men å bruke kroker gjør ting mye renere.

La oss nå bruke et ekte eksempel – vi legger til en tekstkontroll i en ny Theme Customizer-seksjon. Arrayen er plassert i en hjelperfunksjon og har et filter påført når den returneres. På denne måten kan du legge til flere alternativer fra et underordnet tema eller plugin. Her er det:

/ **
* Hjelperfunksjon som inneholder rekke temaalternativer.
*
* @ return array $ -alternativer Utvalg av temalternativer
* @ bruker thsp_get_theme_customizer_fields () definert i customizer / helpers.php
* /
funksjon thsp_get_theme_customizer_fields () {

/ *
* Bruke hjelperfunksjon for å få standard nødvendig kapasitet
* /
$ required_capability = thsp_settings_page_capability ();

$ opsjoner = matrise (


// Seksjons-ID
'new_customizer_section' => matrise (

/ *
* Vi sjekker om dette er en eksisterende seksjon
* eller en ny som må registreres
* /
'eksisterende_seksjon' => usant,
/ *
* Seksjonsrelaterte argumenter
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => matrise (
'title' => __ ('Ny seksjonstittel', 'my_theme_textdomain'),
'description' => __ ('Ny seksjonsbeskrivelse', 'my_theme_textdomain'),
'prioritet' => 10
),

/ *
* 'felt' array inneholder alle feltene som må være
* lagt til denne delen
* /
'felt' => matrise (

/ *
* ==========
* ==========
* Tekstfelt
* ==========
* ==========
* /
// Felt-ID
'new_text_field' => matrise (
/ *
* Angi relaterte argumenter
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => matrise (
'default' => __ ('Standard tekstverdi', 'my_theme_textdomain'),
'type' => 'alternativ',
'capability' => $ required_capability,
'transport' => 'oppdater',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Kontroller relaterte argumenter
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => matrise (
'label' => __ ('Ny tekstkontrolletikett', 'my_theme_textdomain'),
'type' => 'tekst', // Tekstfeltkontroll
'prioritet' => 1
)
)

)

),

);

/ *
* 'thsp_customizer_options' filterkrok lar deg gjøre det
* legg til / fjern noen av disse alternativene fra et tema for barn
* /
returnere Apply_Filters ('thsp_customizer_options', $ opsjoner);

}

Oppdater: Arrayen forblir den samme, men nå kan du også gi alternativet array til en filterkrok, se del 4 for mer informasjon.

Ser komplisert ut ved første blikk, jeg vet det, men la meg forklare.

De $ alternativer array består av seksjoner (bare en i dette tilfellet – new_customizer_section), hver seksjon har sine argumenter, felt og en boolesk verdi (eksisterende_seksjon) for å indikere om det er en ny seksjon, eller vi legger bare noen felt til en eksisterende en. Argumentasjonsarray er identisk med det du vil gi deg $ Wp_customize-> add_section metode. Feltoppstillingen er litt mer sammensatt.

Oppdater: valgmuligheter i kontrollargumenter er nå en flerdimensjonal matrise.

Hvert felt består av en Customizer-innstilling og en Customizer-kontroll. Det er derfor vi har setting_args og control_args-matriser. De er nesten nøyaktig de samme som argumenter som du vil gi til $ Wp_customize-> add_setting og $ Wp_customize-> add_control fremgangsmåter. Den eneste forskjellen er ‘valg’ -felt i kontrollargumenter. $ Wp_customize-> add_control krever at det er en enkel nøkkel => verdi-par-matrise, og vi bruker i stedet en flerdimensjonal matrise i stedet.

På denne måten er det mulig å overføre flere data til hvert av valgene, så hvis du for eksempel laster inn Google-skrifter i temaet ditt, vil du kunne ha strenger som lar deg laste riktig font i valgmulighet . Du kan se et eksempel på dette tema som bruker Customizer Boilerplate.

Så hvis du allerede er klar over disse tre metodene, er det hele veldig kjent.

Å legge til en kontrollbokskontroll er nesten det samme, du trenger bare å endre ‘type’ til ‘avkrysningsrute’ i ‘control_args’ matrise:

/ *
* ==============
* Avkrysningsfelt
* ==============
* /
'new_checkbox_field' => matrise (
'setting_args' => matrise (
'default' => sant,
'type' => 'alternativ',
'capability' => $ required_capability,
'transport' => 'oppdater',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => matrise (
'label' => __ ('Ny radiokontrolletikett', 'my_theme_textdomain'),
'type' => 'avkrysningsrute', // Kontroll av felt i avmerkingsboksen
'prioritet' => 2
)
),

Radio og utvalgskontroller er nesten de samme, du trenger bare å spesifisere gitte valg:

/ *
* ===========
* ===========
* Radiofelt
* ===========
* ===========
* /
'new_radio_field' => matrise (
'setting_args' => matrise (
'default' => 'alternativ-2',
'type' => 'alternativ',
'capability' => $ thsp_cbp_capability,
'transport' => 'oppdater',
),
'control_args' => matrise (
'label' => __ ('Ny radiokontrolletikett', 'my_theme_textdomain'),
'type' => 'radio', // Radiokontroll
'valg' => matrise (
'option-1' => matrise (
'label' => __ ('Alternativ 1', 'my_theme_textdomain')
),
'option-2' => matrise (
'label' => __ ('Alternativ 2', 'my_theme_textdomain')
),
'option-3' => matrise (
'label' => __ ('Alternativ 3', 'my_theme_textdomain')
)
),
'prioritet' => 3
)
),

/ *
* ============
* ============
* Velg felt
* ============
* ============
* /
'new_select_field' => matrise (
'setting_args' => matrise (
'default' => 'alternativ-3',
'type' => 'alternativ',
'capability' => $ thsp_cbp_capability,
'transport' => 'oppdater',
),
'control_args' => matrise (
'label' => __ ('New select field label', 'my_theme_textdomain'),
'type' => 'velg', // Velg kontroll
'valg' => matrise (
'option-1' => matrise (
'label' => __ ('Alternativ 1', 'my_theme_textdomain')
),
'option-2' => matrise (
'label' => __ ('Alternativ 2', 'my_theme_textdomain')
),
'option-3' => matrise (
'label' => __ ('Alternativ 3', 'my_theme_textdomain')
)
),
'prioritet' => 4
)
)

Og til slutt, to komplekse kontrolltyper som er innebygd i WordPress – filopplasting og bildeopplasting:

/ *
* ===========
* ===========
* Filopplasting
* ===========
* ===========
* /
'new_file_upload_field' => matrise (
'setting_args' => matrise (
'default' => '',
'type' => 'alternativ',
'capability' => $ thsp_cbp_capability,
'transport' => 'oppdater',
),
'control_args' => matrise (
'label' => __ ('Filopplasting', 'my_theme_textdomain'),
'type' => 'laste opp', // Kontroll av feltopplasting
'prioritet' => 5
)
),

/ *
* ============
* ============
* Bildeopplasting
* ============
* ============
* /
'new_image_upload_field' => matrise (
'setting_args' => matrise (
'default' => '',
'type' => 'alternativ',
'capability' => $ thsp_cbp_capability,
'transport' => 'oppdater',
),
'control_args' => matrise (
'label' => __ ('Bildeopplasting', 'my_theme_textdomain'),
'type' => 'image', // Kontroll av feltopplasting
'prioritet' => 6
)
)

Merk at jeg brukte ‘Type’ => ‘alternativ’ ved å sette argumenter for alle disse feltene. Dette gjør at alle verdiene kan lagres som en verdi i databasen din. Alternativet er ‘Type’ => ‘tema_mod’ men la oss foreløpig holde oss til ‘alternativet’.

Bruke Valg Array for å legge til tilpassede seksjoner, innstillinger og kontroller

Hvis du ikke er sikker på hvordan du skal samhandle med WordPress Theme Customizer, kan du gå og sjekke, for det er det vi skal gjøre nå. Den eneste forskjellen er at i stedet for å legge til seksjoner, innstillinger og kontroller én om gangen, vil vi automatisere prosessen ved å bruke serialiserte matriser vi opprettet. La oss bare hoppe inn i det:

funksjon thsp_cbp_customize_register ($ wp_customize) {

/ **
* Tilpassede kontroller
* /
krever (dirname (__ FILE__). '/custom-controls.php');


/ *
* Få alle feltene ved hjelp av en hjelperfunksjon
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Få navn på DB-oppføringen som alternativene vil bli lagret under
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Gå gjennom matrisen og legg til Customizer-seksjoner
* /
foreach ($ thsp_sections som $ thsp_section_key => $ thsp_section_value) {

/ **
* Legger til Customizer-delen, om nødvendig
* /
if (! $ thsp_section_value ['eksisterende_seksjon']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Legg til seksjon
$ Wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // slutt om

/ *
* Gå gjennom "felt" -feltet i hver seksjon
* og legg til innstillinger og kontroller
* /
$ thsp_section_fields = $ thsp_section_value ['felt'];
foreach ($ thsp_section_fields som $ thsp_field_key => $ thsp_field_value) {

/ *
* Sjekk om 'alternativ' eller 'tema_mod' brukes til å lagre alternativet
*
* Hvis ingenting er angitt, vil $ wp_customize-> add_setting-metoden som standard 'tema_mod'
* Hvis 'alternativet' brukes som innstillingstype, vil verdien bli lagret i en oppføring i
* {prefiks} _opsjonstabell. Alternativnavn defineres av thsp_cbp_option () -funksjonen
* /
if (isset ($ thsp_field_value ['setting_args'] ['type']) && 'option' == $ thsp_field_value ['setting_args'] ['type']) {
$ setting_control_id = $ thsp_cbp_option. '['. $ thsp_field_key. ']';
} annet {
$ setting_control_id = $ thsp_field_key;
}

/ *
* Legg til standard tilbakeringingsfunksjon, hvis ingen er definert
* /
if (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb'])) {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Legger til Customizer-innstillinger
* /
$ Wp_customize-> add_setting (
$ setting_control_id,
$ Thsp_field_value [ 'setting_args']
);

/ **
* Legger til tilpasningskontroll
*
* "seksjons" -verdi må legges til i "control_args" -feltet
* slik at kontrollen kan bli lagt til gjeldende seksjon
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* $ wp_customize-> add_control-metoden krever 'valg' for å være en enkel nøkkel => verdipar
* /
if (isset ($ thsp_field_value ['control_args'] ['valg'])) {
$ thsp_cbp_choices = matrise ();
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 kontrolltypen
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 (
nye 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 (
nye WP_Customize_Upload_Control (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
)
);
} annet {
$ Wp_customize-> add_control (
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
);
}

} // slutt foreach

} // slutt foreach

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

Gå gjennom alle seksjonene, legger til de som ikke allerede eksisterer, og går deretter gjennom alle feltene i hver seksjon, legger til en innstilling og en kontroll for hver. Det er alt som skjer her.

Husker du at vi brukte ‘type’ => ‘alternativet’ for alle innstillingene? Det er derfor vi nå har det “My_theme_options [$ thsp_field_key]” for både innstillinger og seksjoner. Dette vil lagre alle verdier som en seriell serie som du kan hente ved å bruke get_option (‘my_theme_options’). Eller du kan bare bruke hjelperfunksjoner definert i helpers.php for å hente både gjeldende verdier og standardverdier for alle felt:

/ **
* Få alternativverdier
*
* Array som inneholder alle valgverdiene
* Alternativets standardverdi brukes hvis brukeren ikke har spesifisert en verdi
*
* @uses thsp_get_theme_customizer_defaults () definert i /customizer/options.php
* @ return array Gjeldende verdier for alle alternativer
* @since Theme_Customizer_Boilerplate 1.0
* /
funksjon thsp_cbp_get_options_values ​​() {

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

// Analyser de lagrede alternativene med standardverdiene
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), matrise ()), $ option_defaults);

// Returner den parsede matrisen
returner $ thsp_cbp_options;

}


/ **
* Få standardverdier
*
* Returnerer en matrise som inneholder standardverdier for alle alternativer
*
* @ bruker thsp_get_theme_customizer_fields () definert i /customizer/options.php
* @ return array $ thsp_option_defaults Standardverdier for alle alternativer
* @since Theme_Customizer_Boilerplate 1.0
* /
funksjon thsp_cbp_get_options_defaults () {

// Få matrisen som inneholder alle temaalternativsfelt
$ thsp_sections = thsp_cbp_get_fields ();

// Initialiser matrisen for å holde standardverdiene for alle temalternativer
$ thsp_option_defaults = matrise ();

// Gå gjennom alternativet parametre array
foreach ($ thsp_seksjoner som $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['felt'];

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

// Legg til en assosiativ array-nøkkel til standard-arrayen for hvert alternativ i parameter-arrayen
if (isset ($ thsp_field_value ['setting_args'] ['default'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['default'];
} annet {
$ thsp_option_defaults [$ thsp_field_key] = falsk;
}

}

}

// Returner standardoppstillingen
returner $ thsp_option_defaults;

}

Det er bare én ting til jeg må nevne – tilbakeringingsfunksjon for sanering som vi spesifiserte i “setting_args” -feltet. Funksjon er definert i ext.php og kjører ganske enkelt data gjennom wp_kses_post funksjon:

/ **
* Theme Customizer desinfisering tilbakeringingsfunksjon
* /
funksjon thsp_sanitize_cb ($ input) {

return wp_kses_post ($ input);

}

Hvor du skal herfra?

Foreløpig kan du bruke denne Theme Customizer Boilerplate i temaene dine, alt du trenger å gjøre er å laste den ned fra Github, kopiere til temakatalogen og inkludere hovedfilen fra features.php, som er 100% funksjonell og god nok for de fleste temaer.

Siden temaet ditt ikke er “som de fleste temaer”, ser vi neste uke hvordan du utvider kjeleplaten ved å bruke filteret og handlingskrokene.

Jeg vil gjerne høre hvordan du tror at denne kjeleplaten kan forbedres eller utvides, så vennligst fyr bort i kommentarene.

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