Varná doska WordPress Theme Customizer

Varná doska WordPress Theme Customizer
  1. 1. Úvod do Prispôsobovača tém WordPress
  2. 2. Interakcia s WordPress Theme Customizer
  3. 3. Aktuálne čítanie: Varná doska WordPress Theme Customizer
  4. 4. Rozšírenie kotla WordPress Theme Customizer
  5. 5. Boilerplate prispôsobovača tém – podmienečné možnosti, podradené motívy a doplnky

Aktualizácia: Tento článok bol upravený 19. februára 2013, aby odrážal zmeny vykonané v téme Prispôsobovač tém.


Dúfajme, že ste si prečítali a užili si prvé dve príspevky zo série Theme Customizer – Úvod do WordPress Theme Customizer a interakcia s Theme Customizer. Teraz je čas prejsť na hlavný chod a začať s montážou šablóny prispôsobenia tém, ktorú budete môcť použiť vo svojich témach. Tento príspevok obsahuje niekoľko dlhých blokov kódu, preto venujte pozornosť vloženým komentárom.

Poznámka: Ak by ste radšej radšej ihneď použili, môžete si ju stiahnuť z Githubu a zmeniť polia v poli $ options pomocou pripojenia do háčika filtra „thsp_cbp_options_array“..

Čo vytvárame

Štruktúra adresára kotla tematického prispôsobovača

Štruktúra adresára kotla tematického prispôsobovača

  • customizer.php – Toto je hlavný súbor šablón témy Prispôsobiteľ, ktorý pridáva oddiely, nastavenia a kontroly pomocou údajov z poľa možností
  • custom-controls.php – Triedy vlastných ovládacích prvkov a akčný hák, ktorý vám umožňuje pridať vlastné ovládacie prvky
  • helpers.php – Pomocné funkcie, ktoré sa používajú na načítanie možností tém, predvolených nastavení atď.
  • options.php – Vzorové možnosti a háčik filtra, ktorý umožňuje upravovať pole možností a používať vlastné polia
  • Customizer-controls.css – Základné CSS pre obraz nahradený rádiové vlastné ovládanie

Celá myšlienka je, aby ste mohli skopírovať tieto súbory do podadresára vo vašom adresári tém, zahrnúť súbor customizer.php z vašich funkcií.php a zmeniť všetko, čo sa vám páči, vrátane a najmä poľa možností, pomocou háčikov kotla na prispôsobenie témy (vysvetlené) v časti 4). aktualizácia: Predtým ste iba upravovali možnosti.php, ale pomocou háčikov je situácia oveľa čistejšia.

Teraz použijeme skutočný príklad – do novej sekcie Prispôsobovač tém pridáme textový ovládací prvok. Pole sa umiestni do pomocnej funkcie a po jeho vrátení sa naň použije filter. Týmto spôsobom môžete pridať ďalšie možnosti z podradenej témy alebo doplnku. Tu je to:

/ **
* Pomocná funkcia, ktorá obsahuje množstvo možností témy.
*
* @return array $ options Pole možností témy
* @uses thsp_get_theme_customizer_fields () definované v customizer / helpers.php
* /
function thsp_get_theme_customizer_fields () {

/ *
* Použitie pomocnej funkcie na získanie predvolenej požadovanej schopnosti
* /
$ required_capability = thsp_settings_page_capability ();

$ options = array (


// ID oddielu
'new_customizer_section' => array (

/ *
* Kontrolujeme, či ide o existujúcu sekciu
* alebo nový, ktorý je potrebné zaregistrovať
* /
'exist_section' => false,
/ *
* Argumenty súvisiace s oddielmi
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => array (
'title' => __ ('Názov novej sekcie', 'my_theme_textdomain'),
'description' => __ ('Popis novej sekcie', 'my_theme_textdomain'),
'priority' => 10
),

/ *
* Pole „pole“ obsahuje všetky polia, ktoré musia byť
* pridané do tejto sekcie
* /
'fields' => array (

/ *
* ==========
* ==========
* Textové pole
* ==========
* ==========
* /
// ID poľa
'new_text_field' => array (
/ *
* Stanovenie súvisiacich argumentov
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => array (
'default' => __ ('Predvolená hodnota textu', 'my_theme_textdomain'),
'type' => 'option',
'schopnosť' => $ required_capability,
'transport' => 'obnoviť',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Argumenty súvisiace s kontrolou
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => array (
'label' => __ ('New label control text', 'my_theme_textdomain'),
'type' => 'text', // Ovládanie textového poľa
'priority' => 1
)
)

)

),

);

/ *
Háčik filtra * 'thsp_customizer_options' vám ​​to umožní
* pridať alebo odstrániť niektoré z týchto možností z podradenej témy
* /
return apply_filters ('thsp_customizer_options', $ options);

}

aktualizácia: Pole zostane rovnaké, ale teraz môžete tiež preniesť pole možností do háku filtra, ďalšie podrobnosti nájdete v časti 4.

Na prvý pohľad to vyzerá komplikovane, ale dovoľte mi to vysvetliť.

možnosti $ pole sa skladá z oddielov (v tomto prípade iba jedného – new_customizer_section), každá sekcia obsahuje argumenty, polia a booleovskú hodnotu (existujúca sekcia), ktoré označujú, či ide o novú sekciu, alebo iba pridávame niektoré polia do existujúcej jeden. Pole argumentov je totožné s tým, čo by ste odovzdali $ Wp_customize-> add_section metóda. Pole polí je o niečo zložitejšie.

aktualizácia: pole voľby v argumentoch riadenia je teraz viacrozmerné pole.

Každé pole sa skladá z nastavenia prispôsobovača a ovládacieho prvku prispôsobenia. Preto máme polia setting_args a control_args. Sú takmer úplne rovnaké ako argumenty, ktoré by ste predali $ Wp_customize-> add_setting a $ Wp_customize-> add_control metódy. Jediným rozdielom je pole „voľby“ v argumentoch kontroly, $ wp_customize-> add_control vyžaduje, aby to bolo jednoduché párové pole pár kľúč = hodnota a namiesto toho používame viacrozmerné pole.

Týmto spôsobom je možné preniesť viac údajov do každej z možností, takže ak napríklad do svojej témy načítavate písma Google Fonts, budete mať reťazce, ktoré vám umožnia načítať správne písmo do poľa možností. , Môžete vidieť príklad toho Téma, ktorá používa šablónu prispôsobovacieho prvku.

Takže, ak už viete tieto tri metódy, je to všetko veľmi známe.

Pridanie ovládacieho prvku začiarkavacieho políčka je takmer rovnaké, stačí zmeniť pole „typ“ na „začiarkavacie políčko“ v poli „control_args“:

/ *
* ==============
* Políčko začiarkavacieho políčka
* ==============
* /
'new_checkbox_field' => array (
'setting_args' => array (
'default' => true,
'type' => 'option',
'schopnosť' => $ required_capability,
'transport' => 'obnoviť',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => array (
'label' => __ ('New label control control', 'my_theme_textdomain'),
'type' => 'checkbox', // Ovládanie poľa Checkbox
'priority' => 2
)
),

Ovládacie prvky rádia a výberu sú takmer rovnaké, stačí zadať dané možnosti:

/ *
* ===========
* ===========
* Rádiové pole
* ===========
* ===========
* /
'new_radio_field' => array (
'setting_args' => array (
'default' => 'option-2',
'type' => 'option',
'schopnosť' => $ thsp_cbp_capability,
'transport' => 'obnoviť',
),
'control_args' => array (
'label' => __ ('New label control control', 'my_theme_textdomain'),
'type' => 'radio', // Ovládanie rádia
'choices' => array (
'option-1' => array (
'label' => __ ('Option 1', 'my_theme_textdomain')
),
'option-2' => array (
'label' => __ ('Option 2', 'my_theme_textdomain')
),
'option-3' => array (
'label' => __ ('Option 3', 'my_theme_textdomain')
)
),
'priority' => 3
)
),

/ *
* ============
* ============
* Vyberte pole
* ============
* ============
* /
'new_select_field' => array (
'setting_args' => array (
'default' => 'option-3',
'type' => 'option',
'schopnosť' => $ thsp_cbp_capability,
'transport' => 'obnoviť',
),
'control_args' => array (
'label' => __ ('New select field label', 'my_theme_textdomain'),
'type' => 'select', // Vyberte kontrolu
'choices' => array (
'option-1' => array (
'label' => __ ('Option 1', 'my_theme_textdomain')
),
'option-2' => array (
'label' => __ ('Option 2', 'my_theme_textdomain')
),
'option-3' => array (
'label' => __ ('Option 3', 'my_theme_textdomain')
)
),
'priority' => 4
)
)

A nakoniec, dva komplexné typy riadenia, ktoré sú zabudované do WordPress – nahrávanie súborov a nahrávanie obrázkov:

/ *
* ===========
* ===========
* Nahranie súboru
* ===========
* ===========
* /
'new_file_upload_field' => array (
'setting_args' => array (
'default' => '',
'type' => 'option',
'schopnosť' => $ thsp_cbp_capability,
'transport' => 'obnoviť',
),
'control_args' => array (
'label' => __ ('Nahranie súboru', 'my_theme_textdomain'),
'type' => 'upload', // Ovládanie poľa pre upload súborov
'priority' => 5
)
),

/ *
* ============
* ============
* Nahrávanie obrázkov
* ============
* ============
* /
'new_image_upload_field' => array (
'setting_args' => array (
'default' => '',
'type' => 'option',
'schopnosť' => $ thsp_cbp_capability,
'transport' => 'obnoviť',
),
'control_args' => array (
'label' => __ ('Upload obrázku', 'my_theme_textdomain'),
'type' => 'image', // Ovládanie poľa odovzdávania obrázkov
'priority' => 6
)
)

Všimnite si, že som použil „Typ“ => „možnosť“ pri nastavovaní argumentov pre všetky tieto polia. To umožní, aby sa všetky hodnoty uložili ako jedna hodnota vo vašej databáze. Alternatíva je ‘Type’ => ‘theme_mod’ ale zatiaľ sa držme „možnosti“.

Pomocou poľa Možnosti pridajte sekcie prispôsobenia, nastavenia a ovládacie prvky

Ak si nie ste istí, ako komunikovať s WordPress Theme Customizer, choďte a skontrolujte, pretože to je to, čo teraz urobíme. Jediný rozdiel je v tom, že namiesto pridávania sekcií, nastavení a ovládacích prvkov naraz, budeme automatizovať proces pomocou sériového poľa, ktoré sme vytvorili. Poďme na to skočiť:

funkcia thsp_cbp_customize_register ($ wp_customize) {

/ **
* Vlastné ovládacie prvky
* /
vyžadovať (dirname (__ FILE__). '/custom-controls.php');


/ *
* Získajte všetky polia pomocou pomocnej funkcie
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Získajte názov položky DB, pod ktorou budú uložené možnosti
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Slučka cez pole a pridajte sekcie Prispôsobovač
* /
foreach ($ thsp_sections as $ thsp_section_key => $ thsp_section_value) {

/ **
* V prípade potreby pridá sekciu Prispôsobovač
* /
if (! $ thsp_section_value ['exist_section'])) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Pridať sekciu
$ Wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // koniec Ak

/ *
* Slučky cez pole 'polia' v každej sekcii
* a pridajte nastavenia a ovládacie prvky
* /
$ thsp_section_fields = $ thsp_section_value ['fields'];
foreach ($ thsp_section_fields ako $ thsp_field_key => $ thsp_field_value) {

/ *
* Skontrolujte, či sa na uloženie možnosti používa možnosť „option“ alebo „theme_mod“
*
* Ak nie je nič nastavené, metóda $ wp_customize-> add_setting bude predvolene nastavená na 'theme_mod'
* Ak sa ako typ nastavenia použije možnosť, jej hodnota sa uloží do záznamu v
* {prefix} _options tabuľka. Názov voľby je definovaný funkciou 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;
}

/ *
* Pridajte predvolenú funkciu spätného volania, ak nie je definovaná
* /
if (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb']))} {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Pridá nastavenia prispôsobovača
* /
$ Wp_customize-> add_setting (
$ setting_control_id,
$ Thsp_field_value [ 'setting_args']
);

/ **
* Pridá ovládanie prispôsobovača
*
Do poľa „control_args“ sa musí pridať hodnota „section“
* takže kontrola sa môže pridať do aktuálnej sekcie
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* $ wp_customize-> metóda add_control vyžaduje, aby 'voľby' boli jednoduchým párom kľúč = = hodnota
* /
if (isset ($ thsp_field_value ['control_args'] ['choices']))) {
$ thsp_cbp_choices = array ();
foreach ($ thsp_field_value ['control_args'] ['choices'] ako $ 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'] ['choices'] = $ thsp_cbp_choices;
}


// Skontrolujte typ ovládania
if ('color' == $ thsp_field_value ['control_args'] ['type']) {
$ Wp_customize-> add_control (
nový 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 (
nový 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 (
nový WP_Customize_Upload_Control (
$ wp_customize,
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
)
);
} else {
$ Wp_customize-> add_control (
$ setting_control_id,
$ Thsp_field_value [ 'control_args']
);
}

} // koniec foreach

} // koniec foreach

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

Prejdete všetky sekcie, pridáte tie, ktoré ešte neexistujú, a potom prejdete všetky polia v každej sekcii, pričom pre každú z nich pridáte nastavenie a ovládací prvok. To sa tu deje.

Pamätáte si, že sme pre všetky nastavenia použili možnosť „type“ => „možnosť“? Preto teraz máme “My_theme_options [$ thsp_field_key]” pre nastavenia aj sekcie. Tým sa uložia všetky hodnoty ako jedno sériové pole, ktoré môžete získať pomocou get_option („my_theme_options“). Alebo môžete použiť pomocné funkcie definované v helpers.php načítať aktuálne aj predvolené hodnoty pre všetky polia:

/ **
* Získajte hodnoty opcií
*
* Pole, ktoré obsahuje všetky hodnoty možností
* Predvolená hodnota možnosti sa používa, ak používateľ neurčil hodnotu
*
* @uses thsp_get_theme_customizer_defaults () definované v /customizer/options.php
* @return array Aktuálne hodnoty všetkých možností
* @since Theme_Customizer_Boilerplate 1.0
* /
function thsp_cbp_get_options_values ​​() {

// Získajte predvolené nastavenie voľby
$ option_defaults = thsp_cbp_get_options_defaults ();

// Analyzujte uložené voľby s predvolenými hodnotami
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), array ()), $ option_defaults);

// Vracia analyzované pole
návrat $ thsp_cbp_options;

}


/ **
* Získajte predvolené možnosti
*
* Vracia pole, ktoré obsahuje predvolené hodnoty pre všetky možnosti
*
* @uses thsp_get_theme_customizer_fields () definované v /customizer/options.php
* @return array $ thsp_option_defaults Predvolené hodnoty pre všetky voľby
* @since Theme_Customizer_Boilerplate 1.0
* /
function thsp_cbp_get_options_defaults () {

// Získajte pole, ktoré obsahuje všetky polia možností témy
$ thsp_sections = thsp_cbp_get_fields ();

// Inicializujte pole tak, aby obsahovalo predvolené hodnoty pre všetky možnosti témy
$ thsp_option_defaults = array ();

// Slučka cez pole parametrov voľby
foreach ($ thsp_sections ako $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['fields'];

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

// Pridajte kľúč asociatívneho poľa do poľa predvolených hodnôt pre každú možnosť v poli parametrov
if (isset ($ thsp_field_value ['setting_args'] ['default'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['default'];
} else {
$ thsp_option_defaults [$ thsp_field_key] = false;
}

}

}

// Vráti pole predvolených nastavení
return $ thsp_option_defaults;

}

Je tu ešte jedna vec, ktorú by som mal spomenúť – funkciu spätného volania dezinfekcie, ktorú sme uviedli v poli „settings_args“. Funkcia je definovaná v ext.php a jednoducho cez ňu prechádzajú dáta wp_kses_post funkcie:

/ **
* Funkcia spätného volania dezinfekčnej funkcie prispôsobovača tém
* /
funkcia thsp_sanitize_cb (vstup $) {

return wp_kses_post ($ input);

}

Odkiaľto?

Zatiaľ môžete použiť túto tému na prispôsobenie tém v témach, stačí ju stiahnuť z Githubu, skopírovať do adresára témy a zahrnúť hlavný súbor z funkcií.php, ktorý je 100% funkčný a dosť dobrý pre väčšinu témy.

Keďže vaša téma nie je „ako väčšina tém“, budúci týždeň uvidíme, ako rozšíriť varnú dosku pomocou filtra a háčikov..

Chcel by som počuť, ako si myslíte, že by sa táto varná doska mohla vylepšiť alebo rozšíriť, takže v komentároch vyhoďte.

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