Share
Welkom bij het tweede deel van de serie "Toolbox van de Smart WordPress Developer"! In dit deel gaan we door Kirki, een geweldige toolkit voor Customizer voor WordPress-thema-ontwikkelaars.
Laten we beginnen!
WordPress versie 3.4 introduceerde een nieuwe API genaamd de Theme Customization API en het "Theme Customizer" -scherm. (In versie 4.1 is het woord 'Thema' weggelaten omdat het niet exclusief een 'thema-aanpasser' is.) Hiermee kunnen we aanpassingsopties toevoegen in de Uiterlijk> Aanpassen menu, met de mogelijkheid om thema-instellingen tegelijkertijd te wijzigen tijdens het bekijken van de website.
Het creëerde in eerste instantie niet veel hype, maar de community nam het na verloop van tijd over, en we werden geleidelijk meer en meer enthousiast over deze handige API. Meer dan twee jaar na de release is de Customizer API uitgegroeid tot een geweldig hulpprogramma waarmee we zelfs berichten kunnen publiceren en het inlogscherm kunnen aanpassen.
Het is geen overdrijving om te zeggen dat Customizer een van de meest waardevolle API's van WordPress is vanwege het vermogen om de gebruikerservaring volledig te veranderen.
Als je meer wilt weten over dit onderwerp, bekijk dan onze serie over de Customizer, geschreven door Lee Pham.
Kirki is een geweldig hulpmiddel om de ervaring van gebruikers van een thema te verbeteren. Het richt zich uitsluitend op thema-aanpassing en breidt de standaard Customizer-bedieningselementen uit met schakelaars, bereikinvoer en afbeeldingen als keuzerondjes.
Als je eenmaal weet hoe het werkt, is het bouwen van een thema-aanpassingsscherm eenvoudiger dan ooit.
Een oproep tot actie: Kirki is klaar voor vertaling en heeft jouw hulp nodig om dit open-sourceproject in verschillende talen te vertalen. Ik ga de Turkse vertaling afhandelen, en het zou geweldig zijn als je Kirki zou helpen vertalen in jouw taal. Als je wilt bijdragen, neem voor meer informatie contact op met Aristeides Stathopoulos, auteur van Kirki.
Je thema bundelen met Kirki is eigenlijk heel eenvoudig. U hoeft alleen de nieuwste versie van GitHub te downloaden, de inhoud uit te pakken in een map in uw thema en het hoofdbestand van de plug-in (met behulp van de include_once () functie) in uw thema's functions.php het dossier.
Hier is een voorbeeld:
Fluitje van een cent, toch? Daaronder kunt u een configuratie maken om conflicten met andere thema's of plug-ins die ook Kirki gebruiken te voorkomen:
'edit_theme_options', 'option_type' => 'option', 'option_name' => 'my_theme',)); ?>
Gedaan!
Nu we hebben geleerd hoe we Kirki kunnen insluiten en configureren in onze thema's, is het tijd om enkele voorbeelden te zien van het maken van onze themaaanpassingspagina..
Laten we beginnen met de basis. Hier is de code van een basisinstallatie met enkele panelen en secties maar zonder besturingsvelden:
Accentsconagua
10, 'title' => __ ('Mijn titel', 'textdomain'), 'description' => __ ('Mijn beschrijving', 'textdomain'),)); / ** * Secties toevoegen * / Kirki :: add_section ('custom_css', array ('title' => __ ('Aangepaste CSS'), 'description' => __ ('Aangepaste CSS hier toevoegen'), 'panel' => ", // Niet typisch nodig. 'Priority' => 160, 'capability' => 'edit_theme_options', 'theme_supports' =>", // Zelden nodig.)); ?> Laten we nu eens kijken naar de besturingsvelden die Kirki biedt.
Nadat u uw panelen en secties hebt gemaakt, kunt u de secties invullen met "besturingsvelden". Hier is de code om een veld toe te voegen binnen een sectie:
'text', 'setting' => 'text_demo', 'label' => __ ('Dit is het label', 'kirki'), 'description' => __ ('Dit is de besturingsbeschrijving', 'kirki' ), 'help' => __ ('Dit is wat extra helptekst.', 'kirki'), 'sectie' => 'mijn_section', 'standaard' => __ ('Dit is een standaardtekst', 'kirki '),' prioriteit '=> 10,)); ?> Zoals ik al eerder zei, Kirki strekt de standaardbesturingsveldenlijst met nieuwe. Voor het schrijven van een meer "volledige" tutorial zal ik de kerncontrolevelden en de aanvullende besturingsvelden van Kirki opnemen..
tekst kunt u een eenvoudige tekstinvoer toevoegen.textarea kunt u een tekstgebied toevoegen.editor kunt u een WYSIWYG-editor toevoegen.radio- kunt u keuzerondjes toevoegen.checkbox kunt u selectievakjes toevoegen.kleur en color-alpha (ondersteunt transparantie), kunt u een kleur selecteren met een mooie kleurenkiezer.achtergrond kunt u een volledige CSS-achtergrondaanpasser toevoegen.palet kunt u een kleurenpalet toevoegen.kiezen kunt u een vervolgkeuzemenu toevoegen.Select2 kunt u een "beter" selectiemenu toevoegen, anders dan de standaard Keuze2 meervoudige kunt u een selectiemenu toevoegen met meerdere keuzes. (Wilde gok: deze kan zijn samengevoegd met de Select2 veld in de toekomst.)dropdown-pagina's kunt u een vervolgkeuzemenu toevoegen met de pagina's in de database.uploaden kun je de native uploader toevoegen.beeld kunt u de native afbeeldingselector / uploader toevoegen.radio-image hiermee kunt u afbeeldingen toevoegen die fungeren als keuzerondje.radio-buttonset kunt u een knop toevoegen die fungeert als keuzerondje.aantal kunt u een HTML5-nummerinvoer toevoegen.schuif kunt u een HTML5-bereikschuifregelaar toevoegen.multicheck kunt u een lijst toevoegen met meerdere checkbox-ingangen.schakelaar kunt u een "switch" -knop toevoegen die als een selectievakje werkt, maar mooier.toggle kunt u een "schakelknop" toevoegen die ook als een selectievakje werkt.sorteerbaar kunt u een sorteerbare lijst met selectievakjes toevoegen.gewoonte kunt u een aangepast besturingsveld toevoegen, wat eigenlijk een geldig HTML-codefragment is.Kirki heeft een aantal coole instellingen om een te maken aangepaste Customizer voor jouw thema. U kunt een logo boven de bedieningsvelden weergeven, een ander kleurenschema voor de Customizer instellen enzovoort.
logo afbeelding: Specificeert de logo-afbeeldings-URL.Omschrijving: Geeft een beschrijvingstekst aan die wordt weergegeven wanneer op het logo wordt geklikt.color_active: Specificeert de "actieve" kleur voor menu-items, help-knoppen en dergelijke.color_light: Specificeert de "secundaire" kleur voor uitgeschakeld en inactief controles.color_select: Specificeert de "geselecteerde" kleur voor, nou ja, geselecteerde dingen.color_accent: Specificeert de "accent" -kleur die wordt gebruikt bij schuifregelaars en beeldselecties.color_back: Specificeert de achtergrondkleur voor de Customizer.url_path: Specificeert het URL-pad voor Kirki, gebruikt voor het laden van CSS-bestanden in zijn /middelen/ map.stylesheet_id: De stijlblad-ID die moet worden ingesteld als de handle in CSS-wachtrijprocessen.Om deze stijlopties in te stellen, moet u de kirki / config filter. Hier is een voorbeeld van hoe Kirki te configureren:
Je moet de waarden in je thema gebruiken die Kirki opslaat, toch? Hier is hoe:
Simpel als dat. Natuurlijk kun je nog steeds de kern gebruiken get_option () en get_theme_mod () functies.
Tools als deze maken WordPress nog gebruiksvriendelijker en gemakkelijk te ontwikkelen, vind je niet? Zoals ik in de serieinleiding al zei, komt de kracht van WordPress uit de gemeenschap en zijn tools zoals deze de sleutel tot communitygroei. Kirki biedt meer dan ik in deze tutorial schreef, en Ari (de auteur) belooft dat hij Kirki zal blijven ontwikkelen in zijn woorden, zo lang als het duurt.
Wat denk je van Kirki? Schiet op je gedachten in het gedeelte Opmerkingen hieronder. En als je het artikel leuk vond, vergeet dan niet om het met je vrienden te delen!
Zie je in het volgende gedeelte waar we de Theme Check-plugin zullen bespreken.
