Erweitern des WordPress Theme Customizer Boilerplate

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

In Teil 3 der Theme Customizer-Reihe wurde Ihnen das Theme Customizer Boilerplate vorgestellt, mit dem Sie den Code für Ihre Theme-Optionen vereinfachen können. Alles, was Sie tun müssen, ist eine Reihe von Optionsfeldern zu übergeben, und das Boilerplate sorgt dafür, dass die Abschnitte, Einstellungen und Steuerelemente des Theme Customizer hinter den Kulissen für Sie registriert werden.


Bisher konnten Sie in Boilerplate Textfelder, Kontrollkästchen, Optionsfelder und Auswahlfelder im Theme Customizer verwenden. In diesem Artikel erfahren Sie, wie Sie es erweitern können.

Hinweis: Bevor Sie fortfahren, laden Sie bitte die neueste Version des WordPress Theme Customizer Boilerplate aus dem Github-Repository herunter. Ich habe seit dem letzten Tutorial einige Verbesserungen daran vorgenommen. Es ist wichtig, dass Ihr Code auf dem neuesten Stand ist. Weitere Hinweise zu Änderungen finden Sie im vorherigen Beitrag. Kurz gesagt, sobald Sie das Boilerplate in Ihren Themenordner kopiert haben, müssen Sie seine Dateien überhaupt nicht mehr bearbeiten. Die gesamte Bearbeitung erfolgt mithilfe von Filter- und Aktions-Hooks.

Einhängen in Theme Customizer Boilerplate

Es gibt verschiedene Aktions- und Filter-Hooks im WordPress Theme Customizer Boilerplate. Sie können eine beliebige Datei aus der Datei functions.php Ihres Themas mit verwenden add_action und add_filter Funktionen:

  • ‘Thsp_cbp_directory_uri’ – Mit dem in helpers.php definierten Filter-Hook können Sie den Speicherort von Customizer Boilerplate in Ihrem Themenordner ändern. Standardmäßig sieht der Pfad der Boilerplate folgendermaßen aus: get_template_directory_uri (). ‘/ Customizer-boilerplate’ – Wenn Sie es jedoch lieber an einen benutzerdefinierten Ort verschieben möchten, ist dies der Haken, der Ihnen helfen kann.
  • ‘Thsp_cbp_menu_link_text’ – Mit dem in helpers.php definierten Filter-Hook können Sie den Menütext-Link ändern. Boilerplate fügt einen Link unter Darstellung im WordPress-Dashboard hinzu, über den Benutzer problemlos auf Theme Customizer zugreifen können. Standardmäßig wird auf diesem Link “Theme Customizer” angezeigt, und Sie können den Text mithilfe des Filter-Hooks “thsp_cbp_menu_link_text” ändern.
  • ‘Thsp_cbp_capability’ – Filterhaken in helpers.php definiert. Ermöglicht das Ändern der standardmäßig erforderlichen Funktionen, die in der Methode $ wp_customize-> add_setting verwendet werden.
  • ‘Thsp_cbp_option’ – Filterhaken in helpers.php definiert. Wenn Sie in Ihren Einstellungsargumenten “Option” verwenden, ändern Sie mit diesem Hook den Namen des Eintrags, unter dem Ihre Designeinstellungswerte in der Tabelle “wp_options” gespeichert werden. Der Standardwert ist “thsp_cbp_theme_options”. Stellen Sie sicher, dass Sie sich in diesen einbinden und diesen in etwas ändern, das Ihren Themennamen enthält.
  • ‘Thsp_cbp_options_array’ – Wenn Sie den in options.php definierten Filter-Hook verwenden, MÜSSEN Sie ihn einbinden und das Standard-Optionsarray (mit Beispieloptionen) durch Optionen ersetzen, die in Ihrem Design verwendet werden. Ich werde das wiederholen, es fett und unterstreichen: Y.Sie MÜSSEN sich daran anschließen und das Standard-Optionsarray durch Optionen ersetzen, die in Ihrem Design verwendet werden.
  • ‘Thsp_cbp_custom_controls’ – In custom-controls.php definierter Aktions-Hook. Wenn Sie ihn einbinden, können Sie Ihre eigenen benutzerdefinierten Steuerelemente erstellen. Lesen Sie weiter, um ein Beispiel dafür zu sehen.
  • ‘Tshp_cbp_remove_sections’‘Tshp_cbp_remove_controls’ und ‘Tshp_cbp_remove_settings’ – In der Datei customizer.php definierte Filter-Hooks. Sie können ihnen Arrays von integrierten Abschnitts-IDs (oder Steuerelement-IDs oder Einstellungs-IDs) übergeben, um einige der integrierten Abschnitte, Steuerelemente oder Einstellungen zu entfernen.

Hinweis: Wir sind zwar in der Erweiterbarkeit und erstellen Ihre eigenen Hooks, damit andere Entwickler sie zum Erweitern Ihres Codes verwenden können. Es ist jedoch unmöglich zu übertreiben, wie wichtig dies ist. Schließlich funktioniert WordPress (Core) so. Und ich konnte es nicht danken Pippin und seine Artikel genug, um diese Idee in meinen Kopf zu bekommen.

Benutzerdefinierte Steuerelemente

Die aktualisierte Version von Theme Customizer (die Sie gerade ausgecheckt haben, oder?) Enthält einige weitere Steuerelemente, die Sie verwenden können – Textfeld, HTML5-Nummernfeld und Bildfeld, bei denen es sich im Grunde um eine ausgefallene Version von Optionsfeldern handelt.

Diese benutzerdefinierten Steuerelemente sind in custom-controls.php definiert. Ich werde hier nicht alle durchgehen, aber schauen wir uns eines an (HTML5-Nummernfeld), um zu sehen, wie alles funktioniert:

/ **
* Erstellt ein Customizer-Steuerelement für das Eingabefeld [Typ = Nummer]
* *
* @since Theme_Customizer_Boilerplate 1.0
* /
Klasse CBP_Customizer_Number_Control erweitert WP_Customize_Control {

public $ type = 'number';

öffentliche Funktion render_content () {
Echo '';
}}

}}

Wie Sie sehen, müssen Sie lediglich den neuen Steuerelementtyp $ und seine Funktion render_content definieren, die das Steuerelement im Bildschirm “Theme Customizer” ausgibt.

Verwenden der integrierten benutzerdefinierten Steuerelemente von Customizer Boilerplate

Dies entspricht den einfachen Feldern, die im vorherigen Lernprogramm behandelt wurden. Das einzige, was Sie beachten müssen, sind die Typen, die Sie für jedes Feld verwenden müssen:

  • Zahlenfeld – ‘Nummer’
  • Textfeld – ‘Textarea’
  • Bilder, die als Optionsfelder dienen – ‘Images_radio’, Hier ist ein Beispiel für dieses Steuerelement in einem kommenden kostenlosen Cazuela-Thema::

Theme Customizer Boilerplate

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:

/ *
* ============
* ============
* Nummernfeld
* ============
* ============
* /
'new_number_field' => array (
'settings_args' => array (
'default' => '',
'Typ' => 'Option',
'Capability' => $ thsp_cbp_capability,
'transport' => 'refresh',
),
'control_args' => array (
'label' => __ ('Number', 'my_theme_textdomain'),
'type' => 'number', // Textbereichssteuerung
'Priorität' => 8
)
)

Hinweis: Wenn Sie nicht sicher sind, wo Sie dies hinzufügen sollen, lesen Sie den Abschnitt “Verwenden des Optionsarrays zum Hinzufügen von Customizer-Abschnitten, -Einstellungen und -Steuerelementen” in Teil 3 dieser Serie. Außerdem gibt es in der Datei options.php ein Beispiel für jedes benutzerdefinierte Steuerelement.

Hinzufügen eigener benutzerdefinierter Steuerelemente

Kehren wir zum zuvor erwähnten Aktions-Hook “thsp_cbp_custom_controls” zurück:

/ **
* Aktions-Hook, mit dem Sie Ihre eigenen Steuerelemente erstellen können
* /
do_action ('thsp_cbp_custom_controls');

Es ist ein einfacher WordPress-Aktions-Hook, mit dem Sie Ihre eigenen benutzerdefinierten Steuerelemente hinzufügen können, ohne die Boilerplate-Dateien des Theme Customizer zu ändern. Warum sollten Sie es vermeiden, sie zu bearbeiten? Denn wenn Sie sich stattdessen an Boilerplate anschließen, können Sie bei jeder Aktualisierung einfach die neueste Version herunterladen, sie in Ihr Thema einfügen und die von Ihnen 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:

Funktion my_theme_add_customizer_boilerplate_control () {
/ **
* Erstellt ein benutzerdefiniertes Steuerelement zur Verwendung mit Theme Customizer Boilerplate
* Verwenden Sie ein eindeutiges Klassenpräfix!
* *
* @since Theme_Customizer_Boilerplate 1.0
* /
Klasse CBP_Customizer_My_Control erweitert WP_Customize_Control {

public $ type = 'my_type'; // Ändere das

öffentliche Funktion render_content () {
// Steuerausgabe geht hier
}}

}}
}}
add_action ('thsp_cbp_custom_controls', 'my_theme_add_customizer_boilerplate_control');

Stellen Sie sicher, dass Sie Ihrer benutzerdefinierten Steuerelementklasse etwas Einzigartiges voranstellen, damit der Name nicht mit einer anderen Klasse in Konflikt gerät. Ich habe “CBP_” (Customizer Boilerplate) verwendet. Da Sie Boilerplate in einem Thema verwenden, ist der Name Ihres Themas sehr sinnvoll und sollte für Sie gut funktionieren.

Theme Customizer: Wie geht es weiter??

Nachdem das WordPress Theme Customizer Boilerplate durch Hooks erweiterbar ist, werden wir uns ansehen, um “bedingte Designoptionen” hinzuzufügen – solche, die nur angezeigt werden, wenn ein bestimmtes Plugin aktiv ist, und Ihnen dabei helfen, den Theme Customizer-Bildschirm übersichtlich zu halten.

Was denken Sie bisher über Customizer Boilerplate? Planen Sie, es in Ihren Themen zu verwenden? Irgendwelche Ideen, wie es verbessert werden könnte? Ihr Feedback ist immer willkommen.

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