WordPress theme customizer vodnik

Kaj je WordPress Theme Customizer

WordPress sistem za prilagajanje Theme Customizer je vgrajeno orodje, ki omogoča vizualno prilagajanje videza spletne strani s predogledom sprememb v realnem času. Namesto da spreminjate kodo teme ali uporabljate ločene strani za nastavitve, Customizer ponuja poenoten vmesnik, kjer vidite učinke vsake spremembe pred shranjevanjem. Do njega dostopate prek Videz, Prilagodi v skrbniški plošči. Če šele začenjate, si oglejte naša navodila za postavitev WordPress-a. Če še niste namestili WordPress-a, si oglejte naš vodnik korak za korakom za WordPress ali dodajte /wp-admin/customize.php na URL svoje spletne strani.

Customizer je bil uveden v WordPress 3.4 in od takrat se neprekinjeno nadgrajuje z vsako novo različico. Uporablja AJAX za komunikacijo s strežnikom in JavaScript za predogled v realnem času, kar zagotavlja gladko uporabniško izkušnjo brez osveževanja strani. Vse WordPress osnovne teme in večina kakovostnih tem uporablja Customizer za svoje nastavitve.

Anatomija Customizer-ja

Panels, Sections in Controls

Customizer je organiziran v hierarhično strukturo s tremi ravnmi. Panels so najširša kategorija in služijo za skupinjenje sorodnih sekcij, na primer panel Header, ki vsebuje sekcije za logotip, navigacijo in top bar. Sections so skupine povezanih kontrol, na primer sekcija Barve, ki vsebuje kontrole za barvo ozadja, besedila in povezav. Controls so posamezni elementi za vnos nastavitev, kot so izbirniki barv, spustni meniji, besedilna polja in kontrole za nalaganje slik.

Settings in Transport

Vsak Control je povezan s Setting, ki določa, kje se vrednost shrani in kako se uporabi. Setting lahko shrani vrednost v zbirko podatkov kot theme_mod ali option. Parameter Transport določa način uporabe spremembe, kjer refresh osveži okvir predogleda ob vsaki spremembi, postMessage pa uporablja JavaScript za takojšnjo uporabo brez osveževanja. PostMessage je znatno hitrejši in zagotavlja boljšo uporabniško izkušnjo, vendar zahteva dodatno JavaScript kodo za vsako kontrolo.

Registracija sekcij in kontrol

Dodajanje sekcije

Sekcije se registrirajo v functions.php z uporabo customize_register hook-a. Pokličete $wp_customize add_section metodo z edinstvenim ID-jem in nizom parametrov, ki vključujejo title za naziv sekcije, description za opis, ki se prikaže na vrhu sekcije, priority za vrstni red prikaza, kjer nižja številka pomeni višjo pozicijo, in panel, če želite sekcijo umestiti znotraj panela. Primer je ustvarjanje sekcije za nastavitve glave z naslovom Nastavitve glave, opisom funkcije in prioriteto 30.

Dodajanje nastavitev in kontrole

Za vsako nastavitev najprej registrirate setting z add_setting metodo, kjer navedete privzeto vrednost, transport tip in sanitize_callback funkcijo za validacijo vnosa. Nato dodate control z add_control metodo, ki določa tip kontrole, oznako, sekcijo, ki ji pripada, in prioriteto. WordPress ponuja vgrajene tipe kontrol, vključno s text za besedilno polje, textarea za večvrstično besedilo, checkbox za potrditveno polje, radio za radijske gumbe, select za spustni meni, dropdown-pages za izbiro strani in number za številčno polje.

Napredne kontrole

WordPress ima vgrajene napredne kontrole za specifične tipe podatkov. WP_Customize_Color_Control prikazuje izbirnik barv s hex vrednostjo, WP_Customize_Image_Control omogoča nalaganje ali izbiro slike iz medijske knjižnice, WP_Customize_Cropped_Image_Control dodaja možnost obrezovanja slike na želene dimenzije in WP_Customize_Media_Control je univerzalna kontrola za poljuben tip medija. Za uporabo teh kontrol jih ustvarite neposredno namesto klicanja add_control s tipom, saj so to PHP razredi s specifičnimi parametri.

Live Preview s postMessage

PHP stran

Za aktivacijo živega predogleda brez osveževanja nastavite parameter transport na postMessage v klicu add_setting. To pove Customizer-ju, naj uporabi JavaScript za uporabo sprememb namesto osveževanja celotne strani. V izhodni kodi teme uporabite funkcijo get_theme_mod za branje shranjene vrednosti in jo uporabite na ustreznem elementu prek inline CSS ali razreda.

JavaScript stran

Ustvarite JavaScript datoteko, ki se naloži samo v predogledu Customizer-ja, z uporabo customize_preview_init hook-a za enqueue-iranje skripte. V skripti uporabite wp.customize API za poslušanje sprememb nastavitev in njihovo uporabo na elementih v predogledu. Za spremembo barve na primer poslušate spremembo header_bg_color nastavitve in posodobite CSS lastnost ustreznega elementa. Za spremembo besedila spremenite innerHTML elementa. PostMessage zagotavlja takojšnjo vizualno povratno informacijo brez zakasnitve, kar znatno izboljša uporabniško izkušnjo.

Selective Refresh

Selective Refresh je hibridni pristop, uveden v WordPress 4.5, ki osveži samo del strani namesto celotne strani. Registrirate partial z metodo add_partial, kjer navedete selector CSS selektor elementa, ki ga je treba osvežiti, in render_callback PHP funkcijo, ki generira nov HTML za ta element. To je idealno za kompleksne elemente, katerih videz je odvisen od več nastavitev, saj je enostavneje kot pisanje JavaScript-a za vsako možno kombinacijo sprememb in hitreje kot popolno osveževanje strani.

Validacija in saniranje

Sanitize callback

Vsaka nastavitev mora imeti sanitize_callback funkcijo, ki očisti in validira uporabniški vnos pred shranjevanjem v zbirko podatkov. WordPress ponuja vgrajene funkcije za pogoste primere, vključno s sanitize_text_field za besedilna polja, sanitize_email za e-poštne naslove, sanitize_hex_color za heksadecimalne barve, absint za pozitivna cela števila, esc_url_raw za URL-je in wp_kses_post za HTML vsebino z dovoljenimi oznakami. Nikoli ne shranjujte uporabniškega vnosa brez saniranja, saj to odpre spletno stran za XSS in druge napade.

Validation callback

Od WordPress 4.6 obstaja validate_callback, ki lahko vrne WP_Error objekt s sporočilom o napaki, ki se prikaže uporabniku v Customizer vmesniku. V nasprotju s sanitize_callback, ki tiho popravlja neveljavne vrednosti, validate_callback eksplicitno obvesti uporabnika, da je vnos napačen. Na primer, lahko validirate, ali je URL veljaven, ali je število v dovoljenem obsegu ali da besedilo ne presega največje dolžine, in prikažete ustrezno sporočilo o napaki.

Prilagojeni paneli in kontrole

Ustvarjanje prilagojene kontrole

Za potrebe, ki jih vgrajene kontrole ne pokrivajo, lahko ustvarite prilagojeno kontrolo z dedovanjem razreda WP_Customize_Control. Prepišete metodo render_content za definicijo HTML kontrole in metodo enqueue za vključitev CSS-a in JavaScript-a, specifičnih za kontrolo. Primeri prilagojenih kontrol so range slider s prikazom trenutne vrednosti, toggle switch namesto checkbox-a, izbirnik Google Fonts s predogledom pisav, kontrola za razvrščanje elementov z drag-and-drop in kontrola za konfiguracijo postavitve z vizualnim prikazom možnosti.

Ustvarjanje panela

Paneli se registrirajo z metodo add_panel in so uporabni za organiziranje velikega števila sekcij v logične skupine. Tema z veliko nastavitvami ima lahko panele za glavo, footer, blog, barve, tipografijo in postavitev. Vsak panel vsebuje več sekcij, vsaka sekcija pa več kontrol. Ne pretiravajte z globino hierarhije, saj uporabniki ne marajo klikati skozi veliko ravni, da pridejo do želene nastavitve.

Pogojne nastavitve

Parameter active callback v sekcijah in kontrolah omogoča prikaz kontrol samo, ko so izpolnjeni določeni pogoji. Na primer, kontrola za barvo glave se prikaže samo, če je možnost prikaži glavo aktivirana, nastavitve za blog se prikažejo samo na blog strani v predogledu in možnosti za drsnik se prikažejo samo na domači strani. To naredi vmesnik čistejši in manj zmeden, saj uporabniki vidijo samo relevantne nastavitve za trenutni kontekst.

Integracija z Block temami

Z uvedbo Full Site Editinga v WordPress 5.9 je Customizer dobil alternativo v obliki Site Editorja. Block teme uporabljajo theme.json datoteko za definicijo nastavitev namesto Customizer API-ja. Vendar klasične teme in hibridne teme še naprej aktivno uporabljajo Customizer in ostaja pomemben del WordPress ekosistema. Če razvijate klasično temo, je Customizer še vedno priporočen način za implementacijo nastavitev teme z živim predogledom.

Najboljše prakse

• Uporabljajte postMessage transport, kadar koli je mogoče, za takojšen predogled sprememb
• Vedno implementirajte sanitize_callback za vsako nastavitev brez izjeme
• Nastavitve organizirajte logično v sekcije in panele za lažjo navigacijo
• Uporabljajte smiselne privzete vrednosti, da spletna stran izgleda dobro brez nastavljanja
• Dodajte opise sekcijam in kontrolam, da uporabniki razumejo, kaj vsaka nastavitev počne
• Preizkusite živi predogled na različnih straneh spletne strani, saj se vedenje lahko razlikuje
• Uporabljajte active_callback za prikaz kontrol samo, ko so relevantne
• Ne dodajte preveč nastavitev, saj to zmede uporabnike in oteži vzdrževanje

Zaključek

WordPress Theme Customizer je močno orodje za ustvarjanje intuitivnega vmesnika za nastavljanje videza teme z živim predogledom. Hierarhija panelov, sekcij in kontrol omogoča organiziran prikaz nastavitev, postMessage transport zagotavlja takojšnjo vizualno povratno informacijo, saniranje in validacija pa zagotavljata varnost podatkov. Na optimiziranem WordPress hosting okolju so podprte vse Customizer funkcionalnosti z optimiziranim strežnikom za hitro uporabo sprememb in zanesljivo delovanje vaše spletne strani.