WordPress Theme Customizer -kattilalevy

WordPress Theme Customizer -kattilalevy
  1. 1. Johdanto WordPress-teeman mukauttajaan
  2. 2. Vuorovaikutus WordPress Theme Customizer -sovelluksen kanssa
  3. 3. Luettu tällä hetkellä: WordPress Theme Customizer -kattilalevy
  4. 4. WordPress-teeman räätälöintilaitteiston laajentaminen
  5. 5. Teeman mukauttajan kattilalevy – ehdolliset vaihtoehdot, lapsiteemat ja laajennukset

Päivitys: Tätä artikkelia on muokattu 19. helmikuuta 2013, jotta se heijastaa Teeman mukauttamisen kattilalevyn muutoksia.


Toivottavasti olet lukenut ja nauttinut Teeman mukauttajasarja -sarjan kahdesta ensimmäisestä viestistä – Johdatus WordPress-teeman mukauttajaan ja vuorovaikutuksesta Teeman mukauttajan kanssa. Nyt on aika siirtyä pääruoalle ja alkaa koota Teeman mukauttamisen kattilalevy, jota voit käyttää teemaissasi. Tämä viesti sisältää muutaman pitkän koodilohkon, joten kiinnitä huomiota tekstin sisäisiin kommentteihin.

merkintä: Jos haluat mieluummin vain käyttää kattilalevyä heti, voit ladata sen Githubista ja muuttaa kenttiä $ options-taulukossa kiinnittämällä ‘thsp_cbp_options_array’ -suodatinkoukkuun.

Mitä me luomme

Teeman räätälöinti Kattilalevyn hakemistorakenne

Teeman räätälöinti Kattilalevyn hakemistorakenne

  • customizer.php – Tämä on pääteeman räätälöinnin kattilatiedosto, tiedosto, joka lisää osioita, asetuksia ja ohjauksia käyttämällä lisävarustematriisin tietoja
  • tilaustyönä controls.php – Mukautetut hallintalaitteet ja toimintakoukku, jonka avulla voit lisätä omia mukautettuja säätimiä
  • helpers.php – Aputoiminnot, joita käytetään teemavaihtoehtojen, asetusten oletusarvojen jne. Hakemiseen.
  • options.php – Näyteasetukset ja suodatinkoukku, jonka avulla voit muokata asetusryhmää ja käyttää omia kenttiäsi
  • customizer-controls.css – Perus CSS kuvalle korvattu mukautettu radio

Koko idea on, että pystyt kopioimaan nämä tiedostot teemahakemiston alihakemistoon, sisällyttämään customizer.php-tiedoston function.php-tiedostoon ja muuttamaan mitä haluat, mukaan lukien ja etenkin lisävarustematriisi, käyttämällä Teeman mukauttamisen kattilalevyn koukkuja (selitetty) osassa 4). Päivittää: Aiemmin olet muokannut vain options.php: tä, mutta koukkujen käyttö tekee asioista paljon puhtaampia.

Käytämme nyt todellista esimerkkiä – lisäämme tekstiohjaimen uuteen Teeman muokkaaminen -osaan. Ryhmä asetetaan auttajatoimintoon ja siihen on asennettu suodatin palautettaessa. Tällä tavalla voit lisätä muita vaihtoehtoja alateemasta tai laajennuksesta. Tässä se on:

/ **
* Auttaja-toiminto, jolla on joukko teemavaihtoehtoja.
*
* @return array $ options Joukko teemavaihtoehtoja
* @ käyttää thsp_get_theme_customizer_fields () määritettynä räätälöintiohjelmassa / helpers.php
* /
toiminto thsp_get_theme_customizer_fields () {

/ *
* Auttajatoiminnon käyttäminen vaaditun oletuskyvyn saamiseksi
* /
$ required_capability = thsp_settings_page_capability ();

$ options = array (


// Osion tunnus
'new_customizer_section' => taulukko (

/ *
* Tarkistamme, onko tämä olemassa oleva osa
* tai uusi, joka on rekisteröitävä
* /
'olemasoleva_sekti' => väärä,
/ *
* Osioon liittyvät argumentit
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => taulukko (
'otsikko' => __ ('Uusi osion otsikko', 'minun_teeman_tekstidomain'),
'kuvaus' => __ ('Uusi osion kuvaus', 'oma_teema_tekstiverkkotunnus'),
'prioriteetti' => 10
),

/ *
* 'kentät' -ryhmä sisältää kaikki kentät, joiden on oltava
* lisätty tähän kohtaan
* /
'kentät' => taulukko (

/ *
* ==========
* ==========
* Tekstikenttä
* ==========
* ==========
* /
// Kentän tunnus
'new_text_field' => taulukko (
/ *
* Asetusten perusteiden asettaminen
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => taulukko (
'oletus' => __ ('Tekstin oletusarvo', 'Oma_theme_textdomain'),
'type' => 'option',
'valmiudet' => vaaditaan $ kapasiteetti,
'kuljetus' => 'päivitä',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Hallitse siihen liittyviä argumentteja
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => taulukko (
'label' => __ ('Uusi tekstinhallintarra', 'my_theme_textdomain'),
'type' => 'text', // Tekstikenttäohjaus
'prioriteetti' => 1
)
)

)

),

);

/ *
* 'thsp_customizer_options' -suodatinkoukku antaa sinulle mahdollisuuden
* lisätä / poistaa joitain näistä vaihtoehdoista lapsiteemasta
* /
palauta Apply_filters ('thsp_customizer_options', $ options);

}

Päivittää: Taulukko pysyy samana, mutta nyt voit myös siirtää lisävarustematriisin suodatinkoukkuun, katso lisätietoja osasta 4.

Näyttää ensi silmäyksellä monimutkaiselta, mutta annan selittää.

$ vaihtoehdot taulukko koostuu osioista (vain yksi tässä tapauksessa – uusi_asettaja_sektio), jokaisessa osiossa on argumentit, kentät ja boolean-arvo (olemassa oleva osa) osoittamaan, onko kyseessä uusi osa vai lisäämme vain joitain kenttiä olemassa olevaan yksi. Argumenttijoukko on identtinen sen kanssa, jonka siirroit $ Wp_customize-> add_section menetelmä. Kenttäryhmä on hieman monimutkaisempi.

Päivittää: valintaryhmä ohjausargumenteissa on nyt moniulotteinen taulukko.

Jokainen kenttä koostuu Customizer-asetuksesta ja Customizer-ohjaimesta. Siksi meillä on set_args- ja control_args-taulukot. Ne ovat melkein täsmälleen samat kuin argumenttiryhmät, joille lähetit $ Wp_customize-> add_setting ja $ Wp_customize-> add_control menetelmät. Ainoa ero on “valinnat” -joukko ohjausargumenteissa, $ wp_customize-> add_control edellyttää, että sen on oltava yksinkertainen avain => arvoparimatriisi ja käytämme sen sijaan moniulotteista taulukkoa.

Tällä tavalla on mahdollista siirtää enemmän tietoja jokaiselle vaihtoehdolle, joten jos lataat esimerkiksi Google Fontsia teemaasi, sinulla voi olla merkkijonoja, joiden avulla voit ladata oikean fontin valintamatriisin sisällä . Voit nähdä esimerkin tästä teema, joka käyttää Customizer Boilerplate -sovellusta.

Joten, jos tiedät jo nämä kolme menetelmää, se on kaikki hyvin tuttua.

Valintaruudun ohjauksen lisääminen on melkein sama, sinun täytyy vain muuttaa “tyyppi” “valintaruutuiksi” “control_args” -ryhmässä:

/ *
* ==============
* Valintaruutu
* ==============
* /
'new_checkbox_field' => taulukko (
'setting_args' => taulukko (
'oletus' => totta,
'type' => 'option',
'valmiudet' => vaaditaan $ kapasiteetti,
'kuljetus' => 'päivitä',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => taulukko (
'label' => __ ('Uusi radion ohjaustarra', 'my_theme_textdomain'),
'type' => 'valintaruutu', // Valintaruudun kentän hallinta
'prioriteetti' => 2
)
),

Radio- ja valitsimet ovat melkein samat, sinun on vain määritettävä annetut valinnat:

/ *
* ===========
* ===========
* Radiokenttä
* ===========
* ===========
* /
'new_radio_field' => taulukko (
'setting_args' => taulukko (
'oletus' => 'vaihtoehto-2',
'type' => 'option',
'ominaisuus' => $ thsp_cbp_capability,
'kuljetus' => 'päivitä',
),
'control_args' => taulukko (
'label' => __ ('Uusi radion ohjaustarra', 'my_theme_textdomain'),
'type' => 'radio', // Radio-ohjaus
'valinnat' => taulukko (
'vaihtoehto-1' => taulukko (
'label' => __ ('Vaihtoehto 1', 'my_theme_textdomain')
),
'vaihtoehto-2' => taulukko (
'label' => __ ('Vaihtoehto 2', 'my_theme_textdomain')
),
'vaihtoehto-3' => taulukko (
'label' => __ ('Vaihtoehto 3', 'my_theme_textdomain')
)
),
'prioriteetti' => 3
)
),

/ *
* ============
* ============
* Valitse kenttä
* ============
* ============
* /
'new_select_field' => taulukko (
'setting_args' => taulukko (
'oletus' => 'vaihtoehto-3',
'type' => 'option',
'ominaisuus' => $ thsp_cbp_capability,
'kuljetus' => 'päivitä',
),
'control_args' => taulukko (
'label' => __ ('Uusi valitun kentän tunniste', 'oma_theme_tekstiverkkotunnus'),
'type' => 'select', // Valitse ohjaus
'valinnat' => taulukko (
'vaihtoehto-1' => taulukko (
'label' => __ ('Vaihtoehto 1', 'my_theme_textdomain')
),
'vaihtoehto-2' => taulukko (
'label' => __ ('Vaihtoehto 2', 'my_theme_textdomain')
),
'vaihtoehto-3' => taulukko (
'label' => __ ('Vaihtoehto 3', 'my_theme_textdomain')
)
),
'prioriteetti' => 4
)
)

Ja lopuksi, kaksi monimutkaista ohjaustyyppiä, jotka on integroitu WordPressiin – tiedostojen lähettäminen ja kuvan lähettäminen:

/ *
* ===========
* ===========
* Tiedoston lataus
* ===========
* ===========
* /
'new_file_upload_field' => taulukko (
'setting_args' => taulukko (
'oletus' => '',
'type' => 'option',
'ominaisuus' => $ thsp_cbp_capability,
'kuljetus' => 'päivitä',
),
'control_args' => taulukko (
'label' => __ ('Tiedoston lataus', 'minun_theme_textdomain'),
'type' => 'upload', // Tiedoston latauskentän hallinta
'prioriteetti' => 5
)
),

/ *
* ============
* ============
* Kuvan lataus
* ============
* ============
* /
'new_image_upload_field' => taulukko (
'setting_args' => taulukko (
'oletus' => '',
'type' => 'option',
'ominaisuus' => $ thsp_cbp_capability,
'kuljetus' => 'päivitä',
),
'control_args' => taulukko (
'label' => __ ('Image upload', 'my_theme_textdomain'),
'type' => 'image', // Kuvan latauskentän hallinta
'prioriteetti' => 6
)
)

Huomaa, että käytin ‘Type’ => ‘option’ asettamalla argumentteja kaikille näille kentille. Tämän avulla kaikki arvot voidaan tallentaa yhdeksi arvoksi tietokantaan. Vaihtoehto on ‘Type’ => ‘teema_mod’ mutta nyt pidetään kiinni vaihtoehdosta.

Valintamatriisin käyttäminen mukauttajan osien, asetusten ja säätimien lisäämiseen

Jos et ole varma miten olla vuorovaikutuksessa WordPress Theme Customizer -sovelluksen kanssa, mene ja tarkista, koska me teemme sitä nyt. Ainoa ero on, että sen sijaan, että lisäämme osioita, asetuksia ja säätimiä kerrallaan, automatisoimme prosessin luomallamme sarjoitetulla taulukolla. Hyppäämme siihen vain:

toiminto thsp_cbp_customize_register ($ wp_customize) {

/ **
* Mukautetut säätimet
* /
vaadi (dirname (__ FILE__). '/ custom -controls.php');


/ *
* Hanki kaikki kentät auttajatoiminnolla
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Hanki DB-merkinnän nimi, johon asetukset tallennetaan
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Siirry taulukon läpi ja lisää Customizer-osiot
* /
foreach ($ thsp_section muodossa $ thsp_section_key => $ thsp_section_value) {

/ **
* Lisää Customizer-osion tarvittaessa
* /
if (! $ thsp_section_value ['olemasoleva_sekti']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Lisää osio
$ Wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // loppu Jos

/ *
* Seuraa "kentti" -ryhmää jokaisessa osassa
* ja lisää asetukset ja säätimet
* /
$ thsp_section_fields = $ thsp_section_value ['kentät'];
foreach ($ thsp_section_-kentät muodossa $ thsp_field_key => $ thsp_field_value) {

/ *
* Tarkista, käytetäänkö vaihtoehtoa 'teema' tai 'teema_modia' vaihtoehdon tallentamiseen
*
* Jos mitään ei ole asetettu, $ wp_customize-> add_setting menetelmä on oletusarvoisesti 'teema_mod'
* Jos asetustyyppinä käytetään vaihtoehtoa, sen arvo tallennetaan kohtaan
* {etuliite} _optioitaulukko. Vaihtoehdon nimi määritetään toiminnolla 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. ']';
} muuta {
$ setting_control_id = $ thsp_field_key;
}

/ *
* Lisää oletussoitto-toiminto, jos mitään ei määritetä
* /
if (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb']))) {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Lisää Customizer-asetukset
* /
$ Wp_customize-> add_setting (
$ setting_control_id,
$ Thsp_field_value [ 'setting_args']
);

/ **
* Lisää Customizer-ohjauksen
*
* 'section' -arvo on lisättävä 'control_args' -ryhmään
* joten ohjaus voidaan lisätä nykyiseen osaan
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* $ wp_customize-> add_control -menetelmä vaatii 'valintojen' olevan yksinkertainen avain => arvopari
* /
if (isset ($ thsp_field_value ['control_args'] ['options']))) {
$ thsp_cbp_choices = taulukko ();
foreach ($ thsp_field_value ['control_args'] ['options'] muodossa $ 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'] ['options'] = $ thsp_cbp_choices;
}


// Tarkista ohjaustyyppi
if ('väri' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
uusi 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 (
uusi 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 (
uusi WP_Customize_Upload_Control (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
)
);
} muuta {
$ Wp_customize-> add_control (
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
);
}

} // lopeta esikuva

} // lopeta esikuva

}
add_action ('räätälöintirekisteri', 'thsp_cbp_customize_register');

Käy läpi kaikki osiot, lisätään ne, joita ei vielä ole, läpi sen jälkeen kunkin osion kaikki kentät, lisäämällä asetukset ja säätimet jokaiselle. Se on kaikki mitä täällä tapahtuu.

Muista, että käytimme “type” => “option” kaikissa asetuksissa? Siksi meillä on nyt ”My_theme_options [$ thsp_field_key]” sekä asetuksille että osioille. Tämä tallentaa kaikki arvot yhtenä sarjamuotona taulukkona, jonka voit hakea käyttämällä get_option (‘my_theme_options’). Tai voit käyttää vain kohdassa määriteltyjä auttajatoimintoja helpers.php noutaa kaikkien kenttien nykyiset ja oletusarvot:

/ **
* Hanki optio-arvot
*
* Matriisi, joka sisältää kaikki vaihtoehtoarvot
* Option oletusarvoa käytetään, jos käyttäjä ei ole määrittänyt arvoa
*
* @käyttää thsp_get_theme_customizer_defaults () määritettynä /customizer/options.php
* @vaihtotaulukko Kaikkien asetusten nykyiset arvot
* @since Theme_Customizer_Boilerplate 1.0
* /
toiminto thsp_cbp_get_options_values ​​() {

// Hanki vaihtoehdon oletusasetukset
$ option_defaults = thsp_cbp_get_options_defaults ();

// jäsentä tallennetut asetukset oletusasetuksilla
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), array ()), $ option_defaults);

// Palauta jäsennetty taulukko
palauta $ thsp_cbp_options;

}


/ **
* Hanki vaihtoehdon oletukset
*
* Palauttaa taulukon, joka sisältää kaikkien asetusten oletusarvot
*
* @ käyttää thsp_get_theme_customizer_fields () määritettynä /customizer/options.php
* @return array $ thsp_option_defaults Kaikkien asetusten oletusarvot
* @since Theme_Customizer_Boilerplate 1.0
* /
toiminto thsp_cbp_get_options_defaults () {

// Hanki taulukko, joka sisältää kaikki teemavaihtoehtokentät
$ thsp_sections = thsp_cbp_get_fields ();

// Alusta taulukko pitämään kaikkien teemavaihtoehtojen oletusarvot
$ thsp_option_defaults = taulukko ();

// Selaa vaihtoehtoparametrijärjestelmää
foreach ($ thsp_sections kuin $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['kentät'];

foreach ($ thsp_section_-kentät muodossa $ thsp_field_key => $ thsp_field_value) {

// Lisää assosiatiivinen taulukkoavain parametrimatriisin kunkin vaihtoehdon oletusarvoon
if (isset ($ thsp_field_value ['setting_args'] ['oletus']))) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['oletus'];
} muuta {
$ thsp_option_defaults [$ thsp_field_key] = false;
}

}

}

// Palauta oletusarvo
palauta $ thsp_option_defaults;

}

Mainittakoon vielä yksi asia – puhdistuspuhelutoiminto, jonka määrittelimme ‘set_args’ -ryhmässä. Toiminto on määritelty exten.php: ssä ja yksinkertaisesti kuljettaa tietoja läpi wp_kses_post toimia:

/ **
* Teeman räätälöinnin puhtaanapito-toiminto
* /
toiminto thsp_sanitize_cb ($ input) {

return wp_kses_post ($ input);

}

Mistä täältä?

Toistaiseksi voit käyttää tätä Teeman mukauttamisen kattilalevyä teemoissasi. Sinun tarvitsee vain ladata se Githubista, kopioida teeman hakemistoon ja sisällyttää päätiedosto function.php, joka on 100% toimiva ja riittävän hyvä useimmille teemat.

Koska teemasi ei ole ”kuten useimmat teemat”, näemme ensi viikolla kuinka laajentaa kattilalevyä sen suodatin- ja toimintakoukkujen avulla.

Haluaisin kuulla, kuinka luulet tämän kattilalevyn parantavan tai laajentavan, joten pyyhkäise kommentteja.

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