Interakcia s WordPress Theme Customizer

  1. 1. Úvod do Prispôsobovača tém WordPress
  2. 2. Aktuálne čítanie: Interakcia s WordPress Theme Customizer
  3. 3. 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

V časti 1 série WordPress Theme Customizer som spomenul, že ak chcete pracovať s Theme Customizer, musíte ho načítať $ wp_customize objekt, ktorý je inštanciou WP_Customize_Manager trieda. Na to musíte použiť customize_register akčný hák:


add_action ('customize_register', 'my_theme_customize_register');
function my_theme_customize_register ($ wp_customize) {

// Interakcia s $ wp_customize objektom

}

Tento kód môžete umiestniť do funkcií témy.php alebo do súboru, ktorý je v ňom zahrnutý.

Pridanie alebo odstránenie prvkov prispôsobovača témy (sekcie, nastavenia a ovládacie prvky)

Po načítaní $ wp_customize objekt, môžete použiť ktorúkoľvek z jeho metód na pridanie, získanie alebo odstránenie nastavení, ovládacích prvkov a sekcií v ňom (add_setting, get_setting, remove_setting, add_control … dostanete bod).

Takže, ak chcete get alebo remove časť, ovládanie alebo nastavenie, všetko, čo potrebujete, je jeho ID. Tento riadok odstráni časť Colors (vložte ju do funkcie my_theme_customize_register z prvého útržku kódu):

$ wp_customize-> remove_section ('colours');

Pridanie sekcie, ovládacieho prvku alebo nastavenia sa mierne líši, pretože vyžaduje ďalšie parametre. Nebudem tu všetky prechádzajú z dvoch dôvodov:

  1. To nie je skutočný účel tejto série. Vytvoríme prehľadovú tabuľku prispôsobovačov tém, ktorú môžete namiesto toho jednoducho zaradiť do svojej témy.
  2. Alex Mansfield to už zakryl vo svojom 6000 slovnom príšere a Výukový program Prispôsobovač tém o ktorých si musí každý vývojár motívov WordPress prečítať a potom o ňom tweetovať (vážne, ak ste to ešte neurobili, choďte prečítať teraz).

Pozrime sa však na to, ako môžete pridať vlastné nastavenie pomocou ovládacieho prvku v novej sekcii Prispôsobovač tém, ako aj na niektoré argumenty. Keďže práca so skutočnými príkladmi je oveľa jednoduchšia, nasledujeme nasledujúce:

  • Nová sekcia s názvom Rozloženie
  • Nové nastavenie, ktoré ukladá rozloženie témy
  • Nové rádiové ovládanie s dvoma možnosťami – bočný panel vľavo a bočný panel vpravo

Prvou vecou, ​​ktorú môžete pridať do aplikácie Prispôsobenie motívov, je časť „Rozloženie“:

$ Wp_customize-> add_section (
// ID
'Layout_section',
// Pole argumentov
pole (
'title' => __ ('Layout', 'my_theme'),
'schopnosť' => 'edit_theme_options',
'description' => __ ('Umožňuje upraviť rozloženie témy.', 'my_theme')
)
);

Neskúšajte si ju zatiaľ zobraziť v nástroji na prispôsobenie, sekcia sa nezobrazí, pokiaľ k nej nie je pridané nastavenie a ovládací prvok. Pridajme teda obidve:

$ Wp_customize-> add_setting (
// ID
'My_theme_settings [layout_setting]',
// Pole argumentov
pole (
'default' => 'right-sidebar',
'type' => 'option'
)
);
$ Wp_customize-> add_control (
// ID
'Layout_control',
// Pole argumentov
pole (
'type' => 'radio',
'label' => __ ('Rozloženie témy', 'my_theme'),
'section' => 'layout_section',
'choices' => array (
'ľavý bočný panel' => __ ('Ľavý bočný panel', 'my_theme'),
'pravý bočný panel' => __ ('Pravý bočný panel', 'my_theme')
),
// Táto posledná musí zodpovedať ID nastavenia zhora
'settings' => 'my_theme_settings [layout_setting]'
)
);

Za predpokladu, že si prečítate Alexove návody a / alebo stránky Codex, je v poli add_setting argumentov – „typ“ – iba jeden parameter, na ktorý by som sa chcel zamerať. Máte tu dve možnosti: „option“ a „theme_mod“ a môžete ich získať pomocou get_option a get_theme_mod, resp. Vždy používam „možnosť“ jednoducho preto, že vám umožňuje sériovať hodnoty nastavení témy tak, že im dávajú ID my_theme_settings [setting_1], my_theme_settings [setting_2] atď. Týmto spôsobom sa všetky hodnoty uložia ako jeden databázový záznam v tabuľke wp_options.

A nakoniec, po pridaní týchto dvoch útržkov kódu, na ktoré ste sa pripojili customize_register akčný hák (prvý útržok kódu v tomto príspevku), prispôsobiteľ témy bol prispôsobený:

Do sekcie Prispôsobovač tém bola pridaná nová sekcia

Do sekcie Prispôsobovač tém bola pridaná nová sekcia

Použitie hodnôt nastavení prispôsobovača témy v téme

Keď dáte svojim používateľom možnosť uložiť toto nastavenie, môžete načítať jeho hodnotu a pripojiť sa k nemu body_class filtrujte háčik a pridajte ho do radu existujúcich tried tela:

add_filter ('body_class', 'my_theme_body_classes');
function my_theme_body_classes ($ tried) {

/ *
* Pretože sme v poli argumentov add_setting používali 'option'
* Získame hodnotu pomocou funkcie get_option
* /
$ my_theme_settings = get_option ('my_theme_settings');

$ classes [] = $ my_theme_settings ['layout_setting'];

návrat $ triedy;

}

Tým sa do poľa tried tela vo vašej téme pridá buď ľavý bočný panel, alebo pravý bočný panel. Použitím týchto dvoch tried v súbore style.css témy budete môcť vytvoriť dve rôzne rozloženia. Napríklad:

/ * Bočný panel napravo je predvolené rozloženie * /
#content {
plavák: vľavo;
šírka: 60%;
}
#sidebar {
plavák: vpravo;
šírka: 30%;
}

/ * Použitie triedy .left sidebar na prepísanie predvoleného rozloženia * /
.ľavý bočný panel #content {
plavák: vpravo;
}
.ľavý bočný panel #sidebar {
plavák: vľavo;
}

Najlepšie zo všetkého je, že vďaka funkcii WordPress Theme Customizer si môžu používatelia pred uložením čohokoľvek zobraziť náhľad oboch rozložení. Vezmite si to, stránky s nastaveniami tém!

Zhrnutie a ďalšie čítanie

TL; DR verzia tohto príspevku by vyzerala takto: Môžete získať $ wp_customize objekt a potom k nemu pridať niečo (sekciu, nastavenie alebo kontrolu) alebo z neho odstrániť. Všetko ostatné sa scvrkáva na parametre nastavenia.

Tretia časť je oblasť, v ktorej sa táto séria stane zaujímavou, keď začneme automatizovať celý proces a pracovať na bojlerovej doske tematického prispôsobovača, ktorú môžete vložiť do svojej témy a ihneď začať používať. Zostaňte naladení!

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