WordPress Tema Customizer Boilerplate

WordPress Tema Customizer Boilerplate
  1. 1. Panimula Sa Ang WordPress Tema Customizer
  2. 2. Pakikipag-ugnay Sa Customizer ng WordPress Tema
  3. 3. Kasalukuyang nagbabasa: WordPress Tema Customizer Boilerplate
  4. 4. Pagpapalawak ng WordPress Theme Customizer Boilerplate
  5. 5. Tema Customizer Boilerplate – Mga Pagpipilian sa Kondisyon, Mga Tema ng Bata at Plugin

Update: Ang artikulong ito ay na-edit noong ika-19 ng Pebrero 2013, upang ipakita ang mga pagbabago na ginawa sa Tema Customizer Boilerplate.


Sana basahin at nasiyahan ka muna sa dalawang post ng serye ng Tema Customizer – Panimula sa WordPress Tema Customizer at Pakikipag-ugnay Sa Customizer ng Tema. Ngayon na ang oras upang lumipat sa pangunahing kurso at simulang i-assemble ang Boilerplate ng Customizer ng Tema magagawa mong magamit sa iyong mga tema. Naglalaman ang post na ito ng ilang mahabang mga bloke ng code, kaya bigyang pansin ang mga inline na komento.

Tandaan: Kung gagamitin mo lamang ang boilerplate kaagad, maaari mong i-download ito mula sa Github at baguhin ang mga patlang sa hanay ng $ pagpipilian sa pamamagitan ng pag-hook sa ‘thsp_cbp_options_array’ filter hook.

Ano ang Aming Lumilikha

Ang istraktura ng direktoryo ng Boilerplate ng Tema ng Tema

Ang istraktura ng direktoryo ng Boilerplate ng Tema ng Tema

  • customizer.php – Ito ang pangunahing file ng Customizer Boilerplate ng Tema, ang isa na nagdaragdag ng mga seksyon, mga setting at mga kontrol gamit ang data mula sa hanay ng mga pagpipilian
  • pasadyang-kontrol.php – Mga kontrol sa pasadyang klase at isang hook hook na nagbibigay-daan sa iyo upang magdagdag ng iyong sariling pasadyang mga kontrol
  • mga katulong.php – Mga function ng Helper, ginamit upang makuha ang mga pagpipilian sa tema, mga default na pagpipilian atbp.
  • mga pagpipilian.php – Mga halimbawang pagpipilian at isang filter hook na nagbibigay-daan sa iyo upang i-edit ang mga pagpipilian sa hanay at gamitin ang iyong sariling mga patlang
  • customizer-control.css – Pangunahing CSS para sa imahe na pinalitan ng kontrol ng pasadyang radio

Ang buong ideya ay upang kopyahin ang mga file na ito sa isang subdirektoryo sa iyong direktoryo ng tema, isama ang customizer.php file mula sa iyong mga function.php at baguhin ang anumang gusto mo, kabilang ang at lalo na ang mga pagpipilian ng array, sa pamamagitan ng paggamit ng Mga Tema ng hook Customer Boilerplate (ipinaliwanag sa Bahagi 4). I-update: Dati, mag-edit ka lang ng mga pagpipilian.php, ngunit ang paggamit ng mga kawit ay ginagawang mas malinis.

Gumamit na tayo ngayon ng isang tunay na halimbawa – magdagdag kami ng isang kontrol sa teksto sa isang bagong seksyon ng Tema Customizer. Ang array ay inilalagay sa isang katulong ng isang katulong at may isang filter na inilapat dito kapag bumalik. Sa ganitong paraan maaari kang magdagdag ng higit pang mga pagpipilian mula sa isang tema o plugin ng bata. Heto na:

/ **
* Helper function na humahawak ng hanay ng mga pagpipilian sa tema.
*
* @return array $ pagpipilian Array ng mga pagpipilian sa tema
* @uses thsp_get_theme_customizer_fields () tinukoy sa customizer / helpers.php
* /
function thsp_get_theme_customizer_fields () {

/ *
* Paggamit ng katulong ng katulong upang makakuha ng kinakailangang default na kakayahan
* /
$ kinakailangan_capability = thsp_settings_page_capability ();

$ pagpipilian = array


// Seksyon ID
'new_customizer_section' => array

/ *
* Sinuri namin kung mayroon itong isang seksyon
* o isang bago na kailangang mairehistro
* /
'mayroon_section' => maling,
/ *
* Mga kaugnay na mga argumento ng seksyon
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => array (
'title' => __ ('Pamagat ng Bagong Seksyon', 'my_theme_textdomain'),
'paglalarawan' => __ ('Bagong paglalarawan ng seksyon', 'my_theme_textdomain'),
'priority' => 10
),

/ *
* 'Mga patlang' na hanay ay naglalaman ng lahat ng mga patlang na kailangang maging
* idinagdag sa seksyon na ito
* /
'mga patlang' => array (

/ *
* ==========
* ==========
* Patlang ng teksto
* ==========
* ==========
* /
// Field ID
'new_text_field' => array (
/ *
* Pagtatakda ng mga kaugnay na argumento
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => array (
'default' => __ ('Default na halaga ng teksto', 'my_theme_textdomain'),
'type' => 'pagpipilian',
'kakayahan' => $ kinakailangan_capability,
'transport' => 'i-refresh',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Kontrol ang mga kaugnay na argumento
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => array (
'label' => __ ('Bagong text control label', 'my_theme_textdomain'),
'type' => 'text', // Kontrol ng patlang ng teksto
'priority' => 1
)
)

)

),

);

/ *
* 'thsp_customizer_options' filter hook ay magpapahintulot sa iyo na
* magdagdag / alisin ang ilan sa mga pagpipilian na ito mula sa isang tema ng bata
* /
ibalik ang apply_filters ('thsp_customizer_options', $ pagpipilian);

}

I-update: Ang array ay mananatili ng pareho, ngunit ngayon maaari mo ring ipasa ang mga pagpipilian sa array sa isang filter hook, tingnan ang Bahagi 4 para sa higit pang mga detalye.

Mukhang kumplikado sa unang paningin, alam ko, ngunit hayaan akong ipaliwanag.

Ang mga pagpipilian sa $ binubuo ang hanay ng (mga) seksyon (isa lamang sa kasong ito – new_customizer_section), ang bawat seksyon ay mayroong mga argumento, mga patlang at isang halaga ng boolean (mayroon_section) upang ipahiwatig kung ito ay isang bagong seksyon, o nagdaragdag lamang kami ng ilang mga patlang sa isang umiiral na isa. Ang mga argumento ng argumento ay magkapareho sa kung ano ang iyong ipasa $ wp_customize-> add_section pamamaraan. Ang hanay ng mga patlang ay bahagyang mas kumplikado.

I-update: pagpipilian ng mga pagpipilian sa mga argumento ng kontrol na ngayon ay isang multi-dimensional na hanay.

Ang bawat patlang ay binubuo ng isang setting ng Customizer at isang kontrol ng Customizer. Iyon ang dahilan kung bakit mayroon kaming setting_args at control_args arrays. Halos pareho sila pareho sa mga argumento na darating na pupuntahan mo $ wp_customize-> add_setting at $ wp_customize-> add_control paraan. Ang pagkakaiba lamang ay ang ‘pagpipilian’ na hanay sa mga argumento ng kontrol, $ wp_customise-> add_control ay nangangailangan ito upang maging isang simpleng key => halaga ng pares ng pares at gumagamit kami ng isang multi-dimensional na hanay sa halip.

Sa ganitong paraan posible na maipasa ang maraming data sa bawat isa sa mga pagpipilian, kaya kung halimbawa, paglo-load ng Google Font sa iyong tema, magkakaroon ka ng mga string na nagbibigay-daan sa iyo upang mai-load ang tamang font sa loob ng mga pagpipilian . Maaari kang makakita ng isang halimbawa nito tema na gumagamit ng Customizer Boilerplate.

Kaya, kung alam mo na ang tatlong mga pamamaraan na ito, pamilyar ang lahat.

Ang pagdaragdag ng control sa checkbox ay halos pareho, kailangan mo lamang baguhin ang ‘type’ sa ‘checkbox’ sa ‘control_args’ na hanay:

/ *
* ==============
* Patlang ng Checkbox
* ==============
* /
'new_checkbox_field' => array (
'setting_args' => array (
'default' => totoo,
'type' => 'pagpipilian',
'kakayahan' => $ kinakailangan_capability,
'transport' => 'i-refresh',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => array (
'label' => __ ('Bagong radio control label', 'my_theme_textdomain'),
'type' => 'checkbox', // Kontrol ng patlang ng Checkbox
'priority' => 2
)
),

Ang mga kontrol sa radyo at piling ay halos pareho, kailangan mo lamang na tukuyin ang mga ibinigay na pagpipilian:

/ *
* ===========
* ===========
* Patlang ng radyo
* ===========
* ===========
* /
'new_radio_field' => array (
'setting_args' => array (
'default' => 'pagpipilian-2',
'type' => 'pagpipilian',
'kakayahan' => $ thsp_cbp_capability,
'transport' => 'i-refresh',
),
'control_args' => array (
'label' => __ ('Bagong radio control label', 'my_theme_textdomain'),
'type' => 'radio', // Kontrol sa radyo
'options' => array (
'option-1' => array (
'label' => __ ('Pagpipilian 1', 'my_theme_textdomain')
),
'option-2' => array (
'label' => __ ('Pagpipilian 2', 'my_theme_textdomain')
),
'option-3' => array (
'label' => __ ('Pagpipilian 3', 'my_theme_textdomain')
)
),
'priority' => 3
)
),

/ *
* ============
* ============
* Piliin ang patlang
* ============
* ============
* /
'new_select_field' => array (
'setting_args' => array (
'default' => 'pagpipilian-3',
'type' => 'pagpipilian',
'kakayahan' => $ thsp_cbp_capability,
'transport' => 'i-refresh',
),
'control_args' => array (
'label' => __ ('Bagong piling label ng patlang', 'my_theme_textdomain'),
'type' => 'piliin', // Piliin ang control
'options' => array (
'option-1' => array (
'label' => __ ('Pagpipilian 1', 'my_theme_textdomain')
),
'option-2' => array (
'label' => __ ('Pagpipilian 2', 'my_theme_textdomain')
),
'option-3' => array (
'label' => __ ('Pagpipilian 3', 'my_theme_textdomain')
)
),
'priority' => 4
)
)

At sa wakas, dalawang kumplikadong mga uri ng kontrol na binuo sa WordPress – pag-upload ng file at pag-upload ng imahe:

/ *
* ===========
* ===========
* Pag-upload ng File
* ===========
* ===========
* /
'new_file_upload_field' => array
'setting_args' => array (
'default' => '',
'type' => 'pagpipilian',
'kakayahan' => $ thsp_cbp_capability,
'transport' => 'i-refresh',
),
'control_args' => array (
'label' => __ ('Pag-upload ng file', 'my_theme_textdomain'),
'type' => 'upload', // control control ng pag-upload ng file
'priority' => 5
)
),

/ *
* ============
* ============
* Pag-upload ng Larawan
* ============
* ============
* /
'new_image_upload_field' => array
'setting_args' => array (
'default' => '',
'type' => 'pagpipilian',
'kakayahan' => $ thsp_cbp_capability,
'transport' => 'i-refresh',
),
'control_args' => array (
'label' => __ ('Pag-upload ng imahe', 'my_theme_textdomain'),
'type' => 'image', // control control ng pag-upload ng imahe
'priority' => 6
)
)

Tandaan na ginamit ko ‘Type’ => ‘pagpipilian’ sa pagtatakda ng mga argumento para sa lahat ng mga patlang na ito. Papayagan nito ang lahat ng mga halaga na maiimbak bilang isang halaga sa iyong database. Ang alternatibo ay ‘Type’ => ‘theme_mod’ ngunit sa ngayon hayaan ang stick na may ‘pagpipilian’.

Paggamit ng Mga Pagpipilian Array upang Magdagdag ng Mga Seksyon ng Mga Customizer, Mga Setting at Mga Kontrol

Kung hindi ka sigurado kung paano makihalubilo sa WordPress Theme Customizer, pumunta at suriin, dahil iyon ang gagawin namin ngayon. Ang pagkakaiba lamang ay sa halip na magdagdag ng mga seksyon, mga setting at kumokontrol nang paisa-isa, awtomatiko namin ang proseso gamit ang serialized array na nilikha namin. Tumalon lang tayo dito:

function thsp_cbp_customize_register ($ wp_customize) {

/ **
* Pasadyang mga kontrol
* /
nangangailangan (dirname (__ FILE__). '/custom-controls.php');


/ *
* Kunin ang lahat ng mga patlang gamit ang isang function ng katulong
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Kumuha ng pangalan ng pagpasok ng DB sa ilalim ng kung aling mga pagpipilian ay maiimbak
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* I-Loop sa pamamagitan ng array at magdagdag ng mga seksyon ng Customizer
* /
unahan ($ thsp_sections bilang $ thsp_section_key => $ thsp_section_value) {

/ **
* Nagdaragdag ng seksyon ng Customizer, kung kinakailangan
* /
kung (! $ thsp_section_value ['mayroon_section']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Magdagdag ng seksyon
$ wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // tapusin kung

/ *
* I-Loop sa pamamagitan ng 'patlang' na hanay sa bawat seksyon
* at magdagdag ng mga setting at kontrol
* /
$ thsp_section_fields = $ thsp_section_value ['mga patlang'];
unahan ($ thsp_section_fields bilang $ thsp_field_key => $ thsp_field_value) {

/ *
* Suriin kung ang 'pagpipilian' o 'theme_mod' ay ginagamit upang mag-imbak ng pagpipilian
*
* Kung walang itinakda, $ wp_customize-> add_setting paraan ay default sa 'theme_mod'
* Kung ang 'pagpipilian' ay ginagamit bilang setting ng uri ng halaga nito ay maiimbak sa isang entry sa
* {prefix} _option table. Ang pangalan ng pagpipilian ay tinukoy ng thsp_cbp_option () function
* /
kung (isset ($ thsp_field_value ['setting_args'] ['type']) && 'option' == $ thsp_field_value ['setting_args'] ['type']) {
$ setting_control_id = $ thsp_cbp_option. '['. $ thsp_field_key. ']';
} iba pa {
$ setting_control_id = $ thsp_field_key;
}

/ *
* Magdagdag ng default na pagpapaandar ng callback, kung walang tinukoy
* /
kung (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb'])) {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Nagdaragdag ng mga setting ng Customizer
* /
$ wp_customize-> add_setting (
$ setting_control_id,
$ thsp_field_value ['setting_args']
);

/ **
* Nagdaragdag ng control ng Customizer
*
Ang halaga ng 'section' ay dapat idagdag sa array na 'control_args'
* kaya ang control ay maaaring idagdag sa kasalukuyang seksyon
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* $ wp_customise-> add_control paraan ay nangangailangan ng 'pagpipilian' upang maging isang simpleng key => halaga ng pares
* /
kung (isset ($ thsp_field_value ['control_args'] ['pagpipilian'])) {
$ thsp_cbp_choice = array ();
unahan ($ thsp_field_value ['control_args'] ['mga pagpipilian'] bilang $ thsp_cbp_choice_key => $ thsp_cbp_choice_value) {
$ thsp_cbp_choice [$ thsp_cbp_choice_key] = $ thsp_cbp_choice_value ['label'];
}
$ thsp_field_value ['control_args'] ['pagpipilian'] = $ thsp_cbp_choice;
}


// Suriin ang uri ng control
kung ('kulay' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
bagong 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 (
bagong 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 (
bagong WP_Customize_Upload_Control (
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} iba pa {
$ wp_customize-> add_control (
$ setting_control_id,
$ thsp_field_value ['control_args']
);
}

} // dulo ng unahan

} // dulo ng unahan

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

Pagpunta sa lahat ng mga seksyon, pagdaragdag ng mga hindi na umiiral, pagkatapos ay dumaan sa lahat ng mga patlang sa bawat seksyon, magdagdag ng isang setting at isang kontrol para sa bawat isa. Iyon lang ang nangyayari.

Tandaan na ginamit namin ang ‘type’ => ‘pagpipilian’ para sa lahat ng setting? Iyon ang dahilan kung bakit mayroon kami ngayon “My_theme_opsyon [$ thsp_field_key]” para sa parehong mga setting at seksyon. Iniimbak nito ang lahat ng mga halaga bilang isang serialized array na maaari mong makuha sa pamamagitan ng paggamit get_option (‘my_theme_option’). O maaari mo lamang gamitin ang mga function ng katulong na tinukoy sa mga katulong.php upang makuha ang parehong mga kasalukuyang halaga at default na mga halaga para sa lahat ng mga patlang:

/ **
* Kumuha ng mga Pagpapahalaga sa Pagpipilian
*
* Array na humahawak sa lahat ng mga halaga ng mga pagpipilian
* Ang default na halaga ng pagpipilian ay ginagamit kung hindi tinukoy ng gumagamit ang isang halaga
*
* @uses thsp_get_theme_customizer_defaults () tinukoy sa /customizer/options.php
* @return array Kasalukuyang mga halaga para sa lahat ng mga pagpipilian
* @Since Tema_Customizer_Boilerplate 1.0
* /
function thsp_cbp_get_options_values ​​() {

// Kunin ang mga default na pagpipilian
$ option_defaults = thsp_cbp_get_options_defaults ();

// I-parse ang mga naka-imbak na pagpipilian gamit ang mga default
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), array ()), $ option_defaults);

// Ibalik ang parisukat na hanay
ibalik ang $ thsp_cbp_option;

}


/ **
* Kumuha ng Mga Pagpipilian sa Pagpipilian
*
* Nagbabalik ng isang array na may hawak na mga default na halaga para sa lahat ng mga pagpipilian
*
* @uses thsp_get_theme_customizer_fields () tinukoy sa /customizer/options.php
* @return array $ thsp_option_defaults Default na halaga para sa lahat ng mga pagpipilian
* @Since Tema_Customizer_Boilerplate 1.0
* /
function thsp_cbp_get_options_defaults () {

// Kunin ang array na humahawak sa lahat ng mga patlang na pagpipilian sa tema
$ thsp_sections = thsp_cbp_get_fields ();

// Unahin ang hanay upang hawakan ang mga default na halaga para sa lahat ng mga pagpipilian sa tema
$ thsp_option_defaults = array ();

// I-Loop sa pamamagitan ng hanay ng mga pagpipilian ng mga parameter
unahan ($ thsp_sections bilang $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['mga patlang'];

unahan ($ thsp_section_fields bilang $ thsp_field_key => $ thsp_field_value) {

// Magdagdag ng isang sangkot na susi ng array ng mga default na default para sa bawat pagpipilian sa array ng mga parameter
kung (isset ($ thsp_field_value ['setting_args'] ['default'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['default'];
} iba pa {
$ thsp_option_defaults [$ thsp_field_key] = maling;
}

}

}

// Ibalik ang mga default na pag-aayos
ibalik ang $ thsp_option_defaults;

}

Mayroong isa pang bagay na dapat kong banggitin – function ng callback ng sanitization na tinukoy namin sa ‘setting_args’ na hanay. Ang pag-andar ay tinukoy sa extend.php at nagpapatakbo lamang ng data wp_kses_post function:

/ **
* Tema Customizer sanitization callback function
* /
function thsp_sanitize_cb ($ input) {

bumalik wp_kses_post ($ input);

}

Saan Mula sa Dito?

Sa ngayon, maaari mong gamitin ang Tema Customizer Boilerplate sa iyong mga tema, ang kailangan mo lang gawin ay i-download ito mula sa Github, kopyahin sa direktoryo ng iyong tema at isama ang pangunahing file mula sa function.php, na 100% na gumagana at sapat na sapat para sa karamihan tema.

Dahil ang iyong tema ay hindi “tulad ng karamihan sa mga tema”, sa susunod na linggo makikita namin kung paano mapalawak ang boilerplate sa pamamagitan ng paggamit ng filter at pagkilos nito.

Gustung-gusto kong marinig kung paano sa palagay mo maaaring mapabuti o mapalawak ang boilerplate na ito, kaya mangyaring sunugin ang mga komento.

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