Schnelle WordPress Customizer -Optionen mit Kirki

Eine Sache, an die WordPress -Benutzer gewöhnt haben, ist einfach, kein Code erforderlich, um die Optionen für die Themenanpassung zu erfordern. Die Idee ist: Laden Sie ein Thema herunter, aktivieren Sie es im Themenfeld, greifen Sie auf das Anpassungsfeld zu und beginnen Sie mit nur einem Mausklick die Farben, Layout, Schriftarten usw. des Themas.

WordPress bietet Themenentwicklern die Customizer -API. Dies ist ein sauberer, objektorientierter Satz von Methoden, die die Erstellung einer konsistenten Anpassungsschnittstelle erleichtern. Im Panel anpassen können Benutzer problemlos Änderungen vornehmen und sie live-Vorsicht vornehmen, ohne sich mit PHP- oder CSS-Code anlegen zu müssen.

Entwickeln von Themenoptionen mithilfe der Customizer -API, während er ein einfacher und logischer Prozess ist, beinhaltet das Schreiben einer bestimmten Menge an sich wiederholender Code. Um einige der Schritte zu reduzieren, die für die Erstellung funktionierender und sicherer Customizer-Optionen erforderlich sind, hat Aristeides Stathopoulos ein kostenloses und offenes Plugin, Kirki, entwickelt.

In diesem Beitrag werde ich zeigen, wie Sie Kirki in Ihr WordPress -Thema integrieren und wie Sie es verwenden, um einige Customizer -Optionen zu erstellen.

Key Takeaways

Kirki verbessert die WordPress Customizer -API, indem es eine einfachere Syntax- und erweiterte Funktionen bereitstellt, sodass Entwickler mehr mit weniger Code schreiben können.
Das Toolkit entwickelt sich ständig weiter, und Benutzer werden ermutigt, zu seiner Entwicklung auf Github beizutragen.
Kirki kann leicht in WordPress -Themen als Plugin oder als Bibliothek innerhalb des Themas integriert werden, was Flexibilität bei der Verwendung bietet.
Kirki bietet eine Vielzahl von Steuerelementen wie Farbpflückern, Funkbildern und Textbereiche, mit denen anpassbare Themenoptionen erstellt werden können, die für Endbenutzer einfach verwaltet werden können.
Das Toolkit unterstützt Echtzeit-Voransichten mit AJAX und verbessert die Benutzererfahrung, indem Sie sofortige Feedback zu Änderungen ohne Seiten-Reloads zulassen.

Was ist Kirki?

Lassen Sie uns hören, worum es bei Kirki vom Entwickler dahinter geht:

Kirki ist kein Rahmen. Es ist ein Toolkit, das es WordPress -Entwicklern ermöglicht, den Customizer zu verwenden und seine erweiterten Funktionen und Flexibilität zu nutzen, indem er den Code abstrahiert und es jedem erleichtert, schöne und aussagekräftige Benutzererlebnisse zu erstellen.

Kirki -Dokumentation

Ich möchte zwei Punkte zu diesem Toolkit nach Hause fahren.

• Kirki ersetzt die WordPress Customizer -API nicht. Es erstellt einen „Wrapper für die Standard -WordPress -Methoden, die die Syntax vereinfacht und Sie mehr mit weniger Code schreiben“. Neben der Kirki -API können Sie weiterhin native Customizer -Methoden verwenden. Noch besser ist es, dass Sie herzlich geraten haben, sich mit der Customizer -API vertraut zu machen, bevor Sie sich Kirki nähern. Wenn Sie nach einer nützlichen Einführung in das Customizer -Objekt suchen, besuchen Sie die WordPress -Themen -Customization -API von Narayan Prusty.
• Kirki befindet sich in einem Zustand ständiger Evolution und Verbesserung, ähnlich wie der WordPress Customizer selbst. Daher haben alle Fehlerberichte oder Anfragen nach neuen Funktionen ihren Platz im Github -Repo, in dem Sie die Entwicklungsversion des Plugins herunterladen und zur Entwicklung beitragen können.

Es ist Zeit, Kirki in Aktion zu sehen. Wenn Sie mitmachen möchten, haben Sie ein WordPress -Thema bereit oder schnappen Sie sich das Superminimal -Demo -Thema, das den gesamten Code enthält, der in diesem Beitrag besprochen wird.

wie man Kirki in Ihr Thema einbezieht

Kirki ist als WordPress -Plugin verpackt. Daher können Sie es vom WordPress.org Plugins -Repository oder direkt aus dem Backend Ihrer WordPress -Installation herunterladen und aktivieren und aktivieren.

Wenn Sie es vorziehen, Kirki in Ihr Thema als Bibliothek aufzunehmen, befolgen Sie die unten beschriebenen Schritte.

• Kopieren Sie das Kirki -Verzeichnis in den Ordner Ihres Themas.
  
  Im Demo -Thema für diesen Artikel befinden sich die Kirki -Dateien in einem Verzeichnis namens Inc.

• Machen Sie Ihr Thema mit Kirki "Gespräch", indem Sie diese Zeile zu Funktionen.php hinzufügen (Stellen Sie sicher, dass Sie den Pfad an den Kirki -Ordner anpassen, um die Dateistruktur Ihres Themas zu entsprechen).

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

• Fügen Sie eine Funktion hinzu, die die Kirki -Konfigurationsoptionen einbezieht und an den Kirki/Konfigurationsfilter angeschlossen wird. Es liegt an Ihnen, was Sie dieser Funktion hinzufügen möchten. Lassen Sie uns für diesen Beitrag auf ein Minimum durchführen, indem Sie den Code hinzufügen, den Kirki -Anforderungen hinzufügen, um den neuen Standort „aufmerksam“ zu machen, d. H. Der Ordner des Themas anstelle des Ordners des Plugins.

<span>function superminimal_customizer_config() {
</span>         <span>$args = array(
</span>        <span>// Only use this if you are bundling the plugin with your theme 
</span>        <span>'url_path'     => get_stylesheet_directory_uri() . '/inc/kirki/',
</span>
       <span>);
</span>       <span>return $args;
</span>       <span>}
</span>       <span>add_filter( 'kirki/config', 'superminimal_customizer_config' );</span>

In dieser Konfigurationsfunktion können Sie das Erscheinungsbild des WordPress Customizer für Ihr Thema steuern. Am wichtigsten ist, dass Sie hier den Code hinzufügen, der erforderlich ist, um alle Zeichenfolgen zu erstellen, die das Plugin aus Ihrem Thema übersetzbar übersetzt. Schauen Sie sich das Superminimal -Demo -Thema oder die Kirki -Dokumentationsseite an, um eine Anleitung dazu zu erhalten.

Lassen Sie uns Optionen addieren

Kirki ist jetzt bereit, uns zu helfen, einige Customizer -Optionen zu erstellen. Sie können Funktionen.php verwenden oder eine dedizierte Datei für die Aufgabe erstellen, sie liegt an Ihnen.

Customizer -Optionen in Abschnitten leben, die sich optional in Panels befinden. In dem Demo -Projekt dieses Artikels gruppieren ich alle Abschnitte in einem dedizierten Panel mit nativen Customizer -Methoden wie so.

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

Fügen Sie als Nächstes Abschnitte für die Site -Textfarben, das Site -Layout und die Fußzeilentextoptionen hinzu, indem Sie diesen Code direkt unter der vorherigen add_panel Customizer -Methode platzieren.

<span>function superminimal_customizer_config() {
</span>         <span>$args = array(
</span>        <span>// Only use this if you are bundling the plugin with your theme 
</span>        <span>'url_path'     => get_stylesheet_directory_uri() . '/inc/kirki/',
</span>
       <span>);
</span>       <span>return $args;
</span>       <span>}
</span>       <span>add_filter( 'kirki/config', 'superminimal_customizer_config' );</span>

Jetzt können Sie die erste kirki-betriebene Option hinzufügen.

Textfarbeoption

Alle Ihre Options-bezogenen Code sind in einer Funktion platziert zu werden. Diese Funktion wird dann durch den Kirki/Fields -Filter gefiltert.

<span>function superminimal_demo_panels_sections( $wp_customize ) {
</span>     <span>/**
</span><span>     * Add Panel
</span><span>     */
</span>     <span>$wp_customize->add_panel( 'sitepoint_demo_panel', array(
</span>      <span>'priority'    => 10,
</span>      <span>'title'       => __( 'SitePoint Demo Panel', 'superminimal' ),
</span>      <span>'description' => __( 'Kirki integration for SitePoint demo', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>//More code to come
</span>    <span>}
</span>    <span>add_action( 'customize_register', 'superminimal_demo_panels_sections' );</span>

Geben wir Ihren WordPress -Themenbenutzern eine einfache Möglichkeit, die Textfarbe zu ändern. Dies geschieht schnell mit Kirki. Fügen Sie den folgenden Code -Snippet in die Funktion superminimal_demo_fields () hinzu, direkt über den Return $ Fields. Stellungnahme.

<span>/**
</span><span>     * Add a Section for Site Text Colors
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_text_colors', array(
</span>      <span>'title'       => __( 'Site Text Colors', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Site Layout
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_site_layout', array(
</span>      <span>'title'       => __( 'Site Layout', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Footer Text
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_footer_text', array(
</span>      <span>'title'       => __( 'Footer Text', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );</span>

Kirki bietet eine kondensierte Syntax, um sowohl eine Einstellung als auch eine damit verbundene Kontrolle auf einmal hinzuzufügen.

Lassen Sie uns die $ Fields [] Array aufschlüsseln.

• Typ bezieht sich auf die spezifische Steuerung, bei der Benutzer den Wert ihrer ausgewählten Option eingeben, in diesem Fall die Farbsteuerung.
• Einstellung bezieht sich auf die ID der Customizer-Einstellung, die Live-Prävanie, Speichern und Bereinigung der Customizer-Objekte übernimmt.
• Etikett und Beschreibung sind da, um mit Benutzern zu kommunizieren. Das Etikett zeigt einen Titel für die Option an, und die Beschreibung gibt einen Hinweis darauf, was die Option tut.
• Abschnitt bezieht sich auf die ID des Abschnitts, in dem diese spezifische Farbkontrolle gehostet wird.
• Priorität bezieht sich auf die Position dieser spezifischen Farbkontrolle in Bezug auf andere Steuerelemente im selben Abschnitt.
• Standard wird auf den Standard -CSS -Farbwert gesetzt.
• Ausgabe ist die großartige Kirki -Art, den Wert der Einstellung anzuwenden. Füttern Sie es einfach mit dem CSS -Selektor und der Eigenschaft, und Kirki erledigt alle notwendigen Vorgänge.

Nach dem Beispiel können Sie auch eine Farboption für Links hinzufügen.

Geben Sie als nächstes den Benutzern Ihres Themas die Option zum Anpassen des Site -Layouts an.

Site -Layout -Option

Kirki bietet eine Reihe hoch entwickelter Customizer -Steuerelemente. Mein Favorit ist die Radio -Image -Steuerung.

So können Sie es Ihrem Thema hinzufügen, um den Benutzern die Möglichkeit zu bieten, das Layout ihrer Website zu ändern.

<span>function superminimal_demo_fields( $fields ) {
</span>      <span>//Add code here
</span>      
      <span>return $fields;
</span>    <span>}
</span>    <span>add_filter( 'kirki/fields', 'superminimal_demo_fields' );</span>

Platzieren Sie den Code oben direkt nach den vorherigen $ Fields [] Array -Snippet. Beachten Sie, wie kein Ausgabeparameter zum Code hinzugefügt wurde. Dies liegt daran, dass der Wert jeder Funkbildeingabe kein CSS -Eigenschaftswert ist.

Die Art und Weise, wie Sie den Wert aus der Einstellung von Superminimal_Layout extrahieren können, erfolgt nach der native Customizer get_theme_mod -Methode. Sie verwenden diesen Wert dann als Wert eines geeigneten HTML -Elements eines geeigneten HTML -Elements in der Vorlagendatei. Schließlich geht es nur darum, das entsprechende CSS zu schreiben, um das gewünschte Layout für die .Fullwidth, SideBar-Left und SideBar-Right-Klassen in Ihrem Stylesheet zu erreichen.

Schauen Sie sich die Details zur Implementierung der Layout -Option im Superminimal -Demo -Thema an.

Fußzeile Textoption

Wie oft sind Sie auf WordPress -Themenbenutzer gestoßen, die Sie bitten, ihnen dabei zu helfen, die Entwickler in den Fußzeilenbereich ihres Themas zu ersetzen? Durch das Hinzufügen einer Option, mit der Benutzer den Fußzeilentext einfach vom Customizer verwalten können, dauert es ein paar Minuten mit Kirki. Hier ist der Code.

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

Der obige Code gibt eine textarea aus, in der Benutzer Urheberrechtsbekanntmachungen, Credits usw. schreiben können

Um den in der textarea eingegebenen Text zu extrahieren und anzuzeigen, verwenden Sie die native Customizer -Methode Get_THEME_MOD in footer.php wie folgt.

<span>function superminimal_customizer_config() {
</span>         <span>$args = array(
</span>        <span>// Only use this if you are bundling the plugin with your theme 
</span>        <span>'url_path'     => get_stylesheet_directory_uri() . '/inc/kirki/',
</span>
       <span>);
</span>       <span>return $args;
</span>       <span>}
</span>       <span>add_filter( 'kirki/config', 'superminimal_customizer_config' );</span>

Schauen wir uns als nächstes an, was mehr Kirki tun kann, um die Benutzererfahrung mit dem WordPress Customizer zu verbessern.

So fügen Sie bedingte Optionen

hinzu

Als Themendesigner möchten Sie Benutzer nicht gerne mit einer Vielzahl verwirrender Optionen überwältigen. Einige Auswahlmöglichkeiten müssen erst getroffen werden, bis Benutzer eine spezifische Option auswählen. Der Customizer bietet den praktischen Active_Callback -Parameter für Panels, Abschnitte und Steuerelemente. Sie können diesen Parameter auf eine bestimmte Bedingung einstellen, die erfüllt sein muss, bevor ein Panel, ein Abschnitt oder eine Steuerung im Anpassung angezeigt wird.

Was hat Kirki in dieser Hinsicht zu bieten?

Die Kirki -API verwendet den erforderlichen Parameter, um eine Steuerung im Customizer auf der Grundlage des Wertes einer anderen Steuerung auszublenden oder anzuzeigen.

Nehmen wir beispielsweise an, Sie möchten dem Textbereich anweisen, dass Benutzer den Fußzeilentext nur ändern können, wenn sie ein Kontrollkästchen überprüfen. Um dies zu erreichen, fügen Sie den folgenden Code dem Control superminimal_footer_text hinzu.

<span>function superminimal_demo_panels_sections( $wp_customize ) {
</span>     <span>/**
</span><span>     * Add Panel
</span><span>     */
</span>     <span>$wp_customize->add_panel( 'sitepoint_demo_panel', array(
</span>      <span>'priority'    => 10,
</span>      <span>'title'       => __( 'SitePoint Demo Panel', 'superminimal' ),
</span>      <span>'description' => __( 'Kirki integration for SitePoint demo', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>//More code to come
</span>    <span>}
</span>    <span>add_action( 'customize_register', 'superminimal_demo_panels_sections' );</span>

Hinzufügen des Snippets oben zum Code für die Textregalea -Steuerung stellt sicher, dass der Wert des Superminimal_reveal_foters_text -Steuerelements gleich 1 entspricht, bevor die TextArea -Steuerung im Customizer angezeigt wird. Fügen wir der Funktion Superminimal_Demo_Fields () die Funktion Superminimal_Demo_Fields () die Funktion des Superminimal_Demo_Fields () hinzu.

<span>/**
</span><span>     * Add a Section for Site Text Colors
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_text_colors', array(
</span>      <span>'title'       => __( 'Site Text Colors', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Site Layout
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_site_layout', array(
</span>      <span>'title'       => __( 'Site Layout', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Footer Text
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_footer_text', array(
</span>      <span>'title'       => __( 'Footer Text', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );</span>

Das Control Superminimal_reveal_foter_text ist ein Kontrollkästchen, das standardmäßig auf 0 gesetzt ist, dh es ist deaktiviert. Dies verhindert, dass das Textbereich angezeigt wird.

Erst nach Überprüfung des Kontrollkästchens, dh durch Ändern des Wertes von 0 auf 1, wird der Textbereich im Customizer angezeigt.

Verbesserung der Live -Vorschau

Der Customizer verfügt über eine leistungsstarke JavaScript -API, um dem Vorschau -Bereich AJAX -Funktionen zu verleihen. Mit dieser Verbesserung können Benutzer ihre Modifikationen in Echtzeit überprüfen, ohne auf die gesamte Vorschau -Seite zu warten, um sich zu aktualisieren.

Wir können das gleiche Ergebnis mit Kirki erreichen, indem wir einfach ein paar praktische Parameter zu den $ Fields [] -Array hinzufügen.

zum Beispiel, um der Einstellung von Superminimal_Body_Color eine Ajaxified Live -Vorschau zur Einstellung von Superminimal_Body_Color hinzuzufügen, fügen Sie das folgende Snippet an das entsprechende $ Fields [] -Array hinzu.

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

Lassen Sie mich erklären, was der obige Code tut.

• Erstens ändert der obige Code die Transportmethode von Aktualisierung (die Standardeinstellung) in Postmessage. Dieser Signal an den Customizer, dass er JavaScript für die Live -Vorschau verwenden muss.
Als nächstes zeigen die Parameterwerte der JS_VARS an, dass die Körper- und P -Elemente mit der CSS -Farbeigenschaft geändert werden sollen.

Kirki bietet zwei vordefinierte Werte für den Funktionsparameter. Verwenden Sie den CSS-Wert, wenn die Einstellung, die Sie hinzufügen, CSS-Regeln wie Hintergrundfarbe, Farbe, Schriftgröße usw. speichern. Verwenden Sie den HTML-Wert, wenn in der Einstellung eine Zeichenfolge von HTML-Markups gespeichert ist, die in die Seite eingefügt werden sollen.

als Beispiel dafür, wie Sie den HTML -Wert verwenden können, fügen wir der Einstellung, die Änderungen am Fußzeilentext verwaltet, AJAX Live -Vorschau -Funktionalität hinzu. Gehen Sie diesen Ausschnitt am Ende des $ Fields [] -Array an, das die Einstellung von Superminimal_foter_text enthält.

<span>function superminimal_customizer_config() {
</span>         <span>$args = array(
</span>        <span>// Only use this if you are bundling the plugin with your theme 
</span>        <span>'url_path'     => get_stylesheet_directory_uri() . '/inc/kirki/',
</span>
       <span>);
</span>       <span>return $args;
</span>       <span>}
</span>       <span>add_filter( 'kirki/config', 'superminimal_customizer_config' );</span>

das ist es, gehen Sie und versuchen Sie, etwas in den Textbereich im Abschnitt Superminimal_foter_text zu schreiben. Sie werden in Kürze den entsprechenden Fußzeilentext im Vorschau -Bildschirm ändern, ohne dass eine vollständige Seite neu lädt. Cool!

AJAX Live -Vorschau mit der Funk -Image -Steuerung

Es kann Fälle geben, in denen weder CSS noch HTML gut zum Funktionsparameter geeignet sind, der die AJAX -Live -Vorschau ermöglicht. Ein typisches Beispiel ist die Einstellung zum Ändern des Site -Layouts. Die Verwendung von CSS als Wert für den Funktionsparameter ist nicht sehr sinnvoll, da die fragliche Einstellung keinen CSS -Eigenschaftswert speichert. Ebenso schneidet die Verwendung von HTML es nicht ganz. Tatsächlich wird es nur

Fullwidth , Sidebar-links oder Seitenleiste auf der Vorschau-Seite ausspucken, je nachdem, welches Radio-Image Die Steuertaste wird ausgewählt. Dies kann jedoch nicht das sein, was Sie erreichen möchten.

Die gute Nachricht ist, dass Sie einen benutzerdefinierten JavaScript -Funktionsnamen als Wert des Funktionsparameters anschließen können und es funktioniert!

<span>function superminimal_demo_panels_sections( $wp_customize ) {
</span>     <span>/**
</span><span>     * Add Panel
</span><span>     */
</span>     <span>$wp_customize->add_panel( 'sitepoint_demo_panel', array(
</span>      <span>'priority'    => 10,
</span>      <span>'title'       => __( 'SitePoint Demo Panel', 'superminimal' ),
</span>      <span>'description' => __( 'Kirki integration for SitePoint demo', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>//More code to come
</span>    <span>}
</span>    <span>add_action( 'customize_register', 'superminimal_demo_panels_sections' );</span>

Sie müssen die JavaScript -Datei, in der Ihre benutzerdefinierte Funktion lebt, befassen und an den Action -Hook Customize_Preview_init angeschlossen werden.

<span>/**
</span><span>     * Add a Section for Site Text Colors
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_text_colors', array(
</span>      <span>'title'       => __( 'Site Text Colors', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Site Layout
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_site_layout', array(
</span>      <span>'title'       => __( 'Site Layout', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );
</span>     
     <span>/**
</span><span>     * Add a Section for Footer Text
</span><span>     */
</span>     <span>$wp_customize->add_section( 'superminimal_footer_text', array(
</span>      <span>'title'       => __( 'Footer Text', 'superminimal' ),
</span>      <span>'priority'    => 10,
</span>      <span>'panel'       => 'sitepoint_demo_panel',
</span>      <span>'description' => __( 'Section description.', 'superminimal' ),
</span>     <span>) );</span>

Schreiben Sie schließlich die JavaScript -Funktion, die die Live -Vorschau mit der nativen Customizer JavaScript -API übernimmt.

<span>if ( ! class_exists( 'Kirki' ) ) {
</span>    <span>include_once( dirname( __FILE__ ) . '/inc/kirki/kirki.php' );
</span><span>}</span>

Das Tolle an Kirki ist, dass Sie es eher zusammen mit der WordPress Customizer -API verwenden können. Wenn die Situation sie erfordert, können Sie daher in kürzester Zeit leicht zwischen den beiden APIs wechseln.

Ressourcen

Hunger nach mehr? Hier sind einige großartige Ressourcen.

• Kirki Toolkit -Dokumentation.
• WordPress -Themen mit dem Kirki Customizer von Aristeides Stathopoulos erstellen.
• Themenoptionen - Die Customizer -API aus dem Thema WordPress.org.

Schlussfolgerung

Ich habe gezeigt, wie man das Kirki -Toolkit in ein WordPress -Thema integriert.

Kirki wird aktiv entwickelt und unterstützt. Die API- und benutzerdefinierten Steuerelemente optimieren bereits die Zeit, die für die Entwicklung von Customizer -Themenoptionen benötigt wird. Dies wird besonders wichtig, wenn Sie Ihr Thema im Repository von WordPress.org Themes auflisten möchten. Tatsächlich sind Themen, die Anpassungsoptionen bereitstellen, dies eher über den Customizer als über die Seiten für benutzerdefinierte Optionen erforderlich.

Um sich mit den Details des in diesem Beitrag besprochenen Code zu befassen, können Sie das Superminimal -Demo -Thema von GitHub herunterladen.

Ich freue mich auf Ihr Feedback!

häufig gestellte Fragen zur Entwicklung der schnellen WordPress Customizer -Optionen mit Kirki

Was ist Kirki und wie kommt es WordPress -Entwicklung zugute? Es bietet eine Reihe von Funktionen, mit denen WordPress -Themen das Erstellen, Anpassen und Verwalten von WordPress -Themen erleichtern. Dazu gehören ein Customizer, mit dem Sie Änderungen in Echtzeit, eine Vielzahl von Steuerelementen für verschiedene Arten von Inhalten und eine modulare Struktur, mit der Sie nur die von Ihnen benötigten Funktionen einfügen können. Durch die Verwendung von Kirki können Entwickler Zeit und Mühe sparen und leistungsstärkere und flexiblere Themen erstellen. Sie können es aus dem WordPress -Plugin -Verzeichnis herunterladen und wie jedes andere Plugin installieren. Nach der Installation können Sie über den WordPress Customizer auf die Funktionen von Kirki zugreifen. Um Kirki einzurichten, müssen Sie eine Konfiguration für Ihr Thema hinzufügen. Dies beinhaltet das Hinzufügen einiger Codezeilen in die Funktionen Ihres Themas.php -Datei. Die Konfiguration gibt die Optionen und Einstellungen für Ihr Thema an. Dazu gehören grundlegende Steuerelemente wie Text, Kontrollkästchen und Optionsfelder sowie erweiterte Steuerelemente wie Farbwählerin, Bild -Uploader und Typografie -Selektor. Jedes Steuerelement hat seine eigenen Optionen und Einstellungen, sodass Sie die Steuerung an Ihre Anforderungen anpassen können.

Wie verwende ich die Echtzeit-Vorschau-Funktion in Kirki? Um diese Funktion zu verwenden, müssen Sie Ihrer Steuerkonfiguration eine Option "Transport" hinzufügen. Die Option "Transport" gibt an, wie sich Änderungen an der Steuerung in der Vorschau widerspiegeln. Indem Sie diese Option auf "Postmessage" festlegen, können Sie eine Echtzeit-Vorschau für die Steuerung aktivieren.

Kann ich Kirki mit einem WordPress-Thema verwenden? WordPress -Thema. Um die Funktionen von Kirki jedoch voll auszunutzen, muss Ihr Thema den WordPress Customizer unterstützen. Die meisten modernen WordPress -Themen unterstützen den Customizer, daher sollte dies für die meisten Benutzer kein Problem sein. Nur wenige Codezeilen für die Funktion Ihres Themas.Php -Datei. Der Code gibt die ID, den Titel, die Beschreibung und die Priorität des Panels an. Nach dem Hinzufügen wird das Panel im WordPress Customizer angezeigt und Sie können Abschnitte und Steuerelemente hinzufügen.

Was ist die modulare Struktur von Kirki und wie kommt es mir zugute Die Struktur von Kirki bedeutet, dass sie in separate Module unterteilt ist und jeweils einen bestimmten Satz von Merkmalen bietet. Auf diese Weise können Sie nur die benötigten Module einbeziehen und die Größe und Komplexität Ihres Themas verringern. Es erleichtert auch einfacher, Ihr Thema zu verwalten und zu aktualisieren, da Sie einzelne Module aktualisieren oder ersetzen können, ohne den Rest des Themas zu beeinflussen. 🎜> Kirki bietet eine Typografie -Steuerung, mit der Sie die Typografie in Ihrem Thema anpassen können. Diese Steuerung bietet Optionen zum Festlegen der Schriftfamilie, der Variante, der Größe, der Linienhöhe, des Buchstabenabstands und der Farbe. Sie können der Steuerung auch Google -Schriftarten hinzufügen und Ihnen Zugriff auf eine Vielzahl von Schriftarten erhalten.

Kann ich Kirki verwenden, um ein untergeordnetes Thema zu erstellen? ein Kinderthema. Ein Kinderthema ist ein Thema, das die Funktionalität und das Styling eines anderen Themas erbt, das als übergeordnetes Thema bezeichnet wird. Durch das Erstellen eines untergeordneten Themas können Sie das übergeordnete Thema ändern, ohne den ursprünglichen Code zu beeinflussen. Kirki bietet eine Reihe von Funktionen, die das Erstellen und Anpassen von untergeordneten Themen erleichtern. Sie können es über das WordPress -Dashboard oder durch das Herunterladen der neuesten Version aus dem WordPress -Plugin -Verzeichnis und der manuellen Installation aktualisieren. Es ist wichtig, Kirki auf dem neuesten Stand zu halten, um die Kompatibilität mit der neuesten Version von WordPress zu gewährleisten und von neuen Funktionen und Verbesserungen zu profitieren.

Das obige ist der detaillierte Inhalt vonSchnelle WordPress Customizer -Optionen mit Kirki. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!