Verktøykasse til Smart WordPress Utvikler Kirki

Velkommen til den andre delen av "Toolbox of the Smart WordPress Developer" -serien! I denne delen skal vi gå gjennom Kirki, en flott Customizer-verktøykasse for WordPress-temautviklere.

La oss begynne!

Et ord på Tilpasseren

WordPress versjon 3.4 introduserte en ny API kalt Tema-tilpassings-API og skjermbildet "Theme Customizer". (I versjon 4.1 ble ordet "tema" falt siden det ikke er utelukkende et "tema tilpasser".) Det tillater oss å legge til tilpasningsalternativer i Utseende> Tilpass meny, med mulighet til å endre temainnstillinger samtidig mens du forhåndsviser nettstedet.

Det skapte ikke mye hype først, men samfunnet vedtok det over tid, og vi ble gradvis mer og mer begeistret for denne praktiske API. Over to år etter utgivelsen har Customizer API utviklet seg til et fantastisk verktøy som til og med lar oss publisere innlegg og tilpasse påloggingsskjermen.

Det er ikke en overstatement å si at Customizer er en av de mest verdifulle APIene av WordPress på grunn av sin evne til å fullstendig endre brukeropplevelsen.

Hvis du vil lære mer om dette emnet, sjekk ut serien vår på Customizer, skrevet av Lee Pham.

Skriv inn Kirki: Enkel utvikling for Tilpassingsskjermen

Kirki er et flott verktøy for å forbedre opplevelsen av et temas brukere. Den fokuserer bare på tema tilpasning og utvider standard Customizer-kontrollene med veksle, rekkeviddeinnganger og bilder som radioknapper.

Når du får vite hvordan det virker, blir det enklere å bygge et tema tilpasningsskjermbilde enn noensinne.

Et kall til handling: Kirki er oversettelsesklar og trenger hjelp til å oversette dette open source-prosjektet til forskjellige språk. Jeg skal håndtere den tyrkiske oversettelsen, og det ville være flott hvis du kunne bidra til å oversette Kirki til ditt språk. Hvis du vil bidra, kontakt Aristeides Stathopoulos, forfatter av Kirki, for detaljer.

Embedding Kirki i temaet ditt og konfigurere det

Bundling temaet ditt med Kirki er veldig enkelt, faktisk. Du trenger bare å laste ned den nyeste versjonen fra GitHub, pakke innholdet inn i en mappe i temaet ditt, og inkludere hoved plugin-filen (ved å bruke include_once () funksjon) i temaet ditt functions.php fil.

Her er et eksempel:

Stykke kake, ikke sant? Under det kan du opprette en konfigurasjon for å unngå konflikter med andre temaer eller plugins som også bruker Kirki:

 'edit_theme_options', 'option_type' => 'alternativ', 'option_name' => 'my_theme',))); ?>

Ferdig!

Bruke Kirki i temaet ditt

Nå har vi lært om hvordan å bygge inn og konfigurere Kirki i våre temaer, det er på tide å se noen eksempler på hvordan du bygger vår tema tilpasningsside.

La oss starte med det grunnleggende. Her er koden til en grunnleggende installasjon med noen paneler og seksjoner, men uten kontrollfelter:

 10, 'title' => __ ('My Title', 'textdomain'), 'description' => __ ('Min beskrivelse', 'textdomain'))); / ** * Legg til deler * / Kirki :: add_section ('custom_css', array ('title' => __ ('Custom CSS'), 'description' => __ ('Legg til tilpasset CSS her'), 'panel' => "// Ikke vanligvis nødvendig. 'Prioritet' => 160, 'capability' => 'edit_theme_options', 'theme_supports' =>", // Sjelden nødvendig.)); ?>

Nå, la oss se om kontrollfeltene Kirki gir.

Kontrollfelt Typer Kirki

Etter at du har opprettet paneler og seksjoner, kan du fylle ut seksjonene med "kontrollfelt". Her er koden for å legge til et felt i en seksjon:

 'tekst', 'setting' => 'text_demo', 'label' => __ ('Dette er etiketten', 'kirki'), 'description' => __ ('Dette er kontrollbeskrivelsen', 'kirki' ), 'help' => __ ('Dette er litt ekstra hjelpetekst.', 'kirki'), 'section' => 'my_section', 'default' => __ ('Dette er noen standardtekst', 'kirki '),' prioritet '=> 10,)); ?>

Som jeg sa før, Kirki strekker standard kontrollfeltliste med nye. For å skrive en mer "komplett" opplæring, vil jeg inkludere kjernekontrollfeltene samt Kirkis ekstra kontrollfelt.

1. tekst lar deg legge til en enkel tekstinngang.
2. textarea lar deg legge til et tekstområde.
3. redaktør lar deg legge til en WYSIWYG-editor.
4. radio lar deg legge til radioknapper.
5. avkrysnings lar deg legge til boksene.
6. farge og farge-alfa (støtter gjennomsiktighet) lar deg velge en farge med en fin fargevalg.
7. bakgrunn lar deg legge til en komplett CSS bakgrunns tilpasser.
8. palett lar deg legge til en fargepalett.
9. å velge lar deg legge til en rullegardinmeny.
10. Select2 lar deg legge til en "bedre" utvalgsmeny, forskjellig fra standardinnstillingen HTML-element.
11. Select2-multiplum lar deg legge til en valgmeny med flere valg. (Wild guess: Dette kan fusjoneres med Select2 feltet i fremtiden.)
12. dropdown-sider lar deg legge til en rullegardinmeny som viser sidene i databasen.
13. laste opp lar deg legge til den opprinnelige opplasteren.
14. bilde lar deg legge til den opprinnelige bildevelgeren / opplasteren.
15. radio-bilde lar deg legge til bilder som fungerer som radioknapper.
16. radio-buttonset lar deg legge til et knappsett som fungerer som radioknapper.
17. Nummer lar deg legge til et HTML5-nummerinngang.
18. glidebryteren lar deg legge til en skyter for HTML5-serien.
19. multicheck lar deg legge til en liste med flere boksinnganger.
20. bytte om lar deg legge til en "bryter" -knapp som fungerer som en avkrysningsboks, men finere.
21. veksle lar deg legge til en "veksle" -knapp som også fungerer som en avkrysningsboks.
22. sorterbar lar deg legge til en sorterbar liste over avmerkingsbokser.
23. tilpasset lar deg legge til et egendefinert kontrollfelt, som egentlig er et gyldig HTML-kodefragment.

Styling Kirki

Kirki har noen ganske kule innstillinger for deg å lage en Tilpasset Tilpasser for temaet ditt. Du kan vise en logo over kontrollfeltene, angi et annet fargevalg for Tilpassingsprogrammet og så videre.

• LOGO_IMAGE: Angir logoets bildeadresse.
• beskrivelse: Angir en beskrivelsestekst som vises når du klikker på logoen.
• color_active: Angir den "aktive" fargen for menyelementer, hjelpeknapper og slikt.
• color_light: Angir den "sekundære" fargen for deaktiverte og inaktive kontroller.
• color_select: Angir den "valgte" fargen for, vel, utvalgte ting.
• color_accent: Angir "aksent" -farge som brukes på glidebryter og bildevalg.
• color_back: Angir bakgrunnsfargen for Tilpassingsprogrammet.
• url_path: Angir URL-banen for Kirki, som brukes til å laste inn CSS-filer i sin /eiendeler/ mappe.
• stylesheet_id: Stylesheet ID til å angi som håndtak i CSS enqueueing prosesser.

For å angi disse stilalternativene, må du bruke Kirki / config filter. Her er et eksempel på hvordan du konfigurerer Kirki:

Å få verdiene

Du må bruke verdiene i temaet ditt som Kirki butikker, ikke sant? Dette er hvordan:

Så enkelt som det. Selvfølgelig kan du fortsatt bruke kjernen get_option () og get_theme_mod () funksjoner.

Wrapping Up for Today

Verktøy som dette gjør WordPress enda mer brukervennlig og lett å utvikle, tror du ikke? Som jeg sa i serien introduksjon, kommer kraften til WordPress fra sitt samfunn, og verktøy som dette er nøkkelen til samfunnsvekst. Kirki tilbyr mer enn jeg skrev i denne opplæringen, og Ari (forfatteren) lover at han vil fortsette å utvikle Kirki for, i hans ord, så lenge det tar.

Hva synes du om Kirki? Skyt dine tanker i kommentarfeltet nedenfor. Og hvis du likte artikkelen, ikke glem å dele den med vennene dine!

Vi ser deg i neste del der vi skal dekke Plug-in for sjekk.