Kotel WordPress Theme Customizer Boilerplate

Kotel WordPress Theme Customizer Boilerplate
  1. 1. Úvod do WordPress Theme Customizer
  2. 2. Interakce s WordPress Theme Customizer
  3. 3. Aktuálně čte: Kotel WordPress Theme Customizer Boilerplate
  4. 4. Rozšíření kotle WordPress Theme Customizer
  5. 5. Téma Customizer Boilerplate – podmíněné možnosti, podřízená témata a pluginy

Aktualizace: Tento článek byl upraven 19. února 2013 tak, aby odrážel změny provedené v Boilerplate Theme Customizer.


Doufejme, že si přečtete a užijete si první dva příspěvky ze série Theme Customizer – úvod do WordPress Theme Customizer a interakci s Theme Customizer. Nyní je čas přejít na hlavní chod a začít s montáží kotle Plate Customizer, který budete moci použít ve svých tématech. Tento příspěvek obsahuje několik dlouhých bloků kódu, proto věnujte pozornost vloženým komentářům.

Poznámka: Pokud byste raději raději ihned použili, můžete si ji stáhnout z Githubu a změnit pole v poli $ options připojením k háku filtru „thsp_cbp_options_array“.

Co vytváříme

Struktura adresáře Boilerplate motivu Customizer

Struktura adresáře Boilerplate motivu Customizer

  • customizer.php – Toto je hlavní soubor souboru přizpůsobovacích motivů téma, který přidává oddíly, nastavení a ovládací prvky pomocí dat z pole voleb
  • custom-controls.php – Třídy uživatelských ovládacích prvků a akční háček, který vám umožňuje přidat vlastní vlastní ovládací prvky
  • helpers.php – Pomocné funkce, které se používají k načtení možností motivu, výchozího nastavení voleb atd.
  • options.php – Ukázkové možnosti a háček filtru, který umožňuje upravovat pole možností a používat vlastní pole
  • customizer-controls.css – Základní CSS pro obraz nahrazený rádiovým uživatelským ovládáním

Celá myšlenka je, aby bylo možné tyto soubory zkopírovat do podadresáře ve vašem motivovém adresáři, zahrnout soubor customizer.php z vašich funkcí.php a změnit vše, co se vám líbí, včetně a zejména pole voleb, pomocí háčků Bootplate na téma Customizer (vysvětleno) v části 4). Aktualizace: Dříve jste pouze upravovali možnosti.php, ale pomocí háčků je situace mnohem čistší.

Nyní použijeme skutečný příklad – do nové sekce Theme Customizer přidáme textový ovládací prvek. Pole je umístěno do pomocné funkce a po návratu má na něj aplikován filtr. Tímto způsobem můžete přidat další možnosti z podřízeného motivu nebo pluginu. Tady to je:

/ **
* Pomocná funkce, která obsahuje řadu možností motivu.
*
* @return pole $ options Pole možností motivu
* @uses thsp_get_theme_customizer_fields () definované v customizer / helpers.php
* /
funkce thsp_get_theme_customizer_fields () {

/ *
* Použití pomocné funkce k získání výchozí požadované schopnosti
* /
$ required_capability = thsp_settings_page_capability ();

$ options = array (


// ID sekce
'new_customizer_section' => array (

/ *
* Kontrolujeme, zda se jedná o existující sekci
* nebo nový, který je třeba zaregistrovat
* /
'exist_section' => false,
/ *
* Argumenty související s oddílem
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => array (
'title' => __ ('New Section Title', 'my_theme_textdomain'),
'description' => __ ('Popis nové sekce', 'my_theme_textdomain'),
'priority' => 10
),

/ *
* Pole 'pole' obsahuje všechna pole, která musí být
* přidáno do této sekce
* /
'fields' => array (

/ *
* ===========
* ===========
* Textové pole
* ===========
* ===========
* /
// ID pole
'new_text_field' => array (
/ *
* Nastavení souvisejících argumentů
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => array (
'default' => __ ('Výchozí textová hodnota', 'my_theme_textdomain'),
'type' => 'option',
'schopnost' => $ required_capability,
'transport' => 'refresh',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* Ovládejte související argumenty
* 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', // Řízení textového pole
'priority' => 1
)
)

)

),

);

/ *
Háček filtru * 'thsp_customizer_options' vám ​​to umožní
* přidat / odebrat některé z těchto možností z podřízeného motivu
* /
return apply_filters ('thsp_customizer_options', $ options);

}

Aktualizace: Pole zůstane stejné, ale nyní můžete také předat pole voleb háku filtru, další podrobnosti viz část 4.

Na první pohled to vypadá komplikovaně, ale dovolte mi to vysvětlit.

$ opce pole se skládá z oddílů (v tomto případě pouze jedna – new_customizer_section), každá sekce má své argumenty, pole a booleovskou hodnotu (existující_sekce), která označuje, zda se jedná o novou sekci, nebo jen přidáváme některá pole do stávající jeden. Pole argumentů je totožné s tím, co byste předali $ wp_customize-> add_section metoda. Pole polí je o něco složitější.

Aktualizace: pole voleb v řídicích argumentech je nyní vícerozměrné pole.

Každé pole se skládá z nastavení Customizer a ovládacího prvku Customizer. Proto máme pole setting_args a control_args. Jsou téměř úplně stejné jako argumenty, kterým byste předali $ wp_customize-> add_setting a $ wp_customize-> add_control metody. Jediným rozdílem je pole „volby“ v argumentech ovládání, $ wp_customize-> add_control vyžaduje, aby šlo o jednoduchý pár klíč = hodnota pole a místo toho používáme vícerozměrné pole.

Tímto způsobem je možné předat více dat do každé z možností, takže pokud například do svého motivu načítáte písma Google, budete moci mít řetězce, které vám umožní načíst správné písmo do pole voleb . Můžete vidět příklad toho téma, které používá přizpůsobovací prvek.

Takže, pokud již víte o těchto třech metodách, je to všechno velmi známé.

Přidání ovládacího prvku zaškrtávacího pole je téměř stejné, stačí změnit pole „typ“ na „zaškrtávací pole“ v poli „control_args“:

/ *
* ==============
* Zaškrtávací pole
* ==============
* /
'new_checkbox_field' => pole (
'setting_args' => array (
'default' => true,
'type' => 'option',
'schopnost' => $ required_capability,
'transport' => 'refresh',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => array (
'label' => __ ('New label control control', 'my_theme_textdomain'),
'type' => 'checkbox', // Řízení pole zaškrtávacího pole
'priority' => 2
)
),

Ovládací prvky rádia a výběru jsou téměř stejné, stačí zadat zadané možnosti:

/ *
* ============
* ============
* Rádiové pole
* ============
* ============
* /
'new_radio_field' => pole (
'setting_args' => array (
'default' => 'option-2',
'type' => 'option',
'schopnost' => $ thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array (
'label' => __ ('New label control control', 'my_theme_textdomain'),
'type' => 'radio', // Radio control
'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',
'schopnost' => $ thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array (
'label' => __ ('New select field label', 'my_theme_textdomain'),
'type' => 'select', // Select control
'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 konečně, dva komplexní typy řízení, které jsou zabudovány do WordPress – upload souborů a upload obrázků:

/ *
* ============
* ============
* Nahrání souboru
* ============
* ============
* /
'new_file_upload_field' => pole (
'setting_args' => array (
'default' => '',
'type' => 'option',
'schopnost' => $ thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array (
'label' => __ ('Nahrání souboru', 'my_theme_textdomain'),
'type' => 'upload', // Řízení pole pro upload souborů
'priority' => 5
)
),

/ *
* =============
* =============
* Nahrávání obrázků
* =============
* =============
* /
'new_image_upload_field' => pole (
'setting_args' => array (
'default' => '',
'type' => 'option',
'schopnost' => $ thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array (
'label' => __ ('Upload obrázku', 'my_theme_textdomain'),
'type' => 'image', // Řízení pole pro odesílání obrázků
'priority' => 6
)
)

Všimněte si, že jsem použil ‘Type’ => ‘option’ při nastavování argumentů pro všechna tato pole. To umožní, aby všechny hodnoty byly uloženy jako jedna hodnota v databázi. Alternativou je ‘Type’ => ‘theme_mod’ ale prozatím se držme „možnosti“.

Pomocí pole Možnosti přidejte oddíly, nastavení a ovládací prvky přizpůsobitelnosti

Pokud si nejste jisti, jak komunikovat s WordPress Theme Customizer, jděte a zkontrolujte, protože to je to, co teď uděláme. Jediný rozdíl je v tom, že místo přidávání sekcí, nastavení a ovládacích prvků po jednom, budeme automatizovat proces pomocí serializovaného pole, které jsme vytvořili. Pojďme do toho jen skočit:

funkce thsp_cbp_customize_register ($ wp_customize) {

/ **
* Vlastní ovládací prvky
* /
vyžadují (dirname (__ FILE__). '/custom-controls.php');


/ *
* Získejte všechna pole pomocí pomocné funkce
* /
$ thsp_sections = thsp_cbp_get_fields ();


/ *
* Získejte název položky DB, pod kterou budou uloženy možnosti
* /
$ thsp_cbp_option = thsp_cbp_option ();


/ **
* Procházejte pole a přidejte oddíly Customizer
* /
foreach ($ thsp_sections as $ thsp_section_key => $ thsp_section_value) {

/ **
* V případě potřeby přidá sekci Customizer
* /
if (! $ thsp_section_value ['exist_section'])) {

$ thsp_section_args = $ thsp_section_value ['args'];

// Přidat sekci
$ wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // end if

/ *
* Smyčka přes pole 'pole' v každé sekci
* a přidejte nastavení a ovládací prvky
* /
$ thsp_section_fields = $ thsp_section_value ['fields'];
foreach ($ thsp_section_fields jako $ thsp_field_key => $ thsp_field_value) {

/ *
* Zkontrolujte, zda se k uložení možnosti používá 'option' nebo 'theme_mod'
*
* Pokud není nic nastaveno, metoda $ wp_customize-> add_setting bude standardně nastavena na 'theme_mod'
* Pokud se jako typ nastavení použije možnost, její hodnota bude uložena do položky v
* {prefix} _options tabulka. Název volby je definován funkcí 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. ']';
} jinde {
$ setting_control_id = $ thsp_field_key;
}

/ *
* Přidat výchozí funkci zpětného volání, pokud není definována žádná
* /
if (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb'])) {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb';
}

/ **
* Přidá nastavení Customizer
* /
$ wp_customize-> add_setting (
$ setting_control_id,
$ thsp_field_value ['setting_args']
);

/ **
* Přidá ovládání Customizer
*
Do pole 'control_args' musí být přidána hodnota 'section'
* takže kontrola může být přidána do aktuální sekce
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key;

/ *
* $ wp_customize-> metoda add_control vyžaduje, aby 'volby' byly jednoduchým párem klíč = = hodnota
* /
if (isset ($ thsp_field_value ['control_args'] ['choices']))) {
$ thsp_cbp_choices = array ();
foreach ($ thsp_field_value ['control_args'] ['choices'] jako $ 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;
}


// Zkontrolujte typ ovládání
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']
)
);
} jinde {
$ wp_customize-> add_control (
$ setting_control_id,
$ thsp_field_value ['control_args']
);
}

} // konec foreach

} // konec foreach

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

Projděte všechny sekce, přidejte ty, které již neexistují, poté prohlédněte všechna pole v každé sekci, přidejte nastavení a ovládací prvky pro každou z nich. To je vše, co se tady děje.

Pamatujete, že jsme pro všechna nastavení použili „type“ => „option“? Proto teď máme “My_theme_options [$ thsp_field_key]” pro nastavení i sekce. Tím se uloží všechny hodnoty jako jedno serializované pole, které můžete načíst pomocí get_option (“my_theme_options”). Nebo můžete použít pomocné funkce definované v helpers.php načíst aktuální i výchozí hodnoty pro všechna pole:

/ **
* Získejte hodnoty opcí
*
* Pole, které obsahuje všechny hodnoty voleb
* Výchozí hodnota volby se použije, pokud uživatel neurčil hodnotu
*
* @uses thsp_get_theme_customizer_defaults () definované v /customizer/options.php
* @return array Aktuální hodnoty pro všechny možnosti
* @since Theme_Customizer_Boilerplate 1.0
* /
function thsp_cbp_get_options_values ​​() {

// Získat výchozí nastavení volby
$ option_defaults = thsp_cbp_get_options_defaults ();

// Analyzujte uložené možnosti s výchozími hodnotami
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option (), array ()), $ option_defaults);

// Vrátí analyzované pole
návrat $ thsp_cbp_options;

}


/ **
* Získat výchozí nastavení
*
* Vrací pole, které obsahuje výchozí hodnoty pro všechny možnosti
*
* @uses thsp_get_theme_customizer_fields () definovaný v /customizer/options.php
* @return array $ thsp_option_defaults Výchozí hodnoty pro všechny možnosti
* @since Theme_Customizer_Boilerplate 1.0
* /
funkce thsp_cbp_get_options_defaults () {

// Získejte pole, které obsahuje všechna pole možností motivu
$ thsp_sections = thsp_cbp_get_fields ();

// Inicializujte pole tak, aby obsahovalo výchozí hodnoty pro všechny možnosti motivu
$ thsp_option_defaults = array ();

// Smyčka přes pole parametrů volby
foreach ($ thsp_sections jako $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['fields'];

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

// Přidejte klíč asociativní matice do výchozího pole pro každou možnost v poli parametrů
if (isset ($ thsp_field_value ['setting_args'] ['default'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['default'];
} jinde {
$ thsp_option_defaults [$ thsp_field_key] = false;
}

}

}

// Vrátí výchozí pole
return $ thsp_option_defaults;

}

Je tu ještě jedna věc, kterou bych měl zmínit – funkci zpětného volání dezinfekce, kterou jsme uvedli v poli „settings_args“. Funkce je definována v ext.php a jednoduše spouští data wp_kses_post funkce:

/ **
* Funkce zpětného volání funkce dezinfekce motivu
* /
funkce thsp_sanitize_cb ($ input) {

return wp_kses_post ($ input);

}

Odkud odtud?

Pro tuto chvíli můžete tuto tematickou přizpůsobovací linku použít ve svých motivech, stačí ji stáhnout z Githubu, zkopírovat do adresáře motivu a zahrnout hlavní soubor z function.php, který je 100% funkční a dost dobrý pro většinu témata.

Protože vaše téma není „jako většina témat“, příští týden uvidíme, jak rozšířit varnou desku pomocí jejího filtru a akčních háčků.

Ráda bych slyšela, jak si myslíte, že by se tato varná deska mohla vylepšit nebo rozšířit, proto prosím vypusťte komentáře.

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