Anpassungs-JavaScript-APIs Panel, Section und Control

Heute werden wir unsere Diskussion über die JavaScript-API im WordPress-Customizer fortsetzen. Im letzten Tutorial haben wir zwei JavaScript-Dateien vorbereitet und geladen, customizer-control.js und customizer-preview.js, Dies ermöglicht uns die Interaktion mit der JavaScript-API vom Customizer-Backend und vom Frontend oder der Previewer-Oberfläche aus. Folgen Sie daher unbedingt dem letzten Tutorial, bevor Sie fortfahren.

In diesem Lernprogramm konzentrieren wir uns auf die Benutzeroberfläche, die das Customizer-Backend, die Bedienfelder, Einstellungen und Steuerelemente enthält. Auch wenn diese drei Dinge für Sie etwas Neues sind, empfehle ich dringend, dass Sie unserer vorherigen vollständigen Serie folgen: Ein Leitfaden für das WordPress-Theme-Customizer.

Grundlegende Interaktion mit der Customizer-JavaScript-API

Abgesehen von der PHP-API, mit der einige von Ihnen sicherlich vertraut sind, können Sie auch über die JavaScript-API auf Panels, Sections und Controls zugreifen. Ebenso können wir sie dann ändern. Hier sind einige Beispiele.

Wählen Sie ein bestimmtes Steuerelement, einen Abschnitt oder ein Bedienfeld aus:

// Wähle ein Steuerelement aus. wp.customize.control ('blogname'); // Wähle einen Abschnitt aus. wp.customize.section ('title_tagline'); // Wähle ein Panel aus. wp.customize.panel ('nav_menus'); 

Reorganisieren Sie ihre Ansichtsreihenfolge.

// Ändern einer Steuerpriorität wp.customize.control ('blogname') .priority (30); // Ändern einer Abschnittspriorität wp.customize.section ('title_tagline') .priority (100); // Ändern einer Panel-Priorität wp.customize.panel ('nav_menus') .priority (200); 

Verschieben Sie das Steuerelement "Site Title" beispielsweise auf das Farbe Sektion.

wp.customize.control ('blogname') .section ('colors'); 

Schalte die Sichtbarkeit um.

// Deaktiviere / verstecke 'Site Title' Control wp.customize.control ('blogname') .toggle (); 

Sie können sogar die Kontroll-DOM-Struktur parsen, was sonst für die Verwendung in PHP kompliziert wäre.

wp.customize.control ('blogname') .container.find ('.customize-control-title'); 

Dies sind einige der Möglichkeiten, die Sie mit den Bedienfeldern, Abschnitten und Steuerelementen in der JavaScript-API des Customizers tun können. Lassen Sie uns diese nun zu einer sinnvollen Benutzererfahrung zusammenfassen.

Umschalten von Abschnitten und Steuerelementen

Zu diesem Zeitpunkt sollten wir insgesamt vier Kontrollen haben. Im Bereich "Site Identity" befinden sich zwei Steuerelemente, die Eingabe "Site Title" und das Kontrollkästchen "Site Title anzeigen". Die anderen beiden sind eine Farbauswahl. Sie befinden sich im Abschnitt "Farben" und legen die Textfarbe "Site Title" bzw. die Farbe des Schwebeflugstatus fest.

Unsere vier Steuerelemente im Customizer

Wir planen hier, die Farbsteuerelemente nur anzuzeigen, wenn das Kontrollkästchen "Site-Titel anzeigen" aktiviert ist, da es keinen Grund gibt, diese Color-Steuerelemente für den Site-Titel anzuzeigen, wenn der Site-Titel tatsächlich deaktiviert ist.

Darüber hinaus könnte uns dieser Ansatz dabei helfen, Customizer zu deklarieren, indem irrelevante Steuerelemente, Abschnitte und Bereiche aus der Customizer-Seitenleiste entfernt werden. Wenn dies nach etwas klingt, das Sie erreichen möchten, beginnen wir einfach.

Deaktivieren eines Steuereingabefelds

Öffnen Sie zunächst unsere JavaScript-Datei, customizer-control.js. Fügen Sie dann die Codezeilen im Customizer hinzu bereit Veranstaltung:

wp.customize.bind ('ready', function () // Ready? var anpassen = this; // Objektalias anpassen. custom ('display_blogname', function (einstellung) );; 

Hier haben wir einen Alias ​​für das gesetzt diese Schlüsselwort, das sich auf die JavaScript-API von Customizer bezieht. Dann haken wir eine anonyme Funktion in die display_blogname Einstellung, da alle Anpassungen, die wir im Customizer durchführen, relativ zum Wert dieser Einstellung sind.

Als nächstes wählen wir die Eingang Feld der Einstellung 'Site Title'.

wp.customize.bind ('ready', function () // Fertig? var customise = this; // WordPress-Objektalias anpassen. anpassen ('display_blogname', function (einstellung) var siteTitleInput = custom.control ('blogname.) ') .container.find (' input '); // Eingabe des Site-Titels.);); 

Wir können die Eingabe deaktivieren, wenn die display_blogname Kontrollkästchen ist nicht gekreuzt.

wp.customize.bind ('ready', function () // Ready? var anpassen = this; // Anpassen des Objektalias. anpassen ('display_blogname', function (value) var siteTitleInput = custom.control ('blogname' ) .container.find ('input'); // Site Title-Eingabe. / ** * Deaktivieren Sie das Eingabeelement * / // 1. Beim Laden. siteTitleInput.prop ('disabled',! value.get ()); // .get () value // 2. An Wertänderung binden value.bind (function (to) siteTitleInput.prop ('disabled',! to);););); 

Wie Sie oben sehen können, verwenden wir die jQuery .Stütze() Methode, um den HTML-Code festzulegen deaktiviert Eigenschaft für das Eingabeelement. Wir nehmen das .erhalten() Methode, um den aktuellen Wert abzurufen. Zuletzt mit der .binden() Methode, hören wir auf die Wertänderung und setzen die deaktiviert Eigentum entsprechend.

Left: Aktiviertes Eingabefeld "Site Title". Rechts: Das Eingabefeld "Site Title" ist deaktiviert. Beachten Sie das Kontrollkästchen.

Umschalten der Sichtbarkeit

Jetzt fahren wir mit dem Code fort, um die Sichtbarkeit der Farbwähler zu ändern, die die "Site Title" -Farben festlegen. Wie geplant haben wir die Farbauswahl entfernt, wenn das Kontrollkästchen aktiviert ist nicht gekreuzt und zeig ihnen wieder, wenn es ist angekreuzt.

Zunächst fassen wir die Farbauswahl-IDs in einem Array zusammen.

wp.customize.bind ('ready', function () // Ready? var anpassen = this; // Anpassen des Objektalias. anpassen ('display_blogname', function (value) //… vorherige Codes… var colorControls = [ 'header_textcolor', 'header_textcolor_hover'];);); 

Dann iterieren wir eine Funktion über diese Steuerelement-IDs, die ihre Sichtbarkeit mithilfe von jQuery umschaltet .Umschalten() Methode.

wp.customize.bind ('ready', function () // Ready? var anpassen = this; // Anpassen des Objektalias. anpassen ('display_blogname', function (value) //… vorherige Codes… var colorControls = [ 'header_textcolor', 'header_textcolor_hover']; $ .each (colorControls, function (index, id) custom.control (id, function (Steuerelement) / ** *) Umschalten der Funktion * / var toggle = function (to) Steuerelement .toggle (to);; // 1. Beim Laden. toggle (value.get ()); // 2. Bei Wertänderung. value.bind (toggle););););) ; 

Die Struktur des obigen Codes ähnelt unserem vorherigen Code, wodurch das Eingabeelement deaktiviert wird. Hier haben wir jedes Steuerelement im Array mit Hilfe der Tasten ausgewählt .Steuerung() Methode, wie wir bereits in diesem Tutorial gezeigt haben. Als Nächstes haben wir eine Funktion, mit der jedes Steuerelement mithilfe von jQuery umgeschaltet werden kann .Umschalten() Methode, und führen Sie es nach der Initialisierung der Customizer-Seite sowie nach dem Ändern des Werts aus.

Das Kontrollkästchen "Site-Titel anzeigen" ist nicht markiert, die Eingabe des Site-Titels ist ausgegraut (deaktiviert) und die entsprechenden Farbwähler im Bereich "Farbe" sind jetzt ausgeblendet.

Was kommt als nächstes

In diesem Lernprogramm habe ich Ihnen ein einfaches Beispiel gezeigt, wie Sie die JavaScript-API von Customizer verwenden können, um die Benutzererfahrung im Customizer zu verbessern. Es gibt einige Dinge, die wir tun können, um es noch weiter zu verbessern, z. B. das Entfernen des Bereichs "Colors", wenn innerhalb des Abschnitts kein Steuerelement angezeigt werden kann, und das Anpassen des Farbtons der Einstellung "Header Text Color: Hover" nach Wert in der Einstellung "Header-Textfarbe".

Im nächsten Tutorial dieser Serie werden wir uns mit einem etwas komplexeren Beispiel herausfordern. Wir werden eine "Brücke" bauen, die es dem Customizer-Vorschaufenster ermöglicht, mit dem Control Panel im Backend zu interagieren. Wenn ein Benutzer beispielsweise auf den Site-Titel im Vorschaufenster klickt, schiebt der Customizer die entsprechende Eingabe an den Benutzer.

Bleib dran!