Interaktion mit WordPress Theme Customizer

  1. 1. Einführung in den WordPress Theme Customizer
  2. 2. Derzeit lesen: Interaktion mit WordPress Theme Customizer
  3. 3. WordPress Theme Customizer Boilerplate
  4. 4. Erweitern des WordPress Theme Customizer Boilerplate
  5. 5. Theme Customizer Boilerplate – Bedingte Optionen, untergeordnete Themen und Plugins

In Teil 1 der WordPress Theme Customizer-Reihe habe ich erwähnt, dass Sie laden müssen, um mit Theme Customizer zu interagieren $ wp_customize Objekt, das eine Instanz von ist WP_Customize_Manager Klasse. Dazu müssen Sie verwenden customize_register Aktionshaken:


add_action ('customize_register', 'my_theme_customize_register');
Funktion my_theme_customize_register ($ wp_customize) {

// Interaktion mit dem Objekt $ wp_customize

}}

Sie können diesen Code in die Datei functions.php Ihres Themas oder in eine darin enthaltene Datei einfügen.

Hinzufügen oder Entfernen von Theme Customizer-Elementen (Abschnitte, Einstellungen und Steuerelemente)

Sobald Sie geladen haben $ wp_customize Objekt Sie können jede seiner Methoden verwenden, um Einstellungen, Steuerelemente und Abschnitte darin hinzuzufügen, abzurufen oder zu entfernen (add_setting, get_setting, remove_setting, add_control … Sie bekommen den Punkt).

Also, wenn du willst erhalten oder entfernen Für einen Abschnitt, ein Steuerelement oder eine Einstellung benötigen Sie lediglich die ID. Diese Zeile entfernt den Abschnitt “Farben” (platzieren Sie ihn in der Funktion “my_theme_customize_register” aus dem ersten Codeausschnitt):

$ wp_customize-> remove_section ('Farben');

Das Hinzufügen eines Abschnitts, einer Steuerung oder einer Einstellung unterscheidet sich geringfügig, da weitere Parameter erforderlich sind. Ich werde sie hier aus zwei Gründen nicht alle durchgehen:

  1. Das ist nicht wirklich der Zweck dieser Serie. Wir erstellen ein Theme Customizer-Boilerplate, das Sie stattdessen einfach in Ihr Thema einfügen können
  2. Alex Mansfield hat es bereits in seinem 6000-Wörter-Monster von a behandelt Tutorial zum Theme Customizer dass jeder WordPress-Theme-Entwickler lesen und dann twittern muss (im Ernst, wenn Sie es noch nicht getan haben, lesen Sie es jetzt).

Schauen wir uns dennoch an, wie Sie Ihre eigene Einstellung mit einem Steuerelement in einem neuen Abschnitt “Theme Customizer” hinzufügen können, sowie einige der Argumente. Da es viel einfacher ist, mit echten Beispielen zu arbeiten, gehen wir wie folgt vor:

  • Ein neuer Abschnitt mit der Bezeichnung “Layout”
  • Eine neue Einstellung, in der das Layout Ihres Themas gespeichert wird
  • Eine neue Funksteuerung mit zwei Optionen – Seitenleiste links und Seitenleiste rechts

Das erste, was Sie zum Theme Customizer hinzufügen können, ist der Abschnitt „Layout“:

$ wp_customize-> add_section (
// ICH WÜRDE
'layout_section',
// Argumente Array
Array (
'title' => __ ('Layout', 'my_theme'),
'Capability' => 'edit_theme_options',
'description' => __ ('Ermöglicht das Bearbeiten des Layouts Ihres Themas.', 'my_theme')
)
);

Versuchen Sie noch nicht, es im Customizer anzuzeigen. Ein Abschnitt wird nur angezeigt, wenn eine Einstellung und ein Steuerelement hinzugefügt wurden. Fügen wir also beide hinzu:

$ wp_customize-> add_setting (
// ICH WÜRDE
'my_theme_settings [layout_setting]',
// Argumente Array
Array (
'default' => 'rechte Seitenleiste',
'Typ' => 'Option'
)
);
$ wp_customize-> add_control (
// ICH WÜRDE
'layout_control',
// Argumente Array
Array (
'Typ' => 'Radio',
'label' => __ ('Theme layout', 'my_theme'),
'section' => 'layout_section',
'Auswahl' => Array (
'linke Seitenleiste' => __ ('linke Seitenleiste', 'my_theme'),
'rechte Seitenleiste' => __ ('rechte Seitenleiste', 'my_theme')
),
// Dieser letzte muss mit der Einstellungs-ID von oben übereinstimmen
'settings' => 'my_theme_settings [layout_setting]'
)
);

Vorausgesetzt, Sie lesen Alex ‘Tutorial- und / oder Codex-Seiten, gibt es nur einen Parameter im Array add_setting-Argumente – “Typ” – auf den ich mich konzentrieren möchte. Sie haben hier zwei Möglichkeiten: “Option” und “theme_mod” und können diese mithilfe von abrufen get_option und get_theme_mod, beziehungsweise. Ich verwende immer “Option”, nur weil Sie damit Ihre Werte für die Themeneinstellungen serialisieren können, indem Sie ihnen IDs wie ” my_theme_settings [settings_1], my_theme_settings [settings_2] usw. Auf diese Weise werden alle Werte als ein Datenbankeintrag in Ihrer Tabelle wp_options gespeichert.

Und schließlich, nachdem Sie diese beiden Codefragmente hinzugefügt haben, in die Sie eingebunden sind customize_register Action Hook (erstes Code-Snippet in diesem Beitrag), Theme Customizer wurde angepasst:

Neuer Abschnitt zum Theme Customizer hinzugefügt

Neuer Abschnitt zum Theme Customizer hinzugefügt

Verwenden der Einstellungswerte des Theme Customizer in Ihrem Theme

Nachdem Sie Ihren Benutzern die Möglichkeit gegeben haben, diese Einstellung zu speichern, können Sie ihren Wert abrufen und sich einbinden body_class Filtern Sie den Hook und fügen Sie ihn einem Array vorhandener Körperklassen hinzu:

add_filter ('body_class', 'my_theme_body_classes');
Funktion my_theme_body_classes ($ classes) {

/ *
* Da wir 'option' im Array add_setting argumentiert haben
* Wir rufen den Wert mit der Funktion get_option ab
* /
$ my_theme_settings = get_option ('my_theme_settings');

$ classes [] = $ my_theme_settings ['layout_setting'];

return $ classes;

}}

Dadurch wird entweder eine linke Seitenleiste oder eine rechte Seitenleiste zu einer Reihe von Körperklassen in Ihrem Thema hinzugefügt. Wenn Sie diese beiden Klassen in der style.css-Datei Ihres Themas verwenden, können Sie zwei verschiedene Layouts erstellen. Zum Beispiel:

/ * Die Seitenleiste rechts ist das Standardlayout * /
#content {
float: left;
Breite: 60%;
}}
#sidebar {
schweben rechts;
Breite: 30%;
}}

/ * Verwenden der .left-sidebar-Klasse zum Überschreiben des Standardlayouts * /
.linke Seitenleiste #content {
schweben rechts;
}}
.linke Seitenleiste #sidebar {
float: left;
}}

Das Beste ist, dass Benutzer dank WordPress Theme Customizer eine Vorschau beider Layouts anzeigen können, bevor sie etwas speichern. Nehmen Sie die Seiten mit den Themeneinstellungen!

Zusammenfassung und weiterführende Literatur

Die TL; DR-Version dieses Beitrags würde ungefähr so ​​aussehen: Sie können das Objekt $ wp_customize abrufen und dann entweder etwas (Abschnitt, Einstellung oder Steuerelement) hinzufügen oder daraus entfernen. Alles andere läuft auf Einstellungsparameter hinaus.

In Teil 3 wird diese Serie interessant, da wir den gesamten Prozess automatisieren und an Theme Customizer Boilerplate arbeiten, das Sie in Ihr Thema einfügen und sofort verwenden können. Bleib dran!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map