Share
An diesem Punkt der Serie haben wir alles behandelt, um zu verstehen, warum der Theme Customizer für diejenigen von uns, die Designer und Entwickler sind, von Vorteil ist, wie man sie in unser Theme umsetzt, und die Beziehung zwischen Abschnitten, Einstellungen und Steuerelementen.
Außerdem haben wir uns angesehen, wie Sie unsere eigenen Einstellungen und Steuerelemente in einem der vordefinierten Bereiche von WordPress implementieren können.
In diesem Artikel werden wir uns ansehen, was erforderlich ist, um unseren eigenen Abschnitt und verschiedene Einstellungen und Steuerelemente einzuführen. In diesem Artikel wird eine Methodik beschrieben, die zum Implementieren neuer Einstellungen und Steuerelemente befolgt werden kann. Außerdem wird erläutert, wie Sie diese Methode zur Einführung eines neuen Abschnitts, einer neuen Einstellung und einer neuen Steuerung anwenden können.
Wir werden dieses Thema im zweiten Teil dieses Artikels durch zusätzliche Steuerelemente erweitern. Schauen wir uns zunächst die Methodik an und führen wir eine neue Einstellung in den Theme-Customizer ein.
Bevor wir mit der Aktualisierung unseres Themas beginnen, sprechen wir zuerst darüber, was erforderlich ist, um einen neuen Abschnitt, eine neue Einstellung und ein neues Steuerelement einzuführen. Beachten Sie, dass wir an dieser Stelle davon ausgehen, dass wir immer die verwenden werden POST-Meldung Transport für Live-Updates, also gehen wir davon aus.
Eine Methodik für die Einführung neuer Optionen ist jedoch immer viel hilfreicher als ein blinder Blindgänger. Schauen wir uns also an, was erforderlich ist, um Abschnitte, Einstellungen und Steuerelemente auf höchster Ebene zu implementieren:
Accentsconagua
get_theme_mod Nichts zu kompliziert, oder? Natürlich sprechen Aktionen mehr als Worte, also fangen wir genau damit an.
Um der oben skizzierten Methodik zu folgen, werden wir mit den gleichen Funktionen, Vorlagen und JavaScript-Dateien arbeiten, die wir in den vorherigen Artikeln definiert haben. Wenn Sie also nicht weitergekommen sind, ist dies jetzt der Fall Zeit.
Lass uns damit anfangen.
In dem tcx_register_theme_customizer Funktion, werden wir einen Abschnitt namens implementieren Anzeigeoptionen, und wir sorgen dafür, dass dies am Ende der Liste der Abschnitte im Design-Customizer steht. Dies erfolgt durch Einstellen der Priorität Eigentum der add_section.
$ wp_customize-> add_section ('tcx_display_options', array ('title' => 'Anzeigeoptionen', 'Priorität' => 200)); Beachten Sie oben, wir haben zwei Argumente definiert:
Wenn Sie Ihre Arbeit jetzt speichern und versuchen, den Anpasser erneut zu laden, wird das nicht angezeigt Anzeigeoptionen Sektion. Das liegt daran, dass es keine Optionen für die Anzeige gibt - noch nicht.
Um den Abschnitt anzeigen zu können, müssen Sie eine Einstellung für den Benutzer vornehmen, um die Einstellungen vorzunehmen. Dazu führen wir eine Option ein, mit der der Benutzer die Sichtbarkeit eines Headers umschalten kann.
Als Erstes müssen wir anrufen add_setting Dadurch wird die Einstellung identifiziert und der Standardwert und die Transportmethode festgelegt.
All dies sollte relativ einfach sein, wenn Sie mit dem vorherigen Artikel Schritt gehalten haben. Also gleich unter dem Anruf an add_section, Fügen Sie den folgenden Aufruf hinzu:
$ wp_customize-> add_setting ('tcx_display_header', array ('default' => 'true', 'transport' => 'postMessage')); Insbesondere haben wir eine neue Einstellung erstellt tcx_display_header , die wir verwenden werden, um die Anzeige der Kopfzeile mit beiden zu ändern get_theme_mod und mit JavaScript.
Dies reicht jedoch nicht aus, um dem Benutzer die Möglichkeit zu geben, die Sichtbarkeit der Kopfzeile zu optimieren. Wir müssen jetzt ein Steuerelement implementieren.
Für diese spezielle Einstellung wird ein Kontrollkästchen eingeführt, mit dem Benutzer die Sichtbarkeit der Einstellung ändern können.
Zuerst müssen wir das Steuerelement definieren. Fügen Sie dazu den folgenden Code unter dem Aufruf von hinzu add_setting dass wir oben definiert haben:
$ wp_customize-> add_control ('tcx_display_header', array ('section' => 'tcx_display_options', 'label' => 'Kopfzeile anzeigen', 'type' => 'Ankreuzfeld')); In diesem Aufruf binden wir die Kontrolle an die tcx_display_header Einstellung, damit es weiß, welche Informationen gerendert werden sollen. Im Array geben wir die ID des Abschnitts an, an den diese Einstellung und Kontrolle gebunden sind. Als Nächstes geben wir das Label an, das neben dem Steuerelement angezeigt wird, und definieren schließlich die Art des Steuerelements. Natürlich definieren wir ein Kontrollkästchen.
An diesem Punkt sollten Sie in der Lage sein, Ihre Arbeit zu speichern, das Designanpassungsprogramm zu aktualisieren und dann Folgendes anzuzeigen:
Das ist gut - es bedeutet, dass alles, was den Theme-Customizer betrifft, ordnungsgemäß verkabelt wurde. Beachten Sie jedoch, dass das Ankreuzen des Kontrollkästchens eigentlich nicht funktioniert tun etwas.
Jetzt ist es an der Zeit, den Theme Customizer mit dem eigentlichen Theme zu verbinden.
Zuerst wollen wir öffnen theme-customizer.js. Wenn Sie mitverfolgt haben, befindet sich diese im js Verzeichnis, das wir zuvor in der Serie definiert haben.
Als nächstes müssen wir den folgenden Code hinzufügen:
wp.customize ('tcx_display_header') function (value) value.bind (function (to) false === to? $ ('#header') .hide (): $ ('#header') .show ( ););); Beachten Sie, dass die ID der von uns erstellten Einstellung übernommen wird und dann die folgende Logik ausgeführt wird: If zu entspricht falsch, dann verstecken wir das Header-Element; Ansonsten zeigen wir das Header-Element.
Aktualisieren Sie an diesem Punkt die Seite, und Sie sollten feststellen, dass der Header verschwindet (oder wieder angezeigt wird), wenn Sie das Kontrollkästchen aktivieren.
Wenn Sie Ihre Arbeit jedoch speichern, passiert nichts. Dies liegt daran, dass der serialisierte Wert nicht gelesen wird. Das letzte, was wir tun müssen, ist die Hebelwirkung get_theme_mod für die Einstellungen.
get_theme_mod Der letzte Teil der für die Implementierung unserer eigenen Einstellung erforderlichen Methode besteht darin, sicherzustellen, dass der über den Transport gespeicherte Wert beim Laden der Seite gelesen wird.
Suchen Sie dazu das tcx_customizer_css Funktion und fügen Sie den folgenden Code zwischen Stil Block:
#header display: none;
Kurz gesagt, liest dies den Designwert für die ID des Header-Anzeigewerts, den wir gespeichert haben. Wenn es auf false gesetzt ist, wird das Header-Element ausgeblendet. Andernfalls wird das CSS niemals gerendert.
An diesem Punkt sollten Sie über eine vollständig funktionierende Implementierung des Kontrollkästchens verfügen, das den Header dynamisch umschaltet, wenn der Benutzer mit dem Anpassungsprogramm arbeitet, und den serialisierten Wert beim Speichern der Einstellung nutzt und das aktualisiert, was dem Benutzer immer angezeigt wird Laden Sie das Thema auf.
Nachdem wir nun eine Methode zum Implementieren von Abschnitten, Einstellungen und Steuerelementen definiert haben, können wir auch mit einer Vielzahl anderer Steuerelemente arbeiten.
Im nächsten Artikel werfen wir einen Blick auf die verbleibenden grundlegenden Steuerelemente. Anschließend werden einige erweiterte Steuerelemente beschrieben, die WordPress im Designanpassungsprogramm bietet.
Wie in früheren Versionen des Designs können Sie Version 0.4.0 von GitHub herunterladen, um den Code zu überprüfen, mit ihm herumzuspielen und sich auf die nächsten Steuerelemente vorzubereiten, die in dem folgenden Artikel vorgestellt werden.
