Průvodce nástrojem WordPress Theme Customizer

Co je WordPress Theme Customizer

Systém přizpůsobení WordPressu známý jako Theme Customizer je vestavěný nástroj, který umožňuje vizuální úpravu vzhledu webu s náhledem změn v reálném čase. Místo úprav kódu šablony nebo používání samostatných stránek s nastaveními poskytuje Customizer jednotné rozhraní, kde vidíte účinek každé změny ještě před jejím uložením. Přistupuje se k němu přes Vzhled, Přizpůsobit v administraci. Pokud teprve začínáte, podívejte se na našeho průvodce nastavením WordPressu. Pokud jste WordPress ještě nenainstalovali, podívejte se na našeho podrobného průvodce WordPressem nebo k němu přistupte přidáním /wp-admin/customize.php k URL svého webu.

Customizer byl představen ve WordPressu 3.4 a od té doby byl s každou novou verzí soustavně vylepšován. Pro komunikaci se serverem používá AJAX a pro náhled v reálném čase JavaScript, čímž poskytuje plynulý uživatelský zážitek bez obnovování stránky. Všechny jádrové šablony WordPressu a většina kvalitních šablon používají pro svá nastavení Customizer.

Anatomie Customizeru

Panely, sekce a ovládací prvky

Customizer je uspořádán do hierarchické struktury se třemi úrovněmi. Panely jsou nejširší kategorií a slouží k seskupení souvisejících sekcí, například panel Hlavička obsahující sekce pro logo, navigaci a horní lištu. Sekce jsou skupiny souvisejících ovládacích prvků, například sekce Barvy obsahující ovládací prvky pro barvu pozadí, textu a odkazů. Ovládací prvky jsou jednotlivé vstupní prvky pro nastavení, jako jsou výběry barev, rozbalovací nabídky, textová pole a prvky pro nahrávání obrázků.

Nastavení a Transport

Každý ovládací prvek je svázán s nastavením, které definuje, kde se hodnota ukládá a jak se aplikuje. Nastavení může svou hodnotu ukládat do databáze jako theme_mod nebo option. Parametr Transport určuje, jak se změny aplikují – refresh znovu načítá náhledový rámec při každé změně, zatímco postMessage používá k okamžité aplikaci bez obnovení JavaScript. PostMessage je výrazně rychlejší a poskytuje lepší uživatelský zážitek, ale vyžaduje pro každý ovládací prvek dodatečný JavaScript kód.

Registrace sekcí a ovládacích prvků

Přidání sekce

Sekce se registrují v souboru functions.php pomocí hooku customize_register. Voláte metodu $wp_customize add_section s unikátním ID a polem parametrů včetně title pro název sekce, description pro text zobrazený v horní části sekce, priority pro pořadí zobrazení, kde nižší čísla znamenají vyšší pozici, a panel, pokud chcete sekci umístit do panelu. Příkladem je vytvoření sekce nastavení hlavičky s názvem Nastavení hlavičky, popisem funkce a prioritou 30.

Přidání nastavení a ovládacích prvků

U každého nastavení nejprve zaregistrujete nastavení metodou add_setting, kde určíte výchozí hodnotu, typ transportu a funkci sanitize_callback pro validaci vstupu. Poté přidáte ovládací prvek metodou add_control, která definuje typ prvku, popisek, sekci, do níž patří, a prioritu. WordPress nabízí vestavěné typy ovládacích prvků včetně text pro textová pole, textarea pro víceřádkový text, checkbox pro zaškrtávací políčka, radio pro přepínače, select pro rozbalovací nabídky, dropdown-pages pro výběr stránky a number pro číselná pole.

Pokročilé ovládací prvky

WordPress má vestavěné pokročilé ovládací prvky pro specifické typy dat. WP_Customize_Color_Control zobrazuje výběr barvy s hex hodnotou, WP_Customize_Image_Control umožňuje nahrání nebo výběr obrázku z knihovny médií, WP_Customize_Cropped_Image_Control přidává možnost ořezat obrázky na požadované rozměry a WP_Customize_Media_Control je univerzální ovládací prvek pro jakýkoli typ média. K použití těchto ovládacích prvků je instancujete přímo, místo abyste volali add_control s typem, protože se jedná o PHP třídy se specifickými parametry.

Živý náhled pomocí postMessage

Strana PHP

Chcete-li povolit živý náhled bez obnovení, nastavte parametr transport na postMessage při volání add_setting. Tím Customizeru řeknete, aby k aplikaci změn použil JavaScript místo obnovení celé stránky. Ve výstupním kódu šablony použijte funkci get_theme_mod ke čtení uložené hodnoty a její aplikaci na příslušný prvek prostřednictvím inline CSS nebo třídy.

Strana JavaScriptu

Vytvořte JavaScript soubor, který se načítá pouze v náhledu Customizeru, pomocí hooku customize_preview_init pro zařazení skriptu. Ve skriptu použijte API wp.customize k naslouchání změnám nastavení a jejich aplikaci na prvky náhledu. Chcete-li například změnit barvu, nasloucháte změnám nastavení header_bg_color a aktualizujete vlastnost CSS odpovídajícího prvku. Chcete-li změnit text, upravíte innerHTML prvku. PostMessage poskytuje okamžitou vizuální zpětnou vazbu bez prodlevy, což výrazně zlepšuje uživatelský zážitek.

Selective Refresh

Selective Refresh je hybridní přístup představený ve WordPressu 4.5, který obnovuje pouze část stránky místo celé stránky. Partial zaregistrujete metodou add_partial, kde určíte selector – CSS selektor prvku, který se má obnovit – a PHP funkci render_callback, která generuje nové HTML pro tento prvek. To je ideální pro složité prvky, jejichž vzhled závisí na více nastaveních, protože je to jednodušší než psát JavaScript pro každou možnou kombinaci změn a rychlejší než plné obnovení stránky.

Validace a sanitizace

Sanitize callback

Každé nastavení musí mít funkci sanitize_callback, která vyčistí a zvaliduje uživatelský vstup před uložením do databáze. WordPress nabízí vestavěné funkce pro běžné případy včetně sanitize_text_field pro textová pole, sanitize_email pro e-mailové adresy, sanitize_hex_color pro hex barvy, absint pro kladná celá čísla, esc_url_raw pro URL a wp_kses_post pro HTML obsah s povolenými tagy. Nikdy neukládejte uživatelský vstup bez sanitizace, protože to otevírá web XSS a dalším útokům.

Validate callback

Od WordPressu 4.6 existuje validate_callback, který může vrátit objekt WP_Error s chybovou zprávou zobrazenou uživateli v rozhraní Customizeru. Na rozdíl od sanitize_callback, který neviditelně opravuje neplatné hodnoty, validate_callback uživatele výslovně upozorní, že vstup je neplatný. Můžete například ověřit, že je URL platná, že je číslo v povoleném rozsahu nebo že text nepřekračuje maximální délku, a zobrazit příslušnou chybovou zprávu.

Vlastní panely a ovládací prvky

Vytvoření vlastního ovládacího prvku

Pro potřeby, které vestavěné ovládací prvky nepokrývají, můžete vytvořit vlastní ovládací prvek rozšířením třídy WP_Customize_Control. Přepíšete metodu render_content, abyste definovali HTML ovládacího prvku, a metodu enqueue, abyste zahrnuli CSS a JavaScript specifický pro daný prvek. Příklady vlastních ovládacích prvků jsou posuvník rozsahu se zobrazením aktuální hodnoty, přepínač místo zaškrtávacího políčka, výběr fontů z Google Fonts s náhledem písma, ovládací prvek pro řazení prvků metodou drag-and-drop a ovládací prvek pro konfiguraci rozvržení s vizuálním zobrazením možností.

Vytvoření panelu

Panely se registrují metodou add_panel a jsou užitečné pro organizaci mnoha sekcí do logických skupin. Šablona s mnoha nastaveními může mít panely pro hlavičku, patičku, blog, barvy, typografii a rozvržení. Každý panel obsahuje více sekcí a každá sekce více ovládacích prvků. Nepřehánějte hloubku hierarchie, protože uživatelé neradi proklikávají mnoho úrovní, aby se dostali k požadovanému nastavení.

Podmíněná nastavení

Parametr active_callback v sekcích a ovládacích prvcích umožňuje zobrazit ovládací prvky pouze tehdy, když jsou splněny určité podmínky. Například ovládací prvek pro barvu hlavičky se zobrazí pouze tehdy, je-li zapnuta volba zobrazit hlavičku, nastavení blogu se zobrazí pouze na stránce blogu v náhledu a volby slideru se zobrazí pouze na úvodní stránce. To činí rozhraní přehlednějším a méně matoucím, protože uživatelé vidí pouze nastavení relevantní pro aktuální kontext.

Integrace s Block šablonami

Se zavedením Full Site Editing ve WordPressu 5.9 dostal Customizer alternativu v podobě Site Editoru. Block šablony používají k definici nastavení soubor theme.json místo Customizer API. Klasické šablony a hybridní šablony však Customizer stále aktivně používají a ten zůstává důležitou součástí ekosystému WordPressu. Pokud vyvíjíte klasickou šablonu, Customizer je stále doporučeným způsobem implementace nastavení šablony s živým náhledem.

Osvědčené postupy

• Používejte transport postMessage, kdykoli je to možné, pro okamžitý náhled změn
• Vždy bez výjimky implementujte sanitize_callback pro každé nastavení
• Organizujte nastavení logicky do sekcí a panelů pro snazší navigaci
• Používejte rozumné výchozí hodnoty, aby web vypadal dobře i bez jakékoli úpravy
• Přidávejte popisy k sekcím a ovládacím prvkům, aby uživatelé chápali, co každé nastavení dělá
• Testujte živý náhled na různých stránkách, protože chování se může lišit
• Používejte active_callback k zobrazení ovládacích prvků pouze tehdy, když jsou relevantní
• Nepřidávejte příliš mnoho nastavení, protože to mate uživatele a komplikuje údržbu

Závěr

WordPress Theme Customizer je výkonný nástroj pro vytvoření intuitivního rozhraní pro přizpůsobení šablony s živým náhledem. Hierarchie panelů, sekcí a ovládacích prvků umožňuje uspořádané zobrazení nastavení, transport postMessage poskytuje okamžitou vizuální zpětnou vazbu a sanitizace a validace zajišťují bezpečnost dat. Na optimalizovaném WordPress hostingu jsou všechny funkce Customizeru podporovány serverem optimalizovaným pro rychlou aplikaci změn a spolehlivý provoz webu.