WordPress theme customizer vodič

Što je WordPress Theme Customizer

WordPress sistem za prilagođavanje Theme Customizer je ugrađeni alat koji omogućuje vizualno prilagođavanje izgleda sajta sa pregledom promjena u realnom vremenu. Umjesto da mijenjate kod teme ili koristite odvojene stranice za podešavanja, Customizer pruža unificirani interfejs gdje vidite efekte svake promjene prije nego što je sačuvate. Pristupa mu se preko Izgled, Prilagodi u admin panelu. Ako tek počinjete, pogledajte naš uputa za postavljanje WordPress-a. Ako još niste instalirali WordPress, pogledajte naš korak-po-korak vodič za WordPress ili dodavanjem /wp-admin/customize.php na URL vašeg sajta.

Customizer je uveden u WordPress 3.4 i od tada je kontinuirano unapređivan sa svakom novom verzijom. Koristi AJAX za komunikaciju sa serverom i JavaScript za real-time preview što pruža glatko korisničko iskustvo bez osvežavanja stranice. Svi WordPress temelji i većina kvalitetnih tema koriste Customizer za svoja podešavanja.

Anatomija Customizer-a

Panels, Sections i Controls

Customizer je organiziran u hijerarhijsku strukturu sa tri nivoa. Panels su najšira kategorija i služe za grupisanje srodnih sekcija, na primjer panel Header koji sadrži sekcije za logo, navigaciju i top bar. Sections su grupe povezanih kontrola, na primjer sekcija Boje koja sadrži kontrole za boju pozadine, teksta i linkova. Controls su pojedinačni elementi za unos podešavanja poput birača boja, padajućih menija, tekstualnih polja i upload kontrola za slike.

Settings i Transport

Svaki Control je povezan sa Setting koji definira gdje se vrijednost čuva i kako se primjenjuje. Setting može čuvati vrijednost u bazi podataka kao theme_mod ili option. Transport parametar određuje način primjene promjene gdje refresh osvežava preview okvir pri svakoj promijeni a postMessage koristi JavaScript za trenutnu primjenu bez osvežavanja. PostMessage je znatno brži i pruža bolje korisničko iskustvo ali zahtijeva dodatni JavaScript kod za svaku kontrolu.

Registrovanje sekcija i kontrola

Dodavanje sekcije

Sekcije se registriraju u functions.php korištenjem customize_register hook-a. Pozivate $wp_customize add_section metodu sa jedinstvenim ID-jem i nizom parametara koji uključuju title za naziv sekcije, description za opis koji se prikazuje na vrhu sekcije, priority za redoslijed prikazivanja gdje niži broj znači viša pozicija i panel ako želite sekciju smestite unutar panela. Primjer je kreiranje sekcije za podešavanja zaglavlja sa naslovom Podešavanja zaglavlja, opisom funkcije i prioritetom 30.

Dodavanje podešavanja i kontrole

Za svatko podešavanje najpre registrirate setting sa add_setting metodom gdje navodite default vrijednost, transport tip i sanitize_callback funkciju za validaciju unosa. Zatim dodajete control sa add_control metodom koja definira tip kontrole, labelu, sekciju kojoj pripada i prioritet. WordPress nudi ugrađene tipove kontrola uključujući text za tekstualno polje, textarea za višelinijski tekst, checkbox za polje za potvrdu, radio za radio dugmad, select za padajući meni, dropdown-pages za izbor stranice i number za numeričko polje.

Napredne kontrole

WordPress ima ugrađene napredne kontrole za specifične tipove podataka. WP_Customize_Color_Control prikazuje birač boja sa hex vrijednošću, WP_Customize_Image_Control omogućuje upload ili izbor slike iz media library-ja, WP_Customize_Cropped_Image_Control dodaje mogućnost izrezivanja slike na željene dimenzije i WP_Customize_Media_Control je univerzalna kontrola za bilo koji tip medija. Za korištenje ovih kontrola instancirate ih direktno umjesto pozivanja add_control sa tipom jer su to PHP klase sa specifičnim parametrima.

Live Preview sa postMessage

PHP strana

Za aktiviranje live preview-a bez osvežavanja postavite transport parametar na postMessage u add_setting pozivu. Ovo govori Customizer-u da koristi JavaScript za primjenu promjena umjesto osvežavanja cijele stranice. U izlaznom kodu teme koristite get_theme_mod funkciju za čitanje sačuvane vrijednosti i primenite je na odgovarajući element kroz inline CSS ili klasu.

JavaScript strana

Kreirajte JavaScript datoteka koji se učitava samo u Customizer preview-u korištenjem customize_preview_init hook-a za enqueue-ovanje skripte. U skripti koristite wp.customize API da osluškujete promjene podešavanja i primenjujete ih na elemente u preview-u. Za promjenu boje na primjer osluškujete promjenu header_bg_color podešavanja i ažurirate CSS properti odgovarajućeg elementa. Za promjenu teksta mijenjate innerHTML elementa. PostMessage pruža trenutnu vizuelnu povratnu informaciju bez kašnjenja što značajno poboljšava korisničko iskustvo.

Selective Refresh

Selective Refresh je hibridni pristup uveden u WordPress 4.5 koji osvežava samo dio stranice umjesto cijele stranice. Registrujete partial sa add_partial metodom gdje navodite selector CSS selektor elementa koji treba osvežiti i render_callback PHP funkciju koja generiše novi HTML za taj element. Ovo je idealno za složene elemente čiji izgled ovisi o više podešavanja jer je jednostavnije od pisanja JavaScript-a za svaku moguću kombinaciju promjena a brže je od potpunog osvežavanja stranice.

Validacija i sanitizacija

Sanitize callback

Svatko podešavanje mora imati sanitize_callback funkciju koja čisti i validira korisnički unos prije čuvanja u bazi. WordPress nudi ugrađene funkcije za česte slučajeve uključujući sanitize_text_field za tekstualna polja, sanitize_email za email adrese, sanitize_hex_color za heksadecimalne boje, absint za pozitivne cijele brojeve, esc_url_raw za URL-ove i wp_kses_post za HTML sadržaj sa dozvoljenim tagovima. Nikada ne čuvajte korisnički unos bez sanitizacije jer to otvara sajt za XSS i druge napade.

Validation callback

Od WordPress 4.6 postoji validate_callback koji može vratiti WP_Error objekat sa porukom o grešci koja se prikazuje korisniku u Customizer interfejsu. Za razliku od sanitize_callback koji tiho ispravlja nevažeće vrijednosti, validate_callback eksplicitno obavještava korisnika da je unos neispravan. Na primjer možete validirati da je URL validan, da je broj u dozvoljenom opsegu ili da tekst ne prelazi maksimalnu dužinu i prikazati odgovarajuću poruku greške.

Prilagođeni paneli i kontrole

Kreiranje prilagođene kontrole

Za potrebe koje ugrađene kontrole ne pokrivaju možete kreirati prilagođenu kontrolu nasljeđivanjem WP_Customize_Control klase. Override-ujete render_content metodu da definirate HTML kontrole i enqueue metodu za uključivanje CSS-a i JavaScript-a specifičnih za kontrolu. Primjeri prilagođenih kontrola su range slider sa prikazom trenutne vrijednosti, toggle switch umjesto checkbox-a, Google Fonts birač sa preview-om fontova, kontrola za sortiranje elemenata drag-and-drop-om i kontrola za konfiguraciju layout-a sa vizualnim prikazom opcija.

Kreiranje panela

Paneli se registriraju sa add_panel metodom i korisni su za organizovanje velikog broja sekcija u logičke grupe. Tema sa mnogo podešavanja može imati panele za zaglavlje, footer, blog, boje, tipografiju i layout. Svaki panel sadrži više sekcija a svaka sekcija više kontrola. Ne preterujte sa dubinom hijerarhije jer korisnici ne vole da klikću kroz mnogo nivoa da bi došli do željenog podešavanja.

Conditional podešavanja

Active callback parametar u sekcijama i kontrolama omogućuje prikazivanje kontrola samo kada su ispunjeni određeni uvjeti. Na primjer kontrola za boju zaglavlja se prikazuje samo ako je opcija prikaži zaglavlje aktivirana, podešavanja za blog se prikazuju samo na blog stranici u preview-u i opcije za slider se prikazuju samo na početnoj stranici. Ovo čini interfejs čistijim i manje zbunjujućim jer korisnici vide samo relevantna podešavanja za trenutni kontekst.

Integracija sa Block temama

Sa uvođenjem Full Site Editing-a u WordPress 5.9, Customizer je dobio alternativu u vidu Site Editor-a. Block teme koriste theme.json datoteka za definisanje podešavanja umjesto Customizer API-ja. Međutim klasične teme i hibridne teme i dalje aktivno koriste Customizer i on ostaje važan dio WordPress ekosistema. Ako razvijate klasičnu temu, Customizer je i dalje preporučeni način za implementaciju podešavanja teme sa live preview-om.

Best practices

• Koristite postMessage transport kad god je moguće za trenutni preview promjena
• Uvijek implementirajte sanitize_callback za svatko podešavanje bez izuzetka
• Organizirajte podešavanja logično u sekcije i panele za lakšu navigaciju
• Koristite smislene default vrijednosti da sajt izgleda dobro bez podešavanja
• Dodajte opise sekcijama i kontrolama da korisnici razumiju što svatko podešavanje radi
• Testirajte live preview na različitim stranicama sajta jer se ponašanje može razlikovati
• Koristite active_callback za prikazivanje kontrola samo kada su relevantne
• Ne dodajte previše podešavanja jer to zbunjuje korisnike i otežava održavanje

Zaključak

WordPress Theme Customizer je moćan alat za kreiranje intuitivnog interfejsa za podešavanje izgleda teme sa live preview-om. Hijerarhija panela, sekcija i kontrola omogućuje organizirano prikazivanje podešavanja, postMessage transport pruža trenutnu vizuelnu povratnu informaciju a sanitizacija i validacija osiguravaju sigurnost podataka. Na optimizovanom WordPress hosting okruženju podržane su sve Customizer funkcionalnosti sa optimizovanim serverom za brzu primjenu promjena i pouzdan rad vašeg sajta.