Share
Der WordPress Customizer wurde seit seiner Gründung aktiv entwickelt. Die APIs werden ständig weiterentwickelt, einschließlich der JavaScript-API. Es ist jedoch eine der am wenigsten dokumentierten APIs im WordPress-Codex. Daher gibt es nur wenige umfangreiche Datensätze, die zeigen, wie die JavaScript-API genutzt werden kann praktisch.
Durch die Nutzung der JavaScript-API im WordPress-Customizer können wir tatsächlich ein überzeugenderes Echtzeiterlebnis bieten, während wir das Design anpassen und nicht nur die Änderung vom Steuerelement in das Vorschaufenster übernehmen.
Möglicherweise sind Sie mit der Verwendung der JavaScript-API von Customizer vertraut, um in Echtzeit eine Änderung im Vorschaufenster vorzunehmen. Dazu setzen wir die Einstellung Transport Modus auf POST-Meldung und fügen Sie den entsprechenden JavaScript-Code wie folgt hinzu.
Accentsconagua
wp.customize ('blogname', function (value) value.bind (function (to) $ ('.site-title a') .text (to);););Wir können die API jedoch auch erweitern, um beispielsweise einen Abschnitt, Bereich, ein Steuerelement auszublenden, anzuzeigen oder zu verschieben, den Wert einer Einstellung basierend auf einem anderen Einstellungswert zu ändern und die Interaktionen Vorschau und Steuerelement zu verbinden. Und dies werden wir in diesem Tutorial untersuchen.
Wir haben den WordPress Customizer ausführlich mit einer Handvoll Artikeln und einer Reihe von Serien über die Besonderheiten der Customizer-APIs behandelt.
Ich gehe davon aus, dass Sie das Grundkonzept des WordPress-Customizers sowie die Komponenten wie Panel, Section, Setting und Control verstanden haben. Ansonsten empfehle ich Ihnen dringend, dass Sie sich mit unseren Tutorials und Videokursen zu diesem Thema befassen, bevor Sie noch weiter gehen.
Zunächst untersuchen wir die "Einstellungen" und "Steuerelemente" im Customizer, die wir für dieses Tutorial hinzugefügt haben. Wir werden auch den Code untersuchen, der sie an ihre Stelle setzt.
In diesem Tutorial konzentrieren wir uns auf die Website "Site Title". Und wie Sie oben sehen können, haben wir zwei Steuerelemente: das native WordPress-Eingabefeld "Site Title" und unser benutzerdefiniertes Kontrollkästchen, um den "Site Title" zu aktivieren oder zu deaktivieren. Diese beiden Steuerelemente befinden sich im Abschnitt "Site Identity". Auf der rechten Seite des Bildes befindet sich die Vorschau, in der der "Site-Titel" angezeigt wird.
Wie Sie unten sehen können, verfügen wir außerdem über zwei Steuerelemente, die sich im Bereich Farben befinden, um die Farbe und die Farbe des Site-Titels zu ändern schweben Zustandsfarbe.
Unser Thema in diesem Dokument basiert auf Unterstrichen, in denen der gesamte mit Customizer zusammenhängende Code in den Ordner eingefügt wird /inc/customizer.php Datei.
Funktion tuts_customize_register ($ wp_customize) $ wp_customize-> get_setting ('blogname') -> transport = 'postMessage'; $ wp_customize-> get_setting ('blogdescription') -> transport = 'postMessage'; $ wp_customize-> get_control ('blogdescription') -> Priorität = '12'; $ wp_customize-> get_setting ('header_textcolor') -> default = '# f44336'; $ wp_customize-> get_setting ('header_textcolor') -> transport = 'postMessage'; // Ankreuzfeld zur Anzeige von Blogname $ wp_customize-> add_setting ('display_blogname', array ('transport' => 'postMessage')); $ wp_customize-> add_control ('display_blogname', array ('label' => __ ('Site-Titel anzeigen', 'tuts'), 'section' => 'title_tagline', 'type' => 'Ankreuzfeld', 'Priorität '=> 11,)); // Füge die Haupttextfarbe und Kontrolle hinzu. $ wp_customize-> add_setting ('header_textcolor_hover', array ('default' => '# C62828', 'sanitize_callback' => 'sanitize_hex_color', 'transport' => 'postMessage',)); $ wp_customize-> add_control (neues WP_Customize_Color_Control ($ wp_customize, 'header_textcolor_hover', array ('label' => __ ('Kopfzeilentextfarbe: Hover'), 'tuts', 'prior' => '11'))); add_action ('custom_register', 'tuts_customize_register'); Und wie Sie oben sehen können, haben wir einige Änderungen am Code vorgenommen, um unseren Bedürfnissen in diesem Tutorial zu entsprechen.
Blogbeschreibung, zu 12 damit das Kontrollkästchen Einstellung, display_blogname, erscheint unter dem Eingabefeld "Site Title".display_blogname. Wir setzen die Priorität zu 11 die sich in unserem Fall zwischen dem Eingabefeld "Site Title" und "Tagline" befindet.Überschrift Standardfarbe auf # f44336 und das Transport tippen Sie auf POST-Meldung.header_text_color. Ebenso setzen wir die Priorität auf 11 so dass es direkt unter dem erscheint header_textcolor Rahmen.Alle diese Einstellungen werden mit eingestellt POST-Meldung statt mit Aktualisierung. Das POST-Meldung Mit dieser Option kann der Wert asynchron transportiert und in Echtzeit im Vorschaufenster angezeigt werden. Wir müssen jedoch auch unser eigenes JavaScript schreiben, um mit der Änderung umgehen zu können.
Wir müssen zwei JavaScript-Dateien erstellen: eine Datei, customizer-preview.js, mit der Vorschau und der anderen Datei umgehen, customizer-control.js, die Steuerelemente im Customizer-Bedienfeld.
js ├── customizer-preview.js // 1. Datei für die Vorschau ├── customizer-control.js // 2. Datei für die Steuerelemente ├── navigation.js └── überspringen-link-focus- fix.js
Innerhalb customizer-preview.js ist der folgende Code.
(function ($) // Codes hier.) (jQuery);
Es ist derzeit eine leere, eingeschlossene JavaScript-Funktion. Im nächsten Tutorial dieser Serie werden wir genauer besprechen, wie wir eine Vorschau der Änderungen im Vorschaufenster anzeigen.
In der anderen Datei, customizer-control.js, Wir fügen den folgenden Code hinzu:
(function ($) wp.customize.bind ('ready', function () var anpassen = this; // Codes here);) (jQuery);Wie Sie oben sehen können, wird der Code in dieser Datei nach dem Customizer eingebunden bereit Veranstaltung. Dadurch wird sichergestellt, dass alles im Customizer vollständig bereit ist, einschließlich Einstellungen, Bedienfelder und Steuerelemente, bevor mit der Ausführung benutzerdefinierter Funktionen begonnen wird.
Nachdem wir den Code hinzugefügt haben, werden wir diese beiden JavaScript-Dateien an zwei verschiedenen Stellen laden.
// 1. customizer-preview.js-Funktion tuts_customize_preview_js () wp_enqueue_script ('tuts_customizer_preview', get_template_directory_uri (). '/Js/customizer-preview.js', null, true); add_action ('custom_preview_init', 'tuts_customize_preview_js'); // 2. customizer-control.js Funktion tuts_customize_control_js () wp_enqueue_script ('tuts_customizer_control', get_template_directory_uri (). '/Js/customizer-control.js', array ('custom-Steuerelemente', 'jquery'), null, wahr ); add_action ('custom_controls_enqueue_scripts', 'tuts_customize_control_js');Das customizer-preview.js Die Datei wird innerhalb des Customizer-Vorschaufensters über das Fenster geladen anpassen_preview_init Aktionshaken. Das customizer-control.js Die Datei wird in das Customizer-Backend geladen, von wo aus die Einstellungen und Steuerelemente über das Kontrollfeld aufgerufen werden anpassen_controls_enqueue_scripts Aktionshaken.
WordPress wurde seit seiner Gründung stark in PHP investiert. Daher ist es keine Überraschung, dass die Mehrheit der Entwickler, die das Ökosystem unterstützen, die PHP-APIs besser beherrscht als die JavaScript-APIs.
Erst in letzter Zeit wurde JavaScript durch den Customizer und die WP-API umfassend integriert. Das Erfassen der JavaScript-APIs im WordPress-Customizer kann eine Herausforderung sein. Wie bereits erwähnt, ist die Seite von WordPress derzeit am wenigsten dokumentiert. Deshalb werden wir dieses Thema gründlich durchgehen.
Wenn Sie nach anderen Dienstprogrammen suchen, die Sie dabei unterstützen, Ihre wachsenden Werkzeuge für WordPress aufzubauen oder um Code zu lernen und sich mit WordPress vertraut zu machen, sollten Sie nicht vergessen, was wir in Envato zur Verfügung haben Markt.
Hier haben wir alle wesentlichen Elemente für die Arbeit mit WordPress-JavaScript-APIs vorbereitet. Und wir werden hier enden. Im nächsten Teil der Serie werden wir mehr über die JavaScript-APIs in WordPress erfahren und mit dem Schreiben von funktionalen Skripts beginnen, die Sie sofort in Ihr Design implementieren können.
Bleib dran!
