In Teil 1 der WordPress Theme Customizer-Serie habe ich erwähnt, dass Sie, um mit dem Theme Customizer zu interagieren, laden müssen $wp_customize Objekt, das eine Instanz von . ist WP_Customize_Manager Klasse. Dazu müssen Sie verwenden anpassen_register Aktionshaken:
add_action( 'customize_register', 'my_theme_customize_register' );
function my_theme_customize_register( $wp_customize ) {
// Interacting with $wp_customize object
}
Sie können diesen Code in die functions.php Ihres Themes oder 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 können Sie 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 werden oder Löschen ein Abschnitt, ein Steuerelement oder eine Einstellung, alles was Sie brauchen ist seine ID. Diese Zeile entfernt den Abschnitt Colors (platziere ihn in der Funktion my_theme_customize_register aus dem ersten Code-Snippet):
$wp_customize->remove_section( 'colors' );
Das Hinzufügen eines Abschnitts, Steuerelements oder einer Einstellung ist etwas anders, da einige weitere Parameter erforderlich sind. Ich werde sie hier aus zwei Gründen nicht alle durchgehen:
- Das ist nicht wirklich der Zweck dieser Serie, wir werden eine Theme Customizer-Boilerplate erstellen, die Sie stattdessen einfach in Ihr Theme einfügen können
- Alex Mansfield hat es bereits in seinem 6000-Wörter-Monster von a . behandelt Theme-Customizer-Tutorial die jeder WordPress-Theme-Entwickler lesen und dann twittern muss (im Ernst, wenn Sie es noch nicht getan haben, lesen Sie es jetzt).
Aber lassen Sie uns dennoch einen Blick darauf werfen, wie Sie Ihre eigene Einstellung mit einem Steuerelement in einem neuen Abschnitt zum Anpassen von Designs 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, die das Layout Ihres Themes speichert
- Eine neue Funksteuerung mit zwei Optionen – Sidebar links und Sidebar rechts
Das erste, was dem Theme Customizer hinzugefügt werden muss, ist der Abschnitt „Layout“:
$wp_customize->add_section(
// ID
'layout_section',
// Arguments array
array(
'title' => __( 'Layout', 'my_theme' ),
'capability' => 'edit_theme_options',
'description' => __( 'Allows you to edit your theme's layout.', 'my_theme' )
)
);
Versuchen Sie noch nicht, es im Customizer anzuzeigen. Ein Abschnitt wird nur angezeigt, wenn eine Einstellung und ein Steuerelement hinzugefügt wurden. Also fügen wir beides hinzu:
$wp_customize->add_setting(
// ID
'my_theme_settings[layout_setting]',
// Arguments array
array(
'default' => 'right-sidebar',
'type' => 'option'
)
);
$wp_customize->add_control(
// ID
'layout_control',
// Arguments array
array(
'type' => 'radio',
'label' => __( 'Theme layout', 'my_theme' ),
'section' => 'layout_section',
'choices' => array(
'left-sidebar' => __( 'Left sidebar', 'my_theme' ),
'right-sidebar' => __( 'Right sidebar', 'my_theme' )
),
// This last one must match setting ID from above
'settings' => 'my_theme_settings[layout_setting]'
)
);
Angenommen, Sie lesen Alex‘ Tutorial und/oder Codex-Seiten, es gibt nur einen Parameter im Array add_setting arguments — ‚type‘ —, auf den ich mich konzentrieren möchte. Sie haben hier zwei Möglichkeiten, ‚option‘ und ‚theme_mod‘, und Sie können sie mit abrufen get_option und get_theme_mod, bzw. Ich verwende immer ‚Option‘, nur weil Sie damit die Werte Ihrer Theme-Einstellungen serialisieren können, indem Sie ihnen IDs wie geben my_theme_settings[setting_1], my_theme_settings[setting_2] usw. Auf diese Weise werden alle Werte als ein Datenbankeintrag in Ihrer wp_options-Tabelle gespeichert.
Und schließlich, nachdem Sie diese beiden Codeschnipsel hinzugefügt haben, um zu funktionieren, in die Sie eingehakt haben anpassen_register Action Hook (erster Code-Schnipsel in diesem Beitrag), Theme Customizer wurde angepasst:
Verwenden von Theme Customizer-Einstellungswerten in Ihrem Theme
Nachdem Sie Ihren Benutzern die Möglichkeit gegeben haben, diese Einstellung zu speichern, können Sie ihren Wert abrufen und einhaken body_class Filter-Hook und fügen Sie ihn zum Array bestehender Körperklassen hinzu:
add_filter( 'body_class', 'my_theme_body_classes' );
function my_theme_body_classes( $classes ) {
/*
* Since we used 'option' in add_setting arguments array
* we retrieve the value by using get_option function
*/
$my_theme_settings = get_option( 'my_theme_settings' );
$classes[] = $my_theme_settings['layout_setting'];
return $classes;
}
Dadurch wird entweder .left-sidebar oder .right-sidebar zum Array von Body-Klassen in Ihrem Design hinzugefügt. Indem Sie diese beiden Klassen in der style.css-Datei Ihres Themes verwenden, können Sie zwei verschiedene Layouts erstellen. Zum Beispiel:
/* Sidebar on the right is default layout */
#content {
float: left;
width: 60%;
}
#sidebar {
float: right;
width: 30%;
}
/* Using .left-sidebar class to override default layout */
.left-sidebar #content {
float: right;
}
.left-sidebar #sidebar {
float: left;
}
Das Beste von allem ist, dass Benutzer dank des WordPress Theme Customizers eine Vorschau beider Layouts anzeigen können, bevor sie etwas speichern. Nehmen Sie das, Themeneinstellungsseiten!
Zusammenfassung und weiterführende Literatur
Die TL;DR-Version dieses Beitrags würde in etwa so aussehen: Sie können das Objekt $wp_customize abrufen und dann entweder etwas (Abschnitt, Einstellung oder Steuerung) hinzufügen oder daraus entfernen. Alles andere läuft auf die Einstellungsparameter hinaus.
Im dritten Teil wird diese Serie interessant, da wir damit beginnen, den gesamten Prozess zu automatisieren und an einer Theme Customizer Boilerplate zu arbeiten, die Sie in Ihr Theme einfügen und sofort verwenden können. Bleiben Sie dran!