Blog

Kirki Toolkit

Kirki Toolkit je alat pomoću koga možete napraviti opcije, koje će vašem klijenu omogućiti da bez kodiranja podešava izgled svog sajta

U skoro svakom projektu koji radite potrebno je napraviti opcije, koje će vašem klijenu omogućiti da bez kodiranja podešava izgled svog sajta ili menja neku funkcionalnost na istom.

WordPress Customizer API vam omogućava da lako i brzo unesete nove opcije bez potrebe da pravite ceo interfejs i pišete sve forme iz početka. Verovatno većina vas zna koliko je vremena potrebno da se napravi nova stranica sa podešavanjima za recimo novi plugin koji trenutno radite. Umesto toga, možemo iskoristiti Customizer i dodati opcije tamo gde će ih većina korisnika i tražiti. Ali korišćenje Customizer-a za malo kompleksnije opcije zahteva dodatno vreme, još ukoliko tu dodate dependency između opcija (varijanta gde bi se opcije prikazivale ili sakrivale zavisno od izbora korisnika) sve postaje mnogo komplikovanije. Naravno, postoji mnogo lakši način, a to je Kirki Toolkit.

Šta je zapravo Kirki Toolkit?

Neko kaže da je to options framework, dok neko tvrdi da nije framework već toolkit. Po meni, to je fantastičan alat koji nam omogućava da za dvadesetak minuta ubacimo nove opcije u već postojeću ili custom temu.

Kirki nije zamena za WP Customizer API. To je “prečica” koja nam omogućava da sa manje koda uradimo više, dok je istovremeno kompatibilan sa svim opcijama koje su drugi uneli koristeći Customizer API. Šta više preporučuje se svakome da prethodno upozna WP Customizer API kako bi sve bilo jasnije i lakše za razumevanje.

U ovom tekstu, kao primer, naprvićemo opciju pomoću koje će korisnik moći da promeni boju pozadine svoje teme. Koristićemo Twenty Sixteen temu kao osnovu za naš demo projekat.

Šta ćemo sve uraditi:

  1. Napraviti child temu
  2. Uneti Kirki helper klase i instalirati Kirki Toolkit plugin
  3. Postaviti opciju za promenu pozadine
  4. Promeniti pozadinu sajta koristeći Customizer

Napraviti child temu

Uvek kada radite modifikacije na postojećoj temi, pokušajte da koristite child temu. Tako ćete sačuvati sve izmene ukoliko ažurirate temu koju menjate novom verzijom. Dok smo još na početku, dobri bi bilo da omogućite debugging u WordPress-u.

Pre svega, uverite se da imate instaliranu Twenty Sixteen temu. Nećemo se detaljno baviti kreiranjem child teme jer to nije tema ovog teksta, zato samo pratite sledeće korake.

  • Napravite folder wp-content/themes/twentysixteen_child
  • U novom folderu napravite fajl style.css

  • A zatim i fajl functions.php

Otvorite u WP dashboard-u Appernace -> Themes gde bi trebalo da imate prikazanu Twenty Sixteen Child temu. Aktivirajte je.

Uneti Kirki helper klase

Napravite novi folder “admin” u child temi. Preuzmite Kirki helpers fajlove i iskopirajte class-my-theme-kirki.php i include-kirki.php u novokreirani folder. Otvorite functions.php iz child teme i ubacite sledeće:

Nakon toga izmenite naziv fajla iz class-my-theme-kirki.php u class-twentysixteen-child-kirki.php, a u samom fajlu svuda zamenite ime klase iz My_Theme_Kirki u Twentysixteen_Child_Kirki. Ovim smo genericko ime zamenili imenom naše child teme. Takodje u vašem functions.php fajlu promenite ime fajla kako bi izbegli fatal error:

Sada da objasnim čemu služe preuzeti fajlovi. Počeću od Kirki_Installer_Control klase koja se nalazi u include-kirki.php fajlu. Ova klasa kreira custom opciju (polje) u Customizer-u koja upozorava korisnika ukoliko nema instaliran Kirki Toolkit plugin, jer je on osnova koju koristimo za dodavanje opcija. Takodje, ova klasa nudi korisniku da jednim klikom instalira potraban plugin. Kliknite na Appernace -> Customizer u admin meniju, trebalo bi da levi panel izgleda ovako:

ap-kirki-toolkit-customizer

Sada kliknite na “Install now dugme” ili sami na drugi način instalirajte i aktivirajte Kirki Toolkit plugin.  Drugi način da upozorite korisnika da mu je potreban ovaj plugin je da koristite TGM Plugin Activation klasu, što nećemo pokriti u ovom tutorijalu.

Kirki Toolkit možete i ubaciti (embead) u vašu temu i izbeći situaciju gde vam je potreban plugin, ali u tom slučaju morate sami ažurirati fajlvove u slucaju potrebe. Takodje, ovaj metod nije dozvoljen po najnovijim pravilima Themeforest sajta, pa vaša tema neće proći review proces.

Twentysixteen_Child_Kirki klasa je wrapper za Kirki klasu koji će se pobrinuti da ukoliko dinamički generišemo CSS pomoću Kirki Toolkit-a ili koristimo Google fontove sve funkcioniše, iako se dogodi da plugin iz nekog razloga nije aktivan. Ova klasa je fallback sigurnost, ali neće prikazati opcije u Customizer-u kada plugin nije aktivan.

Postaviti opciju za promenu pozadine

Opciju za promenu pozadine ćemo dodati pomoću nove klase Twentysixteen_Child_Kirki_Fields koju ćemo dodati u novi fajl u našoj child temi admin/customizer.php. Molim vas kreirajte klasu i fajl:

Nakon kreiranja fajla, dodajte sledeću liniju koda u functions.php:

U kreiranu klasu dodaćemo novi public metod setup_options koji će dodati novo polje u Customizer-u, ali u novoj sekciji. Da bi dodali novo polje prvo moramo podesiti konfiguraciju:

Za ime konfiguracije obavezno postavite prefix koji je jednak imenu fajla foldera vaše teme. Pomoću argumenta ‘capability’ odredjujemo ko može da koristi opcije koje dodajemo. Za više detalja posetite link Roles and Capabilities. ‘option_type’ argument odredjuje kako ćemo pamtiti opcije u bazi. Za korišćenje u temi preporučujem da koristite ‘theme_mod’ varijantu kako bi svaka tema imala mogućnost da upiše u bazu svoje opcije. Ukratko rečeno, za pamćenje opcija u bazu koristiće se funkcija set_theme_mod koja će u wp_options tabeli kreirati upis theme_mods_ime_teme. Funkcija izgleda ovako:

Alternativa je da u konfiguraciji unesete ‘option_type’   => ‘option’ i tada će se umesto funckcije set_theme_mod za upis u bazu koristiti funkcija update_option koja se svakako koristi prilikom prve varijante. U ovom slučaju takodje morate uneti i argument ‘option_name’ => ‘ime_teme_ime_opcije’. Ukoliko dodajete opcije iz plugin-a onda je ovo rešenje bolje, jer će prilikom promene teme vaša podešavanja ostati ista. Pogledajte sve argumente za dodavanje konfiguracije.

Nakon dodavanja konfiguracije, dodaćemo sekciju u okviru koje ćemo dodati polje za promenu pozadine. Sva polja koja dodajemo u Customizer, moraju pripadati nekoj sekciji.

Ovde su ‘title’, ‘description’ i ‘capability’ argumenti jasni, ostaje nam samo ‘priority’ koji svojim nazivom već ukazuje na to da se njime odredjuje redosled prikazivanja sekcija u Customizer-u. Pogledajte sve argumente za dodavanje sekcija.

I napokon smo došli do toga da dodamo polje za biranje boje pozadine sajta.

U medoti setup_options u klasi Twentysixteen_Child_Kirki_Fields dodajte sledece:

Prilikom dodavanja polja potrebno je uneti id konfiguracije i argumente za kreiranje polja. Naša konfiguracija ima id “twentysixteen_child_config”. Argumenti za dodavanje polja u Customizer u našem slučaju imaju sledeća značenja:

  • type (obavezno polje) – tip polja koje dodajemo. Ovde pogledajte sve podržane tipove
  • settings (obavezno polje) – id polja, kako bi smo kasnije izvukli odabranu vrednost iz baze
  • label – Tekst koji opisuje polje
  • section (obavezno polje) – kojoj sekciji pripada polje
  • default (obavezno polje) – default vrednost polja
  • priority – redosled polja ukoliko ih ima više u sekciji
  • alpha – da li će color picker imati mogućnost alpha vrednosti
  • output – ovaj argument se precizira kada želite da se CSS automatski generiše i primenjuje. Više detalja ovde. Ovde smo odredili koju klasu gadja CSS (element) i njen property koji menjamo

Ovo je sve što smo planirali da unesemo za konfigurisanje Kirki Toolkit-a. Ostalo je da dodamo action hook koji će povezati naše opcije sa Customizer-om. U klasi Twentysixteen_Child_Kirki_Fields dodajte sledece u metod __construct koji smo ranije kreirali:

Takodje, na kraju fajla admin/customizer.php instancirajte klasu:

Naša klasa bi konačno trebalo da izgleda ovako

Promeniti pozadinu sajta koristeći Customizer

Nakon svega što smo uradili, kada odemo u admin menu Appernace -> Customize trebalo bi da kao poslednju sekciju imate opciju “Custom colors”.

ap-kirki-toolkit-custom-colors

 

Kliknite na nju, a zatim kliknite na polje “Select color”. Pozadina  Twenty Sixteen teme bi trebalo da je plava ili boje koje ste odabrali u color picker-u.

ap-kirki-toolkit-custom-colors-1

ap-kirki-toolkit-custom-colors-2

Probajte razne nijanse i vidite koja vam se najviše dopada 🙂 Zatim kliknite na “Save & Publish”, jer izmene u Customizer-u nisu zapamćene iako se uživo menjaju.

Kako uzeti vrednost dodatog polja

To je veoma jednostavno. Sve što treba da uradite je sledeće:

Gde option_name predstavlja id koji ste prilikom dodavanja polja uneli pod argumentom settings. U našem slučaju to je ‘settings’  => ‘site_color’, znači naš id je site_color.

Detaljno uputstvo o uzimanju vrednosti polja iz baze pročitajte ovde.

Suviše komplikovano?

Ukoliko vam se sve ovo čini suviše komplikovano, probajte da dodate sami polja preko WP Customizer API-a i uvidećete da je ovo veoma brzo i jednostavno. Posebno ukoliko koristite neku od naprednijh opcija Kirki Toolkit-a kao što je repeater polje.

Kada napravite osnovu za custom polja u Customizer-u u vašoj temi, dodavanje novih opcija traje samo par minuta.

Kirki je napravio starter temu (_s fork) za one koji žele da preuzmu sve integrisano i da odmah krenu sa razvojem custom teme.

Kompletan primer iz teksta

Kompletan primer iz teksta možete preuzeti ovde

Resursi

About the author

Aleksandar

Premium WordPress themes and plugins PHP developer. One of the founders of #WPNis

Add Comment

Click here to post a comment

Leave a Reply

@WPSerbia

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 98 other subscribers

%d bloggers like this: