WordPress tema za prilagajanje kotlovske plošče

WordPress tema za prilagajanje kotlovske plošče
  1. 1. Uvod v program za prilagajanje teme WordPress
  2. 2. Interakcija s programom za prilagajanje tem WordPress
  3. 3. Trenutno bere: WordPress tema za prilagajanje kotlovske plošče
  4. 4. Razširitev kotlovske plošče za prilagajanje teme WordPress
  5. 5. Oprema za prilagajanje tem kotlovske plošče – pogojne možnosti, otroške teme in vtičniki

Posodobitev: Ta članek je bil urejen 19. februarja 2013, da odraža spremembe, izvedene na plošči kotla za prilagajanje tem.


Upajmo, da ste prebrali in uživali v prvih dveh objavah iz serije prilagajalcev tem – Uvod v orodje za prilagajanje teme WordPress in interakcija s programom za prilagajanje tem. Zdaj je čas, da se premaknete na glavno jed in začnete sestavljati kotlovsko ploščo Theme Customizer, ki jo boste lahko uporabljali v svojih temah. Ta objava vsebuje nekaj dolgih blokov kode, zato bodite pozorni na vdelane komentarje.

Opomba: Če bi raje takoj uporabili kotlovsko ploščo, jo lahko prenesete iz Github-a in spremenite polja v nizu $ options, tako da se priklopite na kljuko filtra ‘thsp_cbp_options_array’.

Kaj ustvarjamo

Struktura imenika teme prilagajalnika teme

Struktura imenika teme prilagajalnika teme

  • customizer.php – To je glavna datoteka tematske plošče za prilagajanje teme, tista, ki doda razdelke, nastavitve in kontrole z uporabo podatkov iz nizov možnosti
  • custom-controls.php – Razredi kontrol po meri in akcijski kavelj, ki vam omogoča, da dodate svoje lastne kontrole po meri
  • helpers.php – Pomožne funkcije, ki se uporabljajo za iskanje možnosti tem, privzetih možnosti itd.
  • options.php – Vzorčne možnosti in kavelj filtra, ki omogoča urejanje niza možnosti in uporabo lastnih polj
  • customizer-controls.css – Osnovni CSS za nadzor nad sliko nadomeščen s radiom

Celotna ideja je, da lahko te datoteke kopirate v podimenik v svojem tematskem imeniku, vključite datoteko customizer.php iz svoje funkcije.php in spremenite vse, kar vam je všeč, vključno s področja in še posebej možnosti, z uporabo kljuk Theme Customizer Boilerplate (razloženo v delu 4). Nadgradnja: Prej bi samo urejali options.php, vendar z uporabo kavljev stvari postanejo bistveno bolj čiste.

Zdaj pa uporabimo resničen primer – dodali bomo besedilni nadzor v nov razdelek za prilagajanje tem. Niz je postavljen v pomožni funkcijo in ob vrnitvi je nanj nameščen filter. Tako lahko dodate več možnosti iz otroške teme ali vtičnika. Tukaj je:

/ **
* Pomožna funkcija, ki vsebuje vrsto možnosti teme.
*
* @return array $ options Niz možnosti tem
* @uses thsp_get_theme_customizer_fields (), opredeljeno v customizer / helpers.php
* /
funkcija thsp_get_theme_customizer_fields () {

/ *
* S pomočjo pomožne funkcije pridobite privzeto zahtevane zmogljivosti
* /
$ Requir_capability = thsp_settings_page_capability ();

$ options = matrika (


// ID oddelka
'new_customizer_section' => matrika (

/ *
* Preverjamo, ali gre za obstoječi razdelek
* ali novega, ki ga je treba registrirati
* /
'obstoječa_sekcija' => napačna,
/ *
* Argumenti, povezani z oddelkom
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => matrika (
'title' => __ ('Naslov novega razdelka', 'my_theme_textdomain'),
'description' => __ ('Nov opis razdelka', 'my_theme_textdomain'),
'prioriteta' => 10
),

/ *
* polje 'polja' vsebuje vsa potrebna polja
* dodano v ta razdelek
* /
'polja' => matrika (

/ *
* ==========
* ==========
* Besedilno polje
* ==========
* ==========
* /
// ID polja
'new_text_field' => matrika (
/ *
* Nastavitev povezanih argumentov
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => matrika (
'default' => __ ('Privzeta vrednost besedila', 'my_theme_textdomain'),
'tip' => 'možnost',
'zmogljivost' => $ zahtevana_možnost,
'transport' => 'osveži',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Nadzor povezanih argumentov
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => matrika (
'label' => __ ('Nova oznaka nadzora besedila', 'my_theme_textdomain'),
'type' => 'text', // Nadzor besedilnega polja
'prioriteta' => 1
)
)

)

),

);

/ *
* "Filter" thsp_customizer_options "vam bo omogočil
* dodajte / odstranite nekatere od teh možnosti iz podrejene teme
* /
vrniti apply_filters ('thsp_customizer_options', $ opcije);

}

Nadgradnja: Niz ostane enak, zdaj pa lahko matriko možnosti prenesete tudi na filterski kavelj, za podrobnosti glejte 4. del..

Na prvi pogled izgleda zapleteno, vem, ampak naj pojasnim.

The $ možnosti matrika je sestavljena iz razdelkov (samo enega v tem primeru – new_customizer_section), vsak odsek ima svoje argumente, polja in logično vrednost (obstoječa_sekcija), ki označuje, ali gre za nov razdelek, ali pa le dodajamo nekatera polja obstoječemu eno. Niz argumentov je enak tistemu, ki mu pošljete $ wp_customize-> add_section metoda. Niz polj je nekoliko bolj zapleten.

Nadgradnja: izbira matrika v nadzornih argumentih je zdaj večdimenzionalni niz.

Vsako polje je sestavljeno iz nastavitve Customizerja in gumba Customizer. Zato imamo nastavitve_args in matrike control_args. So skoraj popolnoma enaki argumentom nizov, ki bi jih posredovali $ wp_customize-> add_setting in $ wp_customize-> add_control metod. Edina razlika je matrika ‘izbire’ v nadzornih argumentih, $ wp_customize-> add_control zahteva, da gre za preprost niz ključ => vrednost in namesto tega uporabljamo večrazsežni niz.

Na ta način je možno vsakemu od možnosti posredovati več podatkov, če na primer v svojo temo nalagate Google Fontove, boste lahko imeli strune, ki omogočajo nalaganje pravilne pisave v niz izbir . Lahko vidite primer tega tema, ki uporablja kotlovno ploščo Customizer.

Če ste že poznali te tri metode, so vsi zelo znani.

Če dodate potrditveno polje skoraj enako, morate le spremeniti ‘tip’ v ‘potrditveno polje’ v polju ‘control_args’:

/ *
* ==============
* Polje za potrditve
* ==============
* /
'new_checkbox_field' => matrika (
'setting_args' => matrika (
'privzeto' => res,
'tip' => 'možnost',
'zmogljivost' => $ zahtevana_možnost,
'transport' => 'osveži',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => matrika (
'label' => __ ('Nova oznaka za nadzor radia', 'my_theme_textdomain'),
'type' => 'checkbox', // kontrola polja
'prioriteta' => 2
)
),

Kontrole za radio in izbiro so skoraj enake, le določiti morate določene možnosti:

/ *
* ============
* ============
* Radijsko polje
* ============
* ============
* /
'new_radio_field' => matrika (
'setting_args' => matrika (
'privzeto' => 'možnost-2',
'tip' => 'možnost',
'zmogljivost' => $ thsp_cbp_capability,
'transport' => 'osveži',
),
'control_args' => matrika (
'label' => __ ('Nova oznaka za nadzor radia', 'my_theme_textdomain'),
'type' => 'radio', // Radio nadzor
'izbire' => matrika (
'možnost-1' => matrika (
'label' => __ ('Možnost 1', 'my_theme_textdomain')
),
'možnost-2' => matrika (
'label' => __ ('Možnost 2', 'my_theme_textdomain')
),
'možnost-3' => matrika (
'label' => __ ('Možnost 3', 'my_theme_textdomain')
)
),
'prioriteta' => 3
)
),

/ *
* ============
* ============
* Izberite polje
* ============
* ============
* /
'new_select_field' => matrika (
'setting_args' => matrika (
'privzeto' => 'možnost-3',
'tip' => 'možnost',
'zmogljivost' => $ thsp_cbp_capability,
'transport' => 'osveži',
),
'control_args' => matrika (
'label' => __ ('Nova oznaka izbranega polja', 'my_theme_textdomain'),
'type' => 'select', // Izberi nadzor
'izbire' => matrika (
'možnost-1' => matrika (
'label' => __ ('Možnost 1', 'my_theme_textdomain')
),
'možnost-2' => matrika (
'label' => __ ('Možnost 2', 'my_theme_textdomain')
),
'možnost-3' => matrika (
'label' => __ ('Možnost 3', 'my_theme_textdomain')
)
),
'prioriteta' => 4
)
)

In končno, dve zapleteni vrsti nadzora, ki sta vgrajeni v WordPress – nalaganje datotek in nalaganje slik:

/ *
* ============
* ============
* Nalaganje datoteke
* ============
* ============
* /
'new_file_upload_field' => matrika (
'setting_args' => matrika (
'privzeto' => '',
'tip' => 'možnost',
'zmogljivost' => $ thsp_cbp_capability,
'transport' => 'osveži',
),
'control_args' => matrika (
'label' => __ ('Nalaganje datotek', 'my_theme_textdomain'),
'type' => 'upload', // Nadzor polja za prenos datotek
'prioriteta' => 5
)
),

/ *
* ============
* ============
* Nalaganje slik
* ============
* ============
* /
'new_image_upload_field' => matrika (
'setting_args' => matrika (
'privzeto' => '',
'tip' => 'možnost',
'zmogljivost' => $ thsp_cbp_capability,
'transport' => 'osveži',
),
'control_args' => matrika (
'label' => __ ('Nalaganje slik', 'my_theme_textdomain'),
'type' => 'image', // Nadzor polja za prenos slike
'prioriteta' => 6
)
)

Upoštevajte, da sem uporabil ‘Tip’ => ‘možnost’ pri postavljanju argumentov za vsa ta polja. To bo omogočilo shranjevanje vseh vrednosti kot ene vrednosti v vaši bazi podatkov. Alternativa je ‘Type’ => ‘theme_mod’ zaenkrat pa se držimo možnosti ‘možnost’.

Uporaba možnosti Niz za dodajanje odsekov, nastavitev in kontrolnikov za prilagajanje

Če niste prepričani, kako komunicirati z orodjem za prilagajanje teme WordPress, pojdite in preverite, ker to zdaj počnemo. Edina razlika je v tem, da bomo namesto dodajanja posameznih odsekov, nastavitev in krmiljenja postopek avtomatizirali z uporabo serializiranega niza, ki smo ga ustvarili. Samo skočimo vanj:

funkcija thsp_cbp_customize_register ($ wp_customize) {

/ **
* Nadzor po meri
* /
zahtevati (ime dirname (__ FILE__). '/custom-controls.php');


/ *
* Pridobite vsa polja s pomočjo pomožne funkcije
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Pridobite ime vnosa v DB, pod katerim bodo shranjene možnosti
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Skozi matriko in dodaj razdelke za prilagajanje
* /
foreach ($ thsp_sections kot $ thsp_section_key => $ thsp_section_value) {

/ **
* Po potrebi doda razdelek za prilagajanje
* /
if (! $ thsp_section_value ['obstoječa_sekcija']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Dodaj razdelek
$ wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // konec, če

/ *
* V vsakem razdelku preletite niz polja
* in dodajte nastavitve in kontrole
* /
$ thsp_section_fields = $ thsp_section_value ['polja'];
foreach ($ thsp_section_fields kot $ thsp_field_key => $ thsp_field_value) {

/ *
* Preverite, ali je za shranjevanje možnosti uporabljena 'option' ali 'theme_mod'
*
* Če nič ni nastavljeno, bo metoda $ wp_customize-> add_setting privzeto nastavljena na 'theme_mod'
* Če je kot nastavitvena vrsta uporabljena 'možnost', bo njena vrednost shranjena v vnosu
* {predpona} _ tabela možnosti. Ime možnosti je določeno s funkcijo 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. ']';
} else {
$ setting_control_id = $ thsp_field_key;
}

/ *
* Dodajte privzeto funkcijo povratnega klica, če ni definirana nobena
* /
if (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb'])) {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Doda nastavitve po meri
* /
$ wp_customize-> add_setting (
$ settings_control_id,
$ thsp_field_value ['nastavitev_args']
);

/ **
* Doda kontrolo po meri
*
* V polje 'control_args' je treba dodati vrednost 'section'
* tako se lahko nadzor doda v trenutni razdelek
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* metoda $ wp_customize-> add_control zahteva, da so 'izbire' preprost ključ => vrednostni par
* /
if (isset ($ thsp_field_value ['control_args'] ['izbire'])) {
$ thsp_cbp_choices = array ();
foreach ($ thsp_field_value ['control_args'] ['izbire'] kot $ 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'] ['izbire'] = $ thsp_cbp_choices;
}


// Preverite tip nadzora
if ('color' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
nov WP_Customize_Color_Control (
$ wp_prilagodite,
$ settings_control_id,
$ thsp_field_value ['control_args']
)
);
} elseif ('image' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
nov WP_Customize_Image_Control (
$ wp_prilagodite,
$ settings_control_id,
$ thsp_field_value ['control_args']
)
);
} elseif ('upload' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
nov WP_Customize_Upload_Control (
$ wp_prilagodite,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} else {
$ wp_customize-> add_control (
$ settings_control_id,
$ thsp_field_value ['control_args']
);
}

} // konec foreach

} // konec foreach

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

Preglejte vse razdelke in dodajte tiste, ki že ne obstajajo, nato pa prečkajte vsa polja v vsakem odseku in dodate nastavitev in nadzor. To se dogaja tukaj.

Se spomnite, da smo za vse nastavitve uporabili ‘type’ => ‘option’? Zato to zdaj imamo “My_theme_options [$ thsp_field_key]” tako za nastavitve kot za razdelke. Vse vrednosti bodo shranjene kot en zaporedni niz, ki ga lahko pridobite z uporabo get_option (“my_theme_options”). Lahko pa uporabite tudi pomožne funkcije, definirane v helpers.php za pridobitev trenutnih in privzetih vrednosti za vsa polja:

/ **
* Pridobite vrednosti možnosti
*
* Niz, ki vsebuje vse vrednosti možnosti
* Privzeta vrednost opcije se uporablja, če uporabnik ni določil vrednosti
*
* @uses thsp_get_theme_customizer_defaults (), opredeljeno v /customizer/options.php
* @return matrika Trenutne vrednosti za vse možnosti
* @since Theme_Customizer_Boilerplate 1.0
* /
funkcija thsp_cbp_get_options_values ​​() {

// Pridobite privzete možnosti
$ option_defaults = thsp_cbp_get_options_defaults ();

// Razdelite shranjene možnosti s privzetimi nastavitvami
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), array ()), $ option_defaults);

// Vrnite razčlenjeno matriko
vrni $ thsp_cbp_options;

}


/ **
* Pridobite privzete možnosti
*
* Vrne matriko, ki vsebuje privzete vrednosti za vse možnosti
*
* @uses thsp_get_theme_customizer_fields (), opredeljeno v /customizer/options.php
* @return matrika $ thsp_option_defaults Privzete vrednosti za vse možnosti
* @since Theme_Customizer_Boilerplate 1.0
* /
funkcija thsp_cbp_get_options_defaults () {

// Pridobite matriko, ki vsebuje vsa polja možnosti teme
$ thsp_sections = thsp_cbp_get_fields ();

// Inicializirajte matriko, da zadrži privzete vrednosti za vse možnosti teme
$ thsp_option_defaults = array ();

// Skozi matriko parametrov
foreach ($ thsp_sections kot $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['polja'];

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

// Dodajte asociativni ključ matrike matriki privzetih nastavitev za vsako možnost v polju parametrov
if (isset ($ thsp_field_value ['setting_args'] ['default'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['settings_args'] ['privzeto'];
} else {
$ thsp_option_defaults [$ thsp_field_key] = napačno;
}

}

}

// Vrni niz privzetih
vrni $ thsp_option_defaults;

}

Omeniti moram še eno stvar – sanilizacijsko funkcijo povratnega klica, ki smo jo določili v matriki ‘settings_args’. Funkcija je določena v extension.php in preprosto zažene podatke skozi wp_kses_post funkcija:

/ **
* Funkcija povratne klice sanizatorja teme
* /
funkcija thsp_sanitize_cb ($ input) {

vrne wp_kses_post ($ input);

}

Kam od tu?

Zaenkrat lahko to tematsko ploščo za prilagajanje teme uporabite v svojih temah, vse, kar morate storiti, je, da jo naložite iz Github-a, kopirate v imenik svoje teme in vključite glavno datoteko iz funkcije.php, ki je 100% funkcionalna in dovolj dobra za večino teme.

Ker vaša tema ni “kot večina tem”, bomo naslednji teden videli, kako podaljšati ploščo s pomočjo filtra in akcijskih kavljev.

Zelo rad bi slišal, kako mislite, da bi lahko to kotlovnico izboljšali ali razširili, zato vas prosimo, da zapustite komentarje.

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