Share
Bine ați venit la a doua parte a seriei "Toolbox of the Smart Wordpress Developer"! În această parte, vom trece prin Kirki, un set de instrumente personalizate personalizate pentru dezvoltatorii de teme WordPress.
Sa incepem!
WordPress versiunea 3.4 a introdus un nou API numit Tema API Personalizare și ecranul "Tema personalizator". (În versiunea 4.1, cuvântul "Temă" a fost abandonat, deoarece nu este exclusiv un "personalizator temă".) Aceasta ne permite să adăugăm opțiuni de personalizare în Aspect> Personalizați meniu, cu posibilitatea de a modifica simultan setările temei în timp ce previzualizați site-ul web.
Nu a creat prea mult hype la început, dar comunitatea a adoptat-o de-a lungul timpului și am devenit din ce în ce mai entuziasmați de acest API la îndemână. Peste doi ani de la lansare, Customizer API-ul a evoluat într-un utilitar minunat care chiar ne permite să publicăm mesaje și să personalizăm ecranul de conectare.
Nu este un exagerat de spus că Customizer este unul dintre cele mai valoroase API-uri ale WordPress, datorită capacității sale de a schimba complet experiența utilizatorilor.
Dacă doriți să aflați mai multe despre acest subiect, consultați seria noastră despre Customizer, scrisă de Lee Pham.
Kirki este un instrument excelent pentru îmbunătățirea experienței utilizatorilor unei teme. Se concentrează exclusiv asupra personalizării temelor și extinde comenzile personalizate implicite cu butoane, intrări și imagini ca butoane radio.
Odată ce veți afla cum funcționează, construirea unui ecran de personalizare a temelor va fi mai ușor decât oricând.
O chemare la acțiune: Kirki este pregătit pentru traducere și are nevoie de ajutorul dvs. pentru a traduce acest proiect open source în diferite limbi. Mă voi ocupa de traducerea turcă și ar fi minunat să puteți ajuta să traduceți Kirki în limba dvs. Dacă doriți să contribuiți, contactați Aristeides Stathopoulos, autorul Kirki, pentru detalii.
Împachetarea temei cu Kirki este de fapt foarte ușoară. Trebuie doar să descărcați cea mai recentă versiune de la GitHub, să extrageți conținutul într-un folder din tema dvs. și să includeți fișierul plugin principal (utilizând include_once () funcție) în tema proprie functions.php fişier.
Iată un exemplu:
Bucată de tort, nu-i așa? Mai jos, puteți crea o configurație pentru a evita conflictele cu alte teme sau pluginuri care utilizează și Kirki:
'edit_theme_options', 'option_type' => 'opțiune', 'opțiune_name' => 'my_theme',)); ?>
Terminat!
Acum am învățat cum să încorporăm și să configuram Kirki în temele noastre, este timpul să vedem câteva exemple despre cum să construim pagina de personalizare a temelor.
Să începem cu elementele de bază. Iată codul unei instalații de bază cu unele panouri și secțiuni dar fără câmpuri de control:
Accentsconagua
10, 'title' => __ ('Titlul meu', 'textdomain'), 'description' => __ ('Descrierea mea', 'textdomain'),)); / ** * Adaugă secțiuni * / Kirki :: add_section ('custom_css', array ('title' => __ ('Custom CSS' => ", // nu este de obicei necesar. 'Prioritate' => 160, 'capability' => 'edit_theme_options', 'theme_supports' => ', Rarely needed.)); ?> Acum, să vedem despre câmpurile de control pe care Kirki le oferă.
După crearea panourilor și secțiunilor, puteți completa secțiunile cu "câmpuri de control". Iată codul pentru a adăuga un câmp într-o secțiune:
'text', 'setare' => 'text_demo', 'label' => __ ('Aceasta este eticheta', 'kirki' ), 'help' => __ ('Acesta este un text de ajutor suplimentar', 'kirki'), 'section' => 'my_section' '),' prioritate '=> 10,)); ?> După cum am spus înainte, Kirki extinde câmpurile de control implicite sunt listate cu cele noi. Din motive de scriere a unui tutorial mai complet, voi include câmpurile de control de bază, precum și câmpurile suplimentare de control ale lui Kirki.
text vă permite să adăugați o introducere simplă a textului.textarea vă permite să adăugați o textare.editor vă permite să adăugați un editor WYSIWYG.radio vă permite să adăugați butoane radio.Caseta de bifat vă permite să adăugați casete de selectare.culoare și culoare alfa (acceptă transparența) vă permit să selectați o culoare cu un picker frumos de culoare.fundal vă permite să adăugați un personalizator complet de fundal CSS.paletă vă permite să adăugați o paletă de culori.Selectați vă permite să adăugați un meniu derulant.Select2 vă permite să adăugați un meniu de selecție "mai bun", diferit de cel implicit Select2 multiple vă permite să adăugați un meniu de selecție cu mai multe opțiuni. (Ghicitoare sălbatică: acest lucru ar putea fi fuzionat cu Select2 în viitor.)derulante pagini vă permite să adăugați un meniu derulant care să indice paginile din baza de date.încărcați vă permite să adăugați încărcătorul nativ.imagine vă permite să adăugați selectorul / încărcătorul imaginilor native.de radio-imagine vă permite să adăugați imagini care acționează ca butoane radio.radio buttonset vă permite să adăugați un set de butoane care acționează ca butoane radio.număr vă permite să adăugați o intrare numerică HTML5.cursor vă permite să adăugați un cursor HTML5.multicheck vă permite să adăugați o listă cu mai multe intrări din caseta de validare.intrerupator vă permite să adăugați un buton "comutator" care se comportă ca o casetă de selectare, dar mai frumoasă.comutare vă permite să adăugați un buton "comutare" care se comportă de asemenea ca o casetă de selectare.Sortable vă permite să adăugați o listă de comenzi cu casetele de selectare.personalizat vă permite să adăugați un câmp de control personalizat, care este în esență orice fragment de cod HTML valid.Kirki are câteva setări destul de interesante pentru tine de a face personalizat personalizat pentru tema ta. Puteți afișa un logo peste câmpurile de control, puteți seta o schemă diferită de culoare pentru personalizatorul și așa mai departe.
LOGO_IMAGE: Specifică adresa URL a imaginii logo-ului.Descriere: Specifică un text de descriere care va fi afișat la apăsarea logo-ului.color_active: Specifică culoarea "activă" pentru elementele de meniu, butoanele de ajutor și altele asemenea.color_light: Specifică culoarea "secundară" pentru comenzile dezactivate și inactive.color_select: Specifică culoarea "selectată" pentru chestiile selectate.color_accent: Specifică culoarea "accent" utilizată în controalele cursorului și selectarea imaginii.color_back: Specifică culoarea de fundal pentru Customizer.url_path: Specifică calea URL pentru Kirki, utilizată pentru încărcarea fișierelor CSS în / active / pliant.stylesheet_id: ID-ul foii de stil pentru a seta ca mâner în procesele de enqueuement CSS.Pentru a seta aceste opțiuni de stil, va trebui să utilizați Kirki / config filtru. Iată un exemplu de configurare a lui Kirki:
Trebuie să utilizați valorile din tema pe care le stochează Kirki, nu? Iată cum:
Simplu ca asta. Desigur, puteți utiliza în continuare nucleul get_option () și get_theme_mod () funcții.
Instrumente de acest gen fac WordPress chiar mai ușor de utilizat și ușor de dezvoltat, nu crezi? Așa cum am spus în introducerea seriei, puterea WordPress vine de la comunitatea sa și astfel de instrumente sunt cheia dezvoltării comunității. Kirki oferă mai mult decât am scris în acest tutorial, iar Ari (autorul) promite că va continua să-l dezvolte pe Kirki pentru că, în cuvintele sale, atâta timp cât este nevoie.
Ce crezi despre Kirki? Trageți-vă gândurile în secțiunea Comentarii mai jos. Și dacă ți-a plăcut articolul, nu uita să îl împarți cu prietenii tăi!
Vedeți în partea următoare unde vom acoperi pluginul Theme Check.
