Share
Willkommen zum zweiten Teil der "Toolbox des Smart WordPress Developer" -Serie! In diesem Teil werden wir Kirki, ein großartiges Customizer-Toolkit für WordPress-Theme-Entwickler, durchgehen.
Lass uns anfangen!
Mit der Version 3.4 von WordPress wurde eine neue API mit dem Namen API zum Anpassen von Designs und der "Theme Customizer" -Bildschirm. (In Version 4.1 wurde das Wort "Theme" weggelassen, da es sich nicht ausschließlich um einen "Theme - Customizer" handelt.) Es erlaubt uns, Anpassungsoptionen im Aussehen> Anpassen Menü, mit der Möglichkeit, Themeneinstellungen gleichzeitig zu ändern, während Sie eine Vorschau der Website anzeigen.
Anfangs hat es nicht viel Hype geschaffen, aber die Community hat es im Laufe der Zeit übernommen, und wir wurden immer mehr von dieser praktischen API begeistert. Über zwei Jahre nach seiner Veröffentlichung hat sich die Customizer-API zu einem wunderbaren Dienstprogramm entwickelt, mit dem wir sogar Posts veröffentlichen und den Anmeldebildschirm anpassen können.
Es ist keine Übertreibung, zu sagen, dass Customizer eine der wertvollsten APIs von WordPress ist, da es die Benutzererfahrung vollständig ändern kann.
Wenn Sie mehr zu diesem Thema erfahren möchten, lesen Sie unsere Serie über den Customizer von Lee Pham.
Kirki ist ein großartiges Werkzeug, um die Benutzererfahrung eines Themas zu verbessern. Es konzentriert sich ausschließlich auf die Anpassung von Motiven und erweitert die Standardsteuerelemente für den Customizer um Einstellungsmöglichkeiten, Bereichseingaben und Bilder als Optionsfelder.
Sobald Sie wissen, wie es funktioniert, ist es einfacher als je zuvor, einen Bildschirm zum Anpassen von Designs zu erstellen.
Ein Aufruf zum Handeln: Kirki ist bereit für die Übersetzung und benötigt Ihre Hilfe, um dieses Open-Source-Projekt in verschiedene Sprachen zu übersetzen. Ich werde mich mit der türkischen Übersetzung beschäftigen, und es wäre schön, wenn Sie helfen könnten, Kirki in Ihre Sprache zu übersetzen. Wenn Sie dazu beitragen möchten, wenden Sie sich an Aristeides Stathopoulos, Autor von Kirki, um weitere Informationen zu erhalten.
Das Thema mit Kirki zu bündeln ist eigentlich ganz einfach. Sie müssen nur die neueste Version von GitHub herunterladen, den Inhalt in einen Ordner in Ihrem Design extrahieren und die Haupt-Plugin-Datei einschließen (mithilfe der include_once () Funktion) in Ihrem Thema Functions.php Datei.
Hier ist ein Beispiel:
Ein Stück Kuchen, nicht wahr? Darunter können Sie eine Konfiguration erstellen, um Konflikte mit anderen Designs oder Plugins zu vermeiden, die ebenfalls Kirki verwenden:
'edit_theme_options', 'option_type' => 'option', 'option_name' => 'mein_theme',)); ?>
Erledigt!
Jetzt haben wir gelernt, wie Sie Kirki in unsere Designs einbetten und konfigurieren können. Es ist an der Zeit, einige Beispiele für die Erstellung unserer Customization-Seite zu sehen.
Beginnen wir mit den Grundlagen. Hier ist der Code einer Basisinstallation mit einigen Bereichen und Abschnitten, jedoch ohne Kontrollfelder:
Accentsconagua
10, 'title' => __ ('Mein Titel', 'textdomain'), 'description' => __ ('My Description', 'textdomain')))); / ** * Abschnitte hinzufügen * / Kirki :: add_section ('custom_css', array ('title' => __ ('Custom CSS'), 'description' => __ ('Custom CSS hier hinzufügen'), 'Panel' => ", // Wird normalerweise nicht benötigt. 'Priority' => 160, 'fähigkeit' => 'edit_theme_options', 'theme_supports' =>", // selten benötigt.)); ?> Sehen wir uns nun die Kontrollfelder an, die Kirki bereitstellt.
Nachdem Sie Ihre Panels und Abschnitte erstellt haben, können Sie die Abschnitte mit "Kontrollfeldern" ausfüllen. Hier ist der Code, um ein Feld innerhalb eines Abschnitts hinzuzufügen:
'text', 'setting' => 'text_demo', 'label' => __ ('Dies ist das Label', 'kirki'), 'description' => __ ('Dies ist die Beschreibung des Steuerelements', 'kirki' ), 'help' => __ ('Dies ist ein zusätzlicher Hilfetext.', 'kirki'), 'section' => 'my_section', 'default' => __ ('Dies ist ein Standardtext', 'kirki '),' Priorität '=> 10,)); ?> Wie ich schon sagte, Kirki erweitert die Standardsteuerfeldliste mit neuen. Um ein "vollständigeres" Tutorial zu schreiben, werde ich die Kernsteuerfelder sowie die zusätzlichen Steuerfelder von Kirki einbeziehen.
Text ermöglicht das Hinzufügen einer einfachen Texteingabe.Textbereich Ermöglicht das Hinzufügen eines Textbereichs.Editor Damit können Sie einen WYSIWYG-Editor hinzufügen.Radio können Sie Optionsfelder hinzufügen.Kontrollkästchen ermöglicht das Hinzufügen von Ankreuzfeldern.Farbe und Farbe-Alpha (unterstützt Transparenz) ermöglicht Ihnen die Auswahl einer Farbe mit einer schönen Farbauswahl.Hintergrund ermöglicht das Hinzufügen eines vollständigen CSS-Hintergrundanpassungsprogramms.Palette Damit können Sie eine Farbpalette hinzufügen.wählen Damit können Sie ein Dropdown-Menü hinzufügen.select2 ermöglicht das Hinzufügen eines "besseren" Auswahlmenüs, das sich vom Standard unterscheidet select2-multiple ermöglicht das Hinzufügen eines Auswahlmenüs mit mehreren Auswahlmöglichkeiten. (Wilde Vermutung: Dies könnte mit der select2 Feld in der Zukunft.)Dropdown-Seiten Damit können Sie ein Dropdown-Menü hinzufügen, das die Seiten in der Datenbank auflistet.hochladen Ermöglicht das Hinzufügen des nativen Uploaders.Bild ermöglicht das Hinzufügen des nativen Bildwählers / Uploaders.Radio-Bild können Sie Bilder hinzufügen, die als Optionsfelder fungieren.Radio-Buttonset ermöglicht das Hinzufügen eines Tastensets, das als Optionsfelder fungiert.Nummer Ermöglicht das Hinzufügen einer HTML5-Zahleneingabe.Schieberegler ermöglicht das Hinzufügen eines HTML5-Bereichs-Schiebereglers.Multicheck ermöglicht das Hinzufügen einer Liste mit mehreren Checkbox-Eingaben.Schalter Damit können Sie eine Schaltfläche hinzufügen, die wie ein Kontrollkästchen wirkt, aber schöner ist.Umschalten Ermöglicht das Hinzufügen einer Schaltfläche zum Umschalten, die auch als Kontrollkästchen fungiert.sortierbar ermöglicht das Hinzufügen einer sortierbaren Liste von Kontrollkästchen-Steuerelementen.Brauch ermöglicht das Hinzufügen eines benutzerdefinierten Steuerfelds, bei dem es sich grundsätzlich um ein beliebiges gültiges HTML-Codefragment handelt.Kirki hat einige ziemlich coole Einstellungen für Sie Customizer angepasst für dein Thema. Sie können ein Logo über den Steuerfeldern anzeigen, ein anderes Farbschema für den Customizer festlegen usw..
logo_image: Gibt die Logo-Image-URL an.Beschreibung: Bestimmt einen Beschreibungstext, der beim Klicken auf das Logo angezeigt wird.color_active: Bestimmt die "aktive" Farbe für Menüelemente, Hilfeschaltflächen und dergleichen.color_light: Bestimmt die "sekundäre" Farbe für deaktivierte und inaktive Steuerelemente.color_select: Bestimmt die "ausgewählte" Farbe für das ausgewählte Material.color_accent: Gibt die "Akzentfarbe" an, die für Schieberegler und Bildauswahl verwendet wird.color_back: Bestimmt die Hintergrundfarbe für den Customizer.URL-Pfad: Gibt den URL-Pfad für Kirki an, der zum Laden von CSS-Dateien in dessen verwendet wird /Vermögenswerte/ Mappe.stylesheet_id: Die Stylesheet-ID, die als Handle in CSS-Enqueueing-Prozessen festgelegt wird.Um diese Stiloptionen festzulegen, müssen Sie die kirki / config Filter. Hier ein Beispiel zur Konfiguration von Kirki:
Sie müssen die Werte in Ihrem Thema verwenden, die Kirki speichert, richtig? Hier ist wie:
So einfach ist das. Natürlich können Sie den Kern trotzdem verwenden get_option () und get_theme_mod () Funktionen.
Werkzeuge wie dieses machen WordPress noch benutzerfreundlicher und einfacher zu entwickeln, finden Sie nicht? Wie ich in der Einführung der Serie gesagt habe, kommt die Stärke von WordPress von seiner Community und Tools wie diese sind der Schlüssel zum Wachstum der Community. Kirki bietet mehr als ich in diesem Tutorial schrieb, und Ari (der Autor) verspricht, dass er Kirki in seinen Worten weiterentwickeln wird, so lange es dauert.
Was denkst du über Kirki? Schießen Sie Ihre Gedanken in den Kommentaren weiter unten. Und wenn Ihnen der Artikel gefallen hat, vergessen Sie nicht, ihn mit Ihren Freunden zu teilen!
Wir sehen uns im nächsten Teil, wo wir das Theme Check Plugin behandeln werden.
