So erstellen Sie benutzerdefinierte Steuerelemente für den WordPress Theme Customizer
Veröffentlicht: 2015-06-17Die WordPress Theme Customizer-Funktion (auch als „Customizer“ bezeichnet) gibt Entwicklern die Möglichkeit, das Erscheinungsbild ihres Themes anzupassen und ihnen sogar dabei zu helfen, eine Vorschau der am Theme vorgenommenen Änderungen in Echtzeit anzuzeigen. In der heutigen Zeit, in der sich der Wettlauf, Kunden für eine Website zu gewinnen, verschärft, werden Sie häufig das Bedürfnis verspüren, das Design Ihrer Website anzupassen. Und dank des Design-Anpassers können Sie viel wertvolle Zeit sparen, indem Sie Änderungen an Ihrem WordPress-Design in einer Live-Vorschau anzeigen.
Der WordPress-Design-Anpasser wurde als Teil der Design-Anpassungs-API eingeführt (die in WordPress-Version 3.4 eingeführt wurde. Wenn Sie Änderungen an Ihren Design-Einstellungen vornehmen möchten, müssen Sie benutzerdefinierte Steuerelemente verwenden, die mit dem Design geliefert werden Customizer wie ein Kontrollkästchen, ein Textfeld, ein Radio usw. Aber was ist, wenn Sie Ihrem WordPress-Theme Ihre eigenen benutzerdefinierten Steuerelemente hinzufügen möchten?
Damit Sie verstehen, wie Sie Steuerelemente erstellen und hinzufügen können, die auf Ihre spezifischen Anforderungen zugeschnitten sind, zeigen wir Ihnen, wie Sie drei benutzerdefinierte Steuerelemente erstellen, um einige Änderungen an der Fußzeile unseres Designs vorzunehmen. Um mit dem Prozess zu beginnen, müssen Sie sich jedoch zunächst mit der Klasse WP_Customizer_Control vertraut machen.
Kennenlernen der Klasse „WP_Customizer_Control“.
Um ein benutzerdefiniertes Steuerelement zu generieren, müssen Sie eine neue Klasse erstellen und diese mithilfe der Klasse WP_Customizer_Control erweitern. Diese Klasse verwendet die Methode „$wp_customize->add_control()“, um Ihr eigenes benutzerdefiniertes Steuerelement zum Anpassungsbildschirm Ihres WordPress-Site-Designs hinzuzufügen. Um auf diese Methode zuzugreifen, müssen Sie außerdem das $wp_customize-Objekt verwenden, das im Aktions-Hook verfügbar ist: customize_register.
Betrachten wir ein Beispiel, das veranschaulicht, wie Sie wie folgt ein vorhandenes benutzerdefiniertes Steuerelement zu Ihrem Designabschnitt (im Aktionshaken „customize_register“) hinzufügen können:
$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );$wp_customize->add_control( new WP_Customize_Header_Image_ Control( $wp_customize, 'header_image', array( 'label' => __( 'Header image', 'mynewtheme' ), 'section' => 'header_image_settings', 'settings' => 'header_image_position', ) ) );
Im obigen Beispiel erstellen wir ein Steuerelement, das Benutzern die Möglichkeit gibt, ein neues Kopfzeilenbild auszuwählen.
Beispiele zur Veranschaulichung: Wie erstellt man mehr benutzerdefinierte Steuerelemente?
Dieser Abschnitt ist in drei verschiedene Schritte unterteilt, wobei jeder Schritt Code enthält, der ein benutzerdefiniertes Steuerelement für den Textbereich für Ihren Design-Anpasser generiert. Wir fügen den Code in die footer.php-Datei des WordPress-Themes ein, um Änderungen an der Fußzeile über die neuen Textbereichssteuerelemente vorzunehmen.
Schritt 1: Erstellen eines einfachen Textbereichssteuerelements
Wie wir oben besprochen haben, müssen wir zum Erstellen eines neuen benutzerdefinierten Steuerelements eine Klasse definieren, die zum Erweitern der Klasse WP_Customize_Control verwendet wird. Im Wesentlichen wird diese Klasse zusammen mit der WordPress Theme Customization API verwendet, um ein Eingabesteuerelement (dh ein benutzerdefiniertes Steuerelement) auf dem Theme-Anpassungsbildschirm hinzuzufügen. Schauen wir uns den Code an, um diese Aufgabe zu implementieren:
/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));/*Customizer Code HERE*/ add_action('customize_ register', 'theme_footer_customizer'); function theme_footer_customizer($wp_ customize){ //adding section in wordpress customizer $wp_customize->add_section(' footer_settings_section', array( 'title' => 'Footer Text Section' )); //adding setting for footer text area $wp_customize->add_setting(' text_setting', array( 'default' => 'Default Text For Footer Section', )); $wp_customize->add_control(' text_setting', array( 'label' => 'Footer Text Here', 'section' => 'footer_settings_section', 'type' => 'textarea', ));
In diesem Code wird der Aktions-Hook customer_register verwendet, um WordPress über die benutzerdefinierte Funktion zu informieren, die wir mit dem Namen „theme_footer_customizer“ erstellt haben. Wie Sie vielleicht wissen, hilft die Klasse WP_Customize_Manager bei der Steuerung des WordPress Theme Customizer, und daher wird das benutzerdefinierte Steuerelement Teil dieser Klasse. Um jedoch auf Ihr Steuerelement zuzugreifen, müssen Sie das „wp_customize“-Objekt verwenden, das eine Instanz des customize_register-Hooks ist.
In unserem Fall wird das Objekt wp_customize verwendet, um einen neuen Fußzeilenabschnitt zu definieren, der in den Textbereich eingefügt wird. Was auch immer Sie also in den Fußzeilenabschnitt „Textbereich“ eingeben, wird in der Fußzeile Ihres Themas angezeigt, wie im folgenden Screenshot gezeigt:
In diesem Screenshot können Sie sehen, dass Ihrem Design ein neuer Abschnitt „Fußzeilentext“ hinzugefügt wurde. Der in diesem Abschnitt geschriebene Text wird in der Fußzeile Ihres Themas angezeigt.
Schritt 2: Hinzufügen eines benutzerdefinierten Steuerelements zum Ändern der Hintergrundfarbe
Nachdem wir nun ein Textbereichssteuerelement erstellt haben, können Sie ihm viele verschiedene benutzerdefinierte Steuerelemente hinzufügen. In diesem Beispiel fügen wir unserem neuen Fußzeilen-Textabschnitt ein benutzerdefiniertes Steuerelement hinzu, das beim Ändern der Hintergrundfarbe der Fußzeile hilft. Fügen Sie dazu einfach das folgende Code-Snippet in die Datei footer.php Ihres Themes ein:
//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));//adding setting for background $wp_customize->add_setting(' background_color', array( 'default' => '#ffffff', ) ); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array( 'label' => 'Footer Color Setting', 'section' => 'footer_settings_section', 'settings' => 'background_color', )));
Wie Sie im obigen Screenshot sehen können, hat sich die Hintergrundfarbe der Fußzeile durch Auswahl einer geeigneten Farbe aus der „Fußzeilen-Farbeinstellung“ in Grau geändert.
Schritt 3: Hinzufügen eines benutzerdefinierten Steuerelements zum Hinzufügen eines Logos
Ein weiteres Steuerelement, das wir dem Fußzeilen-Textabschnitt hinzufügen, ist „Fußzeilen-Logo“. Wie der Name schon sagt, hilft das Steuerelement „Fußzeilenlogo“ beim Hinzufügen eines Logos zur Fußzeile. Um dieses Steuerelement hinzuzufügen, müssen Sie das folgende Code-Snippet in die Datei footer.php einfügen:
//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }//adding setting for footer logo $wp_customize->add_setting(' footer_logo'); $wp_customize->add_control(new WP_Customize_Upload_Control($ wp_customize,'footer_logo', array( 'label' => __('Footer Logo', 'mytheme'), 'section' => 'footer_settings_section', 'settings' => 'footer_logo', ))); }
Machen wir Schluss!
Möglicherweise finden Sie das Erstellen benutzerdefinierter Steuerelemente etwas zeitaufwändig. Sie können jedoch die Tatsache nicht vernachlässigen, dass je besser die Steuerelemente, die Sie Ihrem Website-Design-Anpassungsbildschirm hinzufügen, desto mehr Zeit Ihrer Benutzer gespart werden kann, was zu einer verbesserten Benutzererfahrung führt. Wenn Sie also vorhaben, selbst einige benutzerdefinierte Steuerelemente zu erstellen, die dem WordPress-Design-Anpasser hinzugefügt werden sollen, dann wird sich dieser Beitrag als einfallsreicher Leitfaden für Sie erweisen.
