In Teil 3 der Theme Customizer-Serie wurde Ihnen die Theme Customizer Boilerplate vorgestellt, mit der Sie den Code vereinfachen können, der Ihre Theme-Optionen handhabt. Alles, was Sie tun müssen, ist, eine Reihe von Optionsfeldern zu übergeben, und der Boilerplate kümmert sich hinter den Kulissen um die Registrierung von Theme-Customizer-Abschnitten, -Einstellungen und -Steuerelementen für Sie.
Bisher konnten Sie mit Boilerplate Textfelder, Kontrollkästchen, Optionsfelder und Auswahlfelder im Theme Customizer verwenden. Dieser Artikel zeigt Ihnen, wie Sie es erweitern können.
Hinweis: Bevor Sie fortfahren, laden Sie bitte die neueste Version des WordPress Theme Customizer Boilerplate aus seinem Github-Repository herunter. Ich habe seit dem letzten Tutorial einige Verbesserungen daran vorgenommen, und es ist wichtig, dass Ihr Code auf dem neuesten Stand ist. Werfen Sie einen Blick auf den vorherigen Beitrag, um weitere Hinweise zu Änderungen zu erhalten, aber kurz gesagt: Sobald Sie die Boilerplate in Ihren Themenordner kopiert haben, müssen Sie die Dateien überhaupt nicht bearbeiten – die gesamte Bearbeitung erfolgt mithilfe von Filter- und Aktions-Hooks.
Einhaken in Theme Customizer Boilerplate
Es gibt mehrere Aktions- und Filter-Hooks in der WordPress Theme Customizer Boilerplate. Du kannst dich über die Datei functions.php deines Themes in jeden von ihnen einklinken, indem du verwendest add_action und add_filter Funktionen:
- ‚thsp_cbp_directory_uri‘ – In helpers.php definierter Filter-Hook, ermöglicht es Ihnen, den Speicherort von Customizer Boilerplate in Ihrem Theme-Ordner zu ändern. Standardmäßig sieht der Boilerplate-Pfad so aus – get_template_directory_uri() . ‚/customizer-boilerplate‘ – aber wenn Sie es lieber an einen benutzerdefinierten Speicherort verschieben möchten, ist dies der Haken, der Ihnen helfen kann.
- ‚thsp_cbp_menu_link_text‘ – In helpers.php definierter Filter-Hook, lässt Sie den Menütext-Link ändern. Boilerplate fügt einen Link unter Erscheinungsbild im WordPress-Dashboard hinzu, der Benutzern einen einfachen Zugriff auf den Theme Customizer ermöglicht. Standardmäßig lautet dieser Link „Theme Customizer“ und Sie können den Text mit dem Filter-Hook ‚thsp_cbp_menu_link_text‘ ändern.
- ‚thsp_cbp_capability‘ – Filter-Hook in helpers.php definiert. Ermöglicht Ihnen, die erforderliche Standardfähigkeit zu ändern, die in der Methode $wp_customize->add_setting verwendet wird.
- ‚thsp_cbp_option‘ – Filter-Hook in helpers.php definiert. Wenn Sie ‚option‘ in Ihren Einstellungsargumenten verwenden, verwenden Sie diesen Hook, um den Namen des Eintrags zu ändern, unter dem Ihre Theme-Einstellungswerte in der Tabelle wp_options gespeichert werden. Der Standardwert ist ‚thsp_cbp_theme_options‘, stellen Sie sicher, dass Sie sich in diesen einklinken und ändern Sie ihn in etwas, das Ihren Themennamen enthält.
- ‚thsp_cbp_options_array‘ – Filter-Hook, der in options.php definiert ist, Sie MÜSSEN darin einhaken und das Standardoptionen-Array (mit Beispieloptionen) durch Optionen ersetzen, die in Ihrem Design verwendet werden. Ich wiederhole das, fett und unterstreiche es: JaSie MÜSSEN sich darin einklinken und das Standardoptionen-Array durch Optionen ersetzen, die in Ihrem Thema verwendet werden.
- ‚thsp_cbp_custom_controls‘ – Aktions-Hook, der in custom-controls.php definiert ist. Durch Einhaken können Sie Ihre eigenen benutzerdefinierten Steuerelemente erstellen. Lesen Sie weiter, um ein Beispiel dafür zu sehen, wie es geht.
- ‚tshp_cbp_remove_sections‘, ‚tshp_cbp_remove_controls‘ und ‚tshp_cbp_remove_settings‘ – Filter-Hooks, die in der Customizer.php definiert sind. Sie können ihnen Arrays von integrierten Abschnitts-IDs (oder Steuer-IDs oder Einstellungs-IDs) übergeben, um einige der integrierten Abschnitte, Steuerelemente oder Einstellungen zu entfernen.
Hinweis: Wir sind zwar bei der Erweiterbarkeit und erstellen Ihre eigenen Hooks, damit andere Entwickler sie zum Erweitern Ihres Codes verwenden können, aber es ist unmöglich zu betonen, wie wichtig dies ist. Schließlich funktioniert WordPress (core) so. Und ich konnte Pippin nicht danken und seine Artikel genug, um mir diese Idee in den Kopf zu bekommen.
Benutzerdefinierte Steuerelemente
Die aktualisierte Version von Theme Customizer (die Sie gerade ausgecheckt haben, oder?) verfügt über ein paar weitere Steuerelemente, die Sie verwenden können – Textbereichsfeld, HTML5-Zahlenfeld und Bilderfeld, das im Grunde eine schicke Version von Optionsfeldern ist.
Diese benutzerdefinierten Steuerelemente sind in custom-controls.php definiert, ich werde sie hier nicht alle durchgehen, aber werfen wir einen Blick auf eines (HTML5-Zahlenfeld), um zu sehen, wie alles funktioniert:
/**
* Creates Customizer control for input[type=number] field
*
* @since Theme_Customizer_Boilerplate 1.0
*/
class CBP_Customizer_Number_Control extends WP_Customize_Control {
public $type = 'number';
public function render_content() {
echo '<label>
<span class="customize-control-title">'. esc_html( $this->label ) .'</span>
<input type="number" '. $this->link() .' value="'. intval( $this->value() ) .'" />
</label>';
}
}
Wie Sie sehen, müssen Sie nur das neue Steuerelement $type und seine render_content-Funktion definieren, die das Steuerelement im Bildschirm des Theme-Anpassers ausgibt.
Verwenden der integrierten benutzerdefinierten Steuerelemente von Customizer Boilerplate
Es ist dasselbe wie bei den einfachen Feldern, die im vorherigen Tutorial behandelt wurden, das einzige, was Sie beachten müssen, sind „Typen“, die Sie für jedes einzelne verwenden müssen:
- Zahlenfeld – ‚Nummer‘
- Textarea-Feld – ‚Textbereich‘
- Bilder, die als Optionsfelder fungieren – ‚images_radio‘, hier ist ein Beispiel für dieses Steuerelement in einem kommenden kostenlosen Cazuela-Thema:
Wenn Sie die Namen dieser neuen Steuerelementtypen kennen, ist es einfach, einen hinzuzufügen. So können Sie dem Array ein Zahlenfeld-Steuerelement hinzufügen, das alle Ihre Optionen enthält:
/*
* ============
* ============
* Number Field
* ============
* ============
*/
'new_number_field' => array(
'setting_args' => array(
'default' => '',
'type' => 'option',
'capability' => $thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array(
'label' => __( 'Number', 'my_theme_textdomain' ),
'type' => 'number', // Textarea control
'priority' => 8
)
)
Hinweis: Wenn Sie sich nicht sicher sind, wo Sie dies hinzufügen sollen, überprüfen Sie den Abschnitt „Verwenden des Options-Arrays zum Hinzufügen von Anpassungsabschnitten, Einstellungen und Steuerelementen“ in Teil 3 dieser Serie. Außerdem gibt es ein Beispiel für jedes der benutzerdefinierten Steuerelemente in der Datei options.php.
Hinzufügen eigener benutzerdefinierter Steuerelemente
Kommen wir zurück zum Aktions-Hook ‚thsp_cbp_custom_controls‘, den ich bereits erwähnt habe:
/**
* Action hook that allows you to create your own controls
*/
do_action( 'thsp_cbp_custom_controls' );
Es ist ein einfacher WordPress-Action-Hook, mit dem Sie Ihre eigenen benutzerdefinierten Steuerelemente hinzufügen können, ohne die Boilerplate-Dateien des Theme Customizers zu ändern. Warum sollten Sie es vermeiden, sie zu bearbeiten? Denn wenn Sie sich stattdessen in Boilerplate einklinken, können Sie jedes Mal, wenn jemand es aktualisiert, einfach die neueste Version holen, in Ihr Thema einfügen und die vorgenommenen Änderungen nicht verlieren. Denken Sie daran, WordPress-Kerndateien zu bearbeiten oder ein Plugin zu schreiben, ein Thema zu bearbeiten oder ein untergeordnetes Thema zu erstellen usw.
Wenn Sie jemals Ihre eigenen benutzerdefinierten Steuerelemente hinzufügen müssen, können Sie dies folgendermaßen tun:
function my_theme_add_customizer_boilerplate_control() {
/**
* Creates custom control to use with Theme Customizer Boilerplate
* Use a unique class prefix!
*
* @since Theme_Customizer_Boilerplate 1.0
*/
class CBP_Customizer_My_Control extends WP_Customize_Control {
public $type = 'my_type'; // Change this
public function render_content() {
// Control output goes here
}
}
}
add_action( 'thsp_cbp_custom_controls', 'my_theme_add_customizer_boilerplate_control' );
Stellen Sie sicher, dass Sie Ihrer benutzerdefinierten Steuerelementklasse etwas Einzigartiges voranstellen, damit ihr Name nicht mit einer anderen Klasse kollidiert. Ich habe ‚CBP_‘ (Customizer Boilerplate) verwendet — da Sie Boilerplate in einem Theme verwenden, macht der Name Ihres Themes viel Sinn und sollte für Sie gut funktionieren.
Theme-Customizer: Wie geht es weiter?
Jetzt, da die WordPress Theme Customizer Boilerplate durch Hooks erweiterbar ist, werfen wir einen Blick darauf, um „bedingte Theme-Optionen“ hinzuzufügen – solche, die nur erscheinen, wenn ein bestimmtes Plugin aktiv ist und Ihnen helfen, den Theme Customizer-Bildschirm übersichtlich zu halten.
Was halten Sie bisher von Customizer Boilerplate? Planen Sie, es in Ihren Themen zu verwenden? Irgendwelche Ideen, wie es verbessert werden könnte? Ihr Feedback ist jederzeit willkommen.