Nehmen wir an, wir haben ein Design mit einer Reihe von Customizer-Einstellungen und Steuerelementen erstellt, mit dem die Benutzer des Designs eine Reihe von Dingen des Design-Frontends anpassen können, z. B. den Titel der Website, die Tagline und die Farbe.

Einige Benutzer wissen jedoch möglicherweise nicht sofort, dass sie diese bestimmten Teile des Designs anpassen können, insbesondere wenn sie unter mehreren Bedienfeldern und Abschnitten liegen. Wie können wir es also schneller machen, das Thema anzupassen?

WordPress.com hat kürzlich Bearbeitungsschaltflächen in einigen bearbeitbaren Bereichen hinzugefügt, die beim Starten des Customizers sofort sichtbar werden. Wenn der Benutzer auf diese Schaltflächen klickt, wird ihm das entsprechende Steuerelement angezeigt.

Die neue Schaltfläche "Bearbeiten" im Fenster "Vorschau" des Customizers auf WordPress.com, 

Dies ist eine schöne UX-Verbesserung, die wir auch mit der Customizer-JavaScript-API in unserem Design erreichen können. Und Sie werden feststellen, dass dies nicht so kompliziert ist, wie Sie es sich vorgestellt haben. Schauen wir uns kurz an, wie es funktioniert.

Voraussetzungen

Im letzten Tutorial haben wir nur Code geschrieben customizer-control.js Datei, die sich auf die Customizer-Back-End-Schnittstellen auswirkt. In diesem Tutorial werden wir auch die andere Datei verwenden, customizer-preview.js, welches im Vorschaufenster geladen wird. Sie sollten diese beiden Dateien erstellt und geladen haben. Ansonsten empfehle ich Ihnen, das erste Tutorial dieser Serie zu befolgen, bevor Sie fortfahren.

Bearbeitungsschaltfläche erstellen

Zunächst fügen wir ein paar hinzu Bearbeiten neben dem Site-Titel.

 "rel =" home ">     

Verwenden is_customize_preview (), Diese Schaltfläche wird nur im Customizer-Vorschaufenster angezeigt. Jeder dieser Schaltflächen ist ein zugeordnet Klasse Name, .Anpassen-Bearbeiten, Dadurch können wir diese Schaltflächen auswählen und mit einem binden klicken Ereignis später.

Darüber hinaus haben wir diese Schaltflächen mit einem hinzugefügt Datensteuerung Attribut, das den Namen oder die ID der registrierten Einstellungen im Customizer enthält. Der Name in diesem Attribut hilft uns, die korrekte Einstellung und Kontrolle zu bestimmen, die dem Benutzer später zur Verfügung steht.

Zwei Bearbeitungsschaltflächen zum Anpassen des Titels und der Titelfarbe.

Da die Präsentation momentan nicht unser Hauptanliegen ist, sehen unsere beiden "Bearbeiten" -Schaltflächen im Vorschaufenster nicht so gut aus wie die in WordPress.com. Sie können die Stile auf eine Weise hinzufügen, die Ihrem gesamten Design entspricht.

Definieren eines benutzerdefinierten Ereignisses

Als Nächstes definieren wir ein benutzerdefiniertes Ereignis. Ein Ereignis, das einer dieser Schaltflächen mitteilt, wird angeklickt. Fügen Sie den folgenden Code in die customizer-preview.js Datei.

var anpassen = wp.customize; $ (document.body) .on ('click', '.customizer-edit', function () custom.preview.send ('preview-edit', $ (this) .data ('control')); );

Der Code bindet jede dieser Schaltflächen mit der klicken Ereignis mit der  .preview.send () Methode zum Besetzen eines Events. Das .preview.send () Die Methode verwendet zwei Parameter, nämlich den benutzerdefinierten Ereignisnamen und das Argument. In unserem Fall haben wir ein neues Ereignis definiert Vorschau-Bearbeiten, und übergeben Sie ein Argument mit Daten, die aus der Datenbank abgerufen werden Datensteuerung Attribut der Schaltfläche.

Anpassen des benutzerdefinierten Ereignisses

Wir können einen benutzerdefinierten Event-Cast aus dem anhören .preview.send () Methode durch eine andere Methode namens Customizer .previewer.bind ()-Beachten Sie die Previewer mit äh. Diese Methode ähnelt der jQuery .auf() Methode, in der wir den Ereignisnamen zum Abhören definieren und eine Funktion, die ausgeführt wird, wenn das Ereignis ausgelöst wird. Hinzufügen .previewer.bind () in dem customizer-control.js, wie folgt.

var anpassen = wp.customize; anpassen.previewer.bind ('preview-edit', Funktion (Daten) );

Als Nächstes transformieren wir die übergebenen Daten in ein JSON-Kompatibilitätsformat. Wählen Sie ein Steuerelement basierend auf dem Element aus Name aus den Daten abgerufen und mit dem Customizer auf das Steuerelement fokussiert .Fokus() Methode.

var anpassen = wp.customize; custom.previewer.bind ('preview-edit', Funktion (Daten) var data = JSON.parse (data); var control = anpassen.control (data.name); control.focus (););

Wenn Sie nun beispielsweise auf die Schaltfläche "Text bearbeiten" klicken, wird, wie Sie unten sehen können, die Einstellung "Site-Titel" angezeigt und der Cursor in der Eingabe fokussiert.

Die Schaltfläche Bearbeiten in Aktion.

Wenn wir außerdem den Quellcode darin betrachten, wird der .Fokus() Methode akzeptiert einen aufgerufenen Parameter completeCallback. Dieser Parameter wird nach dem durchlaufen .Fokus() Funktion wird ausgeführt. Wir können diesen Parameter verwenden, um beispielsweise einen Animationseffekt hinzuzufügen.

custom.previewer.bind ('preview-edit', Funktion (Daten) var data = JSON.parse (data); var control = custom.control (data.name); control.focus (completeCallback: function ()  setTimeout (function () control.container.addClass ('shake animated');, 300);;);

Die allgemeine Erfahrung fühlt sich jetzt lebendiger an.

Mit CSS-Animation verbessertes Eingabeelement

Einpacken

Wir haben eine Reihe von Customizer-JavaScript-APIs erwähnt:

• .preview.send () Methode zum Umsetzen eines benutzerdefinierten Ereignisses.
• .previewer.bind () Methode, um den Customizer mit einem benutzerdefinierten Ereignis zu verbinden.
• .Fokus() Methode zum Fokussieren auf ein Eingabeelement eines Controls sowie auf das completeCallback Parameter.

In diesem Lernprogramm verwenden wir diese Methoden, um es unseren Designbenutzern zu ermöglichen, den Text für den Seitentitel schnell zu bearbeiten, indem Sie im Vorschaufenster auf die Schaltfläche "Text bearbeiten" klicken.

Wir haben noch eine Schaltfläche, um die Farbsteuerungen aufzurufen. Aber ich werde es hier als Herausforderung belassen. Verwenden Sie die gleichen drei Methoden, um die Funktion "Farbe bearbeiten" zu erstellen. Wenn Sie Zweifel haben, werfen Sie einen Blick auf den Quellcode.