Share
Im letzten Artikel haben wir eine einfache Methode für alles definiert, was erforderlich ist, um einen neuen Abschnitt, Einstellungen und Steuerelemente im Designanpassungsprogramm einzurichten.
In diesem Artikel werden wir mehr davon tun; Wir werden jedoch neue Einstellungen und Steuerelemente in den vorhandenen Abschnitt einfügen. Wir werden jedoch verschiedene Optionen wie Optionsfelder, Auswahlfelder und Eingabefelder betrachten.
Also, lass uns fortfahren.
Wir erinnern uns an den letzten Artikel, dass unsere Methodik wie folgt ist:
Accentsconagua
get_theme_mod Wir werden dies für jedes der neuen Steuerelemente in den folgenden Einstellungen und Steuerelementen durchführen. Bei Bedarf sprechen wir nach Bedarf über Datenvalidierung und -bereinigung.
Sobald wir das Ende des Artikels erreicht haben, wird eine Version des Codes dieses Artikels auch von GitHub heruntergeladen.
Fügen wir dem Design-Customizer eine neue Option hinzu, mit der der Benutzer zwischen Farbschemas wählen kann - eines ist das Standard-Schwarz-Weiß-Farbschema, das andere ist das Umgekehrte.
Dazu müssen wir zunächst eine Einstellung und ein Steuerelement hinzufügen tcx_register_theme_customizer Funktion. Fügen Sie die folgenden zwei Funktionsaufrufe unten hinzu:
$ wp_customize-> add_setting ('tcx_color_scheme', array ('default' => 'normal', 'transport' => 'postMessage')); $ wp_customize-> add_control ('tcx_color_scheme', array ('section' => 'tcx_display_options', 'label' => 'Farbschema', 'type' => 'radio', 'options' => array ('normal' => 'Normal', 'Inverse' => 'Inverse'))); Beachten Sie, dass wir eine neue Einstellung hinzufügen, die durch das Symbol identifiziert wurde tcx_color_scheme ID und wir verwenden offensichtlich die POST-Meldung Transportart.
Zweitens, beachten Sie, dass wir auch ein bereitgestellt haben Standard Wert, der auf festgelegt ist normal. Dieser Wert bringt uns zum add_control Anruf.
Beachten Sie, dass wir es an den binden tcx_display_options dass wir im letzten Artikel definiert haben. Wir haben es das Etikett gegeben Farbschema denn das ist offensichtlich, was wir ändern, und wir setzen das Art der Kontrolle als a Radio Taste.
Dazu müssen wir eine Reihe von Auswahlmöglichkeiten übergeben, wobei der erste Schlüssel der Wert der Option ist und der zweite Wert die Beschriftung für das Optionsfeld ist.
Diese Deshalb ist der Standardwert für die add_setting Anruf ist auf eingestellt normal.
Jetzt sollten wir in der Lage sein, unsere Arbeit zu speichern, den Theme Customizer zu aktualisieren und dann die neue Option zu sehen.
Aber zu diesem Zeitpunkt wird es noch nicht viel bewirken.
Jetzt müssen wir hüpfen js / theme-customizer.js und fügen Sie den folgenden Code-Block hinzu:
wp.customize ('tcx_color_scheme', function (value) value.bind (function (to) if ('inverse' === to) $ ('body') .css (background: '# 000', color: '#fff'); else $ ('body') .css (Hintergrund: '#fff', Farbe: '# 000');;); Dies weist den Theme-Customizer an, das zu ändern KarosserieHintergrundfarbe und Schriftfarbe basierend auf der Einstellung der Optionsfelder.
Wenn Sie diesen Code implementieren, sollten Sie in der Lage sein, das Designanpassungsprogramm zu aktualisieren und die Änderungen zu sehen. Das Problem ist, dass die Werte nicht wirklich in der Datenbank gespeichert werden.
get_theme_mod Die letzte Sache, die wir implementieren müssen, um sicherzustellen, dass die Daten aus der Datenbank gelesen werden, um das Farbschema zu ändern, ist das Hinzufügen eines Stils Stil Block in der tcx_customizer_css Funktion:
Hintergrund: # 000; Farbe: #fff; Hintergrund: #fff; Farbe: # 000;
Leicht genug zu verstehen, richtig? Es funktioniert genau so wie unser JavaScript-Code, nur dass das Design beim Laden der Seite gilt und nicht nur bei der Vorschau.
Jetzt setzen wir den Prozess fort, indem wir eine weitere Einstellung und ein anderes Steuerelement mit unserer Methodik einführen, sodass unsere Benutzer eine globale Schriftart für ihr Design auswählen können.
Dazu verwenden wir eine wählen Element mit einer Reihe von Optionen, aus denen der Benutzer die gewünschte Front auswählen kann.
An diesem Punkt sollte die Methodik sehr vertraut werden.
Zuerst definieren wir eine Einstellung für die tcx_font das wir später im gesamten Code als Referenz verwenden werden:
$ wp_customize-> add_setting ('tcx_font', array ('default' => 'times', 'transport' => 'postMessage')); Genau wie bei der vorherigen Einstellung werden wir bereitgestellt Standard Wert, den wir momentan definieren werden, wenn wir ein neues Steuerelement implementieren.
Wie bereits erwähnt, werden wir den Benutzern die Möglichkeit geben, mit a eine Schriftart auszuwählen wählen Element. Dies ist der Funktionsweise von Optionsfeldern sehr ähnlich, da wir ein Array mit Schlüsseln und Werten bereitstellen, die die Schriftart definieren. jedoch die tatsächliche Art des Elements wird anders sein.
Fügen Sie dem folgenden Code hinzu tcx_register_theme_customizer Funktion:
$ wp_customize-> add_control ('tcx_font', array ('section' => 'tcx_display_options', 'label' => 'Theme Font', 'type' => 'select', 'Auswahlen' => array ('times') => 'Times New Roman', 'arial' => 'Arial', 'kurier' => 'Kurier neu'))); Dies wird ein einführen wählen Element in den Design-Customizer mit den folgenden drei Optionen für Schriftarten:
Nun müssen wir die Optionen für die Schriftarten so aufschreiben, dass sie die Schrift des Designs dynamisch ändern.
Öffnen Sie dazu js / theme-customizer.js und fügen Sie dann den folgenden Code-Block hinzu. Beachten Sie, dass dies etwas komplizierter sein wird als das, was wir im JavaScript des Theme Customizer gewohnt sind.
Stellen Sie zunächst sicher, dass Sie haben var sFont Oben in der JavaScript-Datei direkt über dem ersten Aufruf von definiert wp.anpassen.
Fügen Sie anschließend den folgenden Code-Block hinzu:
wp.customize ('tcx_font', function (value) value.bind (function (to) switch (to.toString (). toLowerCase ()) case 'times': sFont = 'Times New Roman'; break; case 'arial': sFont = 'Arial'; break; case 'kurier': sFont = 'Courier New, Courier'; break; case 'helvetica': sFont = 'Helvetica'; break; default: sFont = 'Times New Roman '; break; $ (' body ') .css (fontFamily: sFont););); Obwohl die Funktion etwas länger ist, ist sie eigentlich ganz einfach: Wir nehmen den eingehenden Wert und verwenden dann ein Schaltergehäuse um zu bestimmen, welche Schriftart ausgewählt wurde. Basierend auf dem ausgewählten Wert weisen wir ihn dem zu sFont Variable.
Und wenn Sie aus defensiven Codierungsgründen nicht definiert sind oder während des Transports etwas schief geht, werden wir uns dem Standard widmen Times New Roman.
Zum Schluss gilt dann der Wert von sFont zum Schriftfamilie Attribut des Karosserie Element mit jQuery css Funktion.
get_theme_mod Nun müssen wir unsere Methodik entsprechend aktualisieren tcx_customizer_css Funktion, damit die Schrift korrekt auf den Körper angewendet wird.
Dies ist eigentlich ein einfacher Aufruf:
Schriftfamilie:
Erledigt.
Schließlich erlauben wir dem Benutzer, die Copyright-Meldung anzupassen, die unten in der Fußzeilenvorlage angezeigt wird.
Lassen Sie uns jetzt die Vorlage anpassen. Derzeit sollte es so aussehen:
© Alle Rechte vorbehalten
Aber lass es uns so aktualisieren, dass es so aussieht:
©
Obwohl das wird ein bisschen Vor unserer Methodik ist es notwendig, dass wir definieren, damit der Theme-Customizer das Neue nutzen kann Spanne Element, und so können wir die Copyright-Meldung anzeigen, wie vom Benutzer definiert.
Zuerst werden wir unsere endgültige Einstellung vorstellen:
$ wp_customize-> add_setting ('tcx_footer_copyright_text', array ('default' => 'All Rights Reserved', 'sanitize_callback' => 'tcx_sanitize_copyright', 'transport' => 'postMessage')); Beachten Sie jedoch, es gibt eine Sache, die sich von den vorherigen Eingaben unterscheidet. Dies ist der Schlüssel und Wert "sanitize_callback". Dadurch wird eine Funktion definiert, die ausgelöst wird, wenn die Daten in eine Datenbank serialisiert werden. Schließlich machen wir keine illegalen Inhalte, die in die Datenbank gelangen.
Dazu definieren wir eine aufgerufene Funktion tcx_sanitize_copyright Dadurch werden alle Tags, Schrägstriche und andere illegale Tags entfernt, die in die Datenbank serialisiert werden sollen:
Funktion tcx_sanitize_copyright ($ input) return strip_tags (striplashes ($ input));
Wir geben einfach den Wert der bereinigten Eingabe zurück.
Als nächstes ist es Zeit, das tatsächliche Steuerelement für die Einstellung hinzuzufügen.
$ wp_customize-> add_control ('tcx_footer_copyright_text', array ('section' => 'tcx_display_options', 'label' => 'Copyright-Meldung', 'type' => 'text')); Auch hier binden wir es an die tcx_display_options Abschnitt und wir geben ihm das Label "Copyright Message", damit die Benutzer die Tabelle lesen können. Zum Schluss haben wir dies als a definiert Text Eingang.
Natürlich wissen Sie zu diesem Zeitpunkt, dass wir mit dem Steuerelement erst dann etwas anfangen können, wenn wir es mit dem JavaScript verbunden haben.
Das JavaScript dafür ist sehr einfach, besonders wenn Sie das gegeben haben Spanne Eine eindeutige ID wie oben beschrieben.
wp.customize ('tcx_footer_copyright_text', function (value) value.bind (function (to) $ ('# copyright-message') .text (to););); Im Wesentlichen nimmt es den Wert von zu Argument und setzt es als Wert der SpanneText.
get_theme_mod Und schließlich, obwohl wir es bereits in der Vorlage gemacht haben, werden wir den Code hier überprüfen:
©
Beachten Sie, dass wir den Wert von lesen tcx_footer_copyright_text und dann drucken wir diesen Wert auf dem Bildschirm aus.
Und jetzt ist es soweit! Wir haben uns einige grundlegende Steuerelemente angesehen, die dem Benutzer eine beträchtliche Kontrolle über das Aussehen und Verhalten dieses zwar sehr grundlegenden Themas geben, und wir haben darüber nachgedacht, wie die Datenbereinigung zusammen mit dem Serialisierungsprozess eingeführt werden kann.
Das einzige, was noch zu behandeln ist, sind einige der fortschrittlicheren, integrierten Steuerelemente, die WordPress bietet. Im nächsten Artikel werden wir uns einige dieser Features und deren Implementierung ansehen.
!
