• Startseite
  • Artikel
  • Führen
  • Erstellen Sie Customizer-Einstellungen schneller, indem Sie das Kirki-Framework in Ihrem Projekt verwenden

Erstellen Sie Customizer-Einstellungen schneller, indem Sie das Kirki-Framework in Ihrem Projekt verwenden

Veröffentlicht: 2019-08-10

Kirki ist ein kostenloses (MIT-lizenziertes) Open-Source-Framework, das für Entwickler entwickelt wurde, die Customizer-Steuerelemente zu ihren Designs oder Plugins hinzufügen möchten.

Aristeides Stathopoulos, der leitende Entwickler von Kirki, arbeitet seit 2014 an dem Framework. Dank der kontinuierlichen Updates und Verbesserungen hat Kirki eine Community auf Github aufgebaut, die über 1000 Sterne und 300 Forks umfasst.

Vor Kirki habe ich den Customizer nie angerührt. Kirki hat mir geholfen, den Customizer zu verstehen und viel in kürzerer Zeit zu erledigen!

LebCit – Entwickler von WordPress-Themes

WordPress Core Customizer-Steuerelemente

WordPress Core enthält standardmäßig eine Handvoll grundlegender Customizer-Steuerelemente. Zum Beispiel: Text-, Textbereich-, Kontrollkästchen-, Radio-, Auswahl-, Dropdown-Seiten-, E-Mail-, URL-, Zahlen-, Ausgeblendet- und Datumssteuerelemente.

Kirki unterstützt auch die Core Controls und rund zwanzig weitere. Im Allgemeinen decken die Kirki-Steuerelemente die fortgeschritteneren Anwendungsfälle ab. Beispielsweise:

  • Typografie
  • Farbpaletten
  • TinyMCE-Editor
  • Sortierbare Felder

Kirki bietet auch Funktionen, die in Core WordPress nicht verfügbar sind, wie z. B. die automatische Generierung Ihrer CSS-Ausgabe und PostMessage-Skripte. Diese Funktionen, die wir uns später in diesem Artikel ansehen werden, können Ihre Entwicklungszeit leicht halbieren.

Kirki ist langsam

Eine Kritik, die häufig gegen Kirki vorgebracht wird, ist, dass es langsam ist. Tatsächlich wird diese Kritik gegen die meisten Frameworks (einschließlich WordPress) verwendet. Es macht Sinn, oder? Sie laden eine Menge Code, den Sie möglicherweise nie verwenden werden.

In diesem Fall ist die Realität, dass das Gegenteil der Fall ist. Meistens sind mit Kirki erstellte Bedienfelder tatsächlich schneller als dieselben Bedienfelder, die mit Core Controls erstellt wurden.

Dies liegt daran, dass Kirki eine Optimierungsebene hinzufügt, die nicht in WordPress integriert ist.

Wenn der Customizer initialisiert wird, versucht WordPress sofort, alle Steuerelemente zu laden, auch wenn sie sich in einem Abschnitt oder Panel befinden und der Benutzer noch nicht mit ihnen interagieren kann. Im Vergleich dazu verschiebt Kirki das Laden bis kurz bevor der Benutzer mit dem Steuerelement interagiert.

Um die Auswirkungen in der Praxis zu sehen, versuchen wir, mit jeder Methode 50 Farbsteuerelemente hinzuzufügen.

Kernmethode:

 für ($i = 0; $i < 50; $i++){
	$wp_customize->add_setting( 'color_setting_hex_' . $i , array(
		'default' => '#0088CC'
	) );

	// Farbauswahlsteuerung hinzufügen
	$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'color_setting_hex_' . $i, array(
		'label' => 'Farbsteuerung',
		'section' => 'title_tagline',
		'settings' => 'color_setting_hex_' . $i,
	) ) );
}

Mit Kirki:

 für ($i = 0; $i < 50; $i++) {
     Kirki::add_field( 'config_id', array(
         'Typ' => 'Farbe',
         'settings' => 'color_setting_hex_' . $i,
         'label' => __( 'Color Control', 'kirki' ),
         'section' => 'title_tagline',
         'default' => '#0088CC',
     ) );
 }

Die Ergebnisse:

Wie Sie sehen können, ist die anfängliche Ladegeschwindigkeit bei Verwendung von Kirki erheblich schneller. Der zum Erstellen der Steuerelemente erforderliche Code ist ebenfalls prägnanter.

Kirki in Ihr Projekt integrieren

Es gibt mehrere Möglichkeiten, das Kirki-Framework in Ihr Projekt zu integrieren, die offizielle Dokumentation erklärt die verschiedenen Methoden gut.

Ich empfehle Entwicklern, den Benutzer anzuweisen, die Plugin-Version von Kirki zu installieren, anstatt das Framework direkt in den Code Ihres Projekts einzufügen. Dies kann mit TGMPA oder dem bereitgestellten Skript erfolgen.

Der Grund für die Plugin-Route ist, dass Kirki häufig aktualisiert und verbessert wird. Durch die Installation der Plugin-Version haben Ihre Benutzer sofortigen Zugriff auf Fehlerbehebungen und Sicherheitsupdates.

Wenn Sie das Framework dagegen in Ihr Projekt einbeziehen, erhalten Benutzer nur Updates, wenn Sie Ihr Design oder Plugin aktualisieren, was möglicherweise seltener als erforderlich ist.

Unabhängig davon, welche Methode Sie verwenden, stellen Sie sicher, dass Kirki initialisiert ist, bevor Sie Ihre Einstellungen hinzufügen:

 // Früher Ausstieg, wenn Kirki nicht existiert.
if ( ! class_exists( 'Kirki' ) ) {
    Rückkehr;
}

Felder

Im Beispiel der Kernmethode haben wir zuerst eine Einstellung und dann ein Steuerelement dafür erstellt. In den meisten Fällen sind die beiden direkt miteinander verbunden. Kirki vereinfacht den Prozess und ermöglicht es uns, stattdessen ein „Feld“ zu erstellen. Wenn ein Feld erstellt wird, bildet es für uns im Hintergrund die Einstellung und Steuerung.

Felder unterstützen alle Steuerargumente, die Sie erwarten würden (Label, Beschreibung, Abschnitt, Standard), sowie einige Kirki-spezifische Argumente.

Mit dem Argument „type“ können Sie einen der 30 Steuerelementtypen von Kirki auswählen: https://kirki.org/docs/controls/

Abschnitte

Customizer-Abschnitte ermöglichen es Ihnen, Steuerelemente zu gruppieren. WordPress verfügt über sechs integrierte Abschnitte, denen Sie auch Ihre Steuerelemente hinzufügen können:

  • title_tagline – Website-Identität
  • Farben – Farben
  • header_image – Header-Bild
  • background_image – Hintergrundbild
  • static_front_page – Homepage-Einstellungen
  • custom_css – Zusätzliches CSS


Abschnitte in Kirki funktionieren genauso wie in Core, die Methode Kirki::add_section() ist einfach ein Wrapper für $wp_customize->add_section() und akzeptiert die gleichen Parameter und Argumente.

 Kirki::add_section( 'section_id', array(
     'title' => esc_html__( 'Meine Sektion', 'kirki' ),
     'description' => esc_html__( 'My section description.', 'kirki' ),
 ) );

Platten

Mit Bedienfeldern können Sie eine weitere Hierarchieebene erstellen, indem Sie Abschnitte zusammenfassen. WordPress Core hat ein integriertes Panel, das „Menüs“ ist.

Auch hier ist die Kirki-Implementierung einfach ein Wrapper für die Core-Funktionalität.

 Kirki::add_panel( 'panel_id', array(
     'Priorität' => 10,
     'title' => esc_html__( 'Mein Panel', 'kirki' ),
     'description' => esc_html__( 'My panel description', 'kirki' ),
 ) );

'transport' => 'auto'

Traditionell haben Sie beim Erstellen von Customizer Controls zwei Optionen für das Transportargument:

  • Aktualisieren – Jedes Mal, wenn der Benutzer eine Änderung vornimmt, wird das Vorschaufenster aktualisiert, um die Änderungen anzuzeigen. Dies kann einige Sekunden dauern.
  • postMessage – Jedes Mal, wenn der Benutzer eine Änderung vornimmt, wird das Vorschaufenster mithilfe von Javascript aktualisiert, das keine Aktualisierung erfordert und nahezu sofort erfolgt.

postMessage ist zweifellos die bessere Methode zum Aktualisieren des Vorschauprogramms und sollte nach Möglichkeit verwendet werden. Es gibt jedoch einen Nachteil: Die Verwendung von postMessage bedeutet, dass Sie benutzerdefinierten JS-Code für jedes Ihrer Steuerelemente schreiben müssen. Eine einfache Implementierung sieht etwa so aus:

 // Aktualisiere den Seitentitel in Echtzeit...
wp.customize( 'blogname', function( value ) {
    value.bind( function( newval ) {
        $( '#site-title a' ).html( newval );
    } );
} );

Bei vielen Einstellungen kann sich das schnell wiederholen.

Hier glänzt Kirki, es fügt eine dritte Option hinzu: 'transport' => 'auto'.

'transport' => 'auto' arbeitet mit einem weiteren Argument zusammen, das Kirki mit dem Namen 'output' hinzufügt. Wenn beide Werte definiert sind, generiert Kirki automatisch die postMessage-Skripte für Sie. Das bedeutet, dass Sie alle Vorteile der Verwendung von postMessage erhalten, ohne Javascript-Code schreiben zu müssen.

Ein Feld mit transport => 'auto' sieht so aus:

 Kirki::add_field( 'config_id', array(
     'Typ' => 'Farbe',
     'settings' => 'color_setting_hex',
     'label' => __( 'Color Control', 'kirki' ),
     'Abschnitt' => 'Farben',
     'default' => '#0088CC',
     'transport' => 'auto',
     'Ausgabe' => Array (
         Reihe (
             'Element' => 'Körper',
             'property' => 'Hintergrundfarbe',
         ),
     ),
 ) );

Diese zeitsparende Funktion von Kirki bedeutet, dass Sie die meiste Zeit nicht mehr Ihre eigenen postMessage-Skripte schreiben oder einreihen müssen.

Frontend-CSS-Ausgabe

Ein weiterer Teil der Erstellung von Customizer-Einstellungen ist die Generierung der CSS-Ausgabe im Frontend. Ein einfaches Beispiel könnte so aussehen:

 /**
 * Gib das Customizer-CSS an wp_head aus
 */
Funktion wptavern_customizer_css() {
	$bg_color = get_theme_mod( 'color_setting_hex' );
	?>
	<Stil>
		Karosserie {
			Hintergrundfarbe: <?php echo sanitize_hex_color( $bg_color ); ?>;
		}
	</style>
	<?php
}
add_action( 'wp_head', wptavern_customizer_css );

Wie im postMessage-Beispiel kann sich das Schreiben dieses Codes schnell wiederholen, wenn Sie viele Einstellungen haben.

Glücklicherweise übernimmt 'transport' => 'auto' auch die Frontend-Ausgabe für Sie. Selbst in unserem vereinfachten Beispiel hat 'transport' => 'auto' den Code, den wir schreiben müssen, um ~50 % reduziert.

Fazit

In diesem Artikel haben wir uns nur die Grundlagen des Kirki-Frameworks und zwei seiner Argumente angesehen. Wir können bereits sehen, wie es uns ermöglicht, Customizer-Steuerelemente schneller und ohne Leistungseinbußen zu erstellen.

Wenn Sie in Kirki eintauchen, werden Sie schnell die Fülle an Funktionen entdecken, die es zusätzlich zur Customize-API hinzufügt. Es ist keine Überraschung, dass es auf über 300.000 Websites verwendet wird und ein Kernbestandteil einiger der größten WordPress-Themes auf dem Markt ist.