Inhaltsverzeichnis
Möchten Sie Ihre eigenen benutzerdefinierten Widgets in WordPress erstellen? Mit Widgets können Sie Elemente, die nicht zum Inhalt gehören, in eine Seitenleiste oder einen anderen widgetfähigen Bereich Ihrer Website einfügen.
Sie können Widgets verwenden, um Banner, Werbung, Newsletter-Anmeldeformulare und andere Elemente zu Ihrer Website hinzuzufügen.
In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie ein benutzerdefiniertes WordPress-Widget erstellen können.
Anmerkung: Dieses Tutorial ist für DIY-WordPress-Benutzer, die WordPress-Entwicklung und -Codierung lernen.
Was ist ein WordPress-Widget?
WordPress-Widgets enthalten Codestücke, die Sie in die Seitenleisten oder widgetfähigen Bereiche Ihrer Website einfügen können.
Betrachten Sie sie als Module, mit denen Sie verschiedene Elemente und Funktionen zu Ihrer Website hinzufügen können.
WordPress wird standardmäßig mit einer Reihe von Widgets ausgeliefert, die Sie mit jedem WordPress-Theme verwenden können. Weitere Einzelheiten finden Sie in unserem Leitfaden für Einsteiger zum Hinzufügen und Verwenden von Widgets in WordPress.
WordPress ermöglicht es Entwicklern auch, ihre eigenen benutzerdefinierten Widgets zu erstellen.
Viele Premium-WordPress-Themes und -Plugins werden mit ihren eigenen benutzerdefinierten Widgets geliefert, die Sie Ihren Seitenleisten hinzufügen können.
Sie können zum Beispiel ein Kontaktformular, ein benutzerdefiniertes Anmeldeformular, eine Fotogalerie, ein E-Mail-Listen-Anmeldeformular und vieles mehr in eine Seitenleiste einfügen, ohne Code zu schreiben.
Sehen wir uns nun an, wie Sie ganz einfach Ihre eigenen benutzerdefinierten Widgets in WordPress erstellen können.
Bevor Sie ein benutzerdefiniertes Widget in WordPress erstellen
Wenn Sie das Programmieren von WordPress erlernen, benötigen Sie eine lokale Entwicklungsumgebung, in der Sie lernen und testen können, ohne dass Sie sich Sorgen machen müssen, dass Ihre Website live ist.
Sie können WordPress lokal auf dem Mac mit MAMP oder unter Windows mit WAMP installieren.
Wenn Sie bereits eine Live-Site haben, können Sie sie auf einen lokalen Host verschieben. Weitere Einzelheiten finden Sie in unserer Anleitung zum Verschieben einer Live-WordPress-Site auf einen lokalen Server.
Danach gibt es mehrere Möglichkeiten, Ihren benutzerdefinierten Widget-Code in WordPress hinzuzufügen.
Idealerweise erstellen Sie ein Site-spezifisches Plugin und fügen den Code Ihres Widgets dort ein. So können Sie WordPress Code hinzufügen, der nicht von Ihrem WordPress-Theme abhängig ist.
Sie können den Code auch in die Datei functions.php Ihres Themes einfügen, dann ist er jedoch nur verfügbar, wenn das betreffende Theme aktiv ist.
Ein weiteres Tool, das Sie verwenden können, ist das Code Snippets-Plugin, mit dem Sie auf einfache Weise benutzerdefinierten Code zu Ihrer WordPress-Website hinzufügen können.
In diesem Tutorial werden wir ein einfaches Widget erstellen, das Besucher einfach nur begrüßt. Ziel ist es, sich mit der WordPress-Widget-Klasse vertraut zu machen.
Bereit? Dann fangen wir an.
Erstellen eines einfachen WordPress-Widgets
WordPress verfügt über eine integrierte WordPress-Widget-Klasse, die von jedem neuen WordPress-Widget erweitert wird.
Im WordPress-Entwicklerhandbuch sind 18 Methoden aufgeführt, die mit der WP Widget-Klasse verwendet werden können.
Im Rahmen dieses Tutorials werden wir uns jedoch auf die folgenden Methoden konzentrieren.
- __construct() : Dies ist der Teil, in dem wir die Widget-ID, den Titel und die Beschreibung erstellen.
- widget : Hier wird die vom Widget erzeugte Ausgabe definiert.
- form : In diesem Teil des Codes wird das Formular mit den Widget-Optionen für das Backend erstellt.
- update: Dies ist der Teil, in dem wir die Widget-Optionen in der Datenbank speichern.
Schauen wir uns den folgenden Code an, in dem wir diese vier Methoden innerhalb der Klasse WP_Widget verwendet haben.
// Erstellen des Widgets class wpb_widget extends WP_Widget { // Der Konstruktionsteil function __construct() { } // Erstellen des Widget-Frontends public function widget( $args, $instance ) { } // Erstellen des Widget-Backends public function form( $instance ) { } // Aktualisieren des Widgets, wobei alte Instanzen durch neue ersetzt werden public function update( $new_instance, $old_instance ) { } // Klasse wpb_widget endet hier } Veranstaltet mit ❤️ von WPCode 1-Klick-Verwendung in WordPress Der letzte Teil des Codes besteht darin, das Widget zu registrieren und in WordPress zu laden.
function wpb_load_widget() { register_widget( 'wpb_widget' ); } add_action( 'widgets_init', 'wpb_load_widget' ); Veranstaltet mit ❤️ von WPCode 1-Klick-Verwendung in WordPress Lassen Sie uns nun all dies zusammenfügen, um ein einfaches WordPress-Widget zu erstellen.
Sie können den folgenden Codeschnipsel kopieren und in Ihre functions.php-Datei, in ein Site-spezifisches Plugin oder mit Hilfe eines Code-Snippets-Plugins einfügen.
// Erstellen der Widget-Klasse wpb_widget extends WP_Widget { function __construct() { parent::__construct( // Basis-ID des Widgets 'wpb_widget', // Widget-Name erscheint im UI __(' Widget', 'wpb_widget_domain'), // Widget-Beschreibung array( 'description' => __( 'Beispiel-Widget basierend auf Tutorial', 'wpb_widget_domain' ), ) ); } // Erstellen des Widget-Frontends public function widget( $args,$instance ) { $title = apply_filters( 'widget_title', $instance['title'] ); // Argumente vor und nach dem Widget werden von Themes definiert echo $args['before_widget']; if ( ! empty( $title ) ) echo $args['before_title'] . $title . $args['after_title']; // Hier wird der Code ausgeführt und die Ausgabe angezeigt echo __( 'Hello, World!', 'wpb_widget_domain' ); echo $args['after_widget']; } // WidgetBackend public function form( $instance ) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } else { $title = __( 'New title', 'wpb_widget_domain' ); } // Widget-Admin-Formular ?> php } // Aktualisierung des Widgets, wobei alte Instanzen durch neue ersetzt werden public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; return $instance; } // Klasse wpb_widget endet hier } // Registrieren und Laden des Widgets function wpb_load_widget() { register_widget( 'wpb_widget' ); } add_action('widgets_init', 'wpb_load_widget' ); </pre Veranstaltet mit ❤️ von WPCode 1-Klick-Verwendung in WordPress Nachdem Sie den Code zu WordPress hinzugefügt haben, müssen Sie in der Erscheinungsbild " Widgets Seite in Ihrem WordPress-Administrationsbereich.
Klicken Sie dann auf das Plus-Symbol zum Hinzufügen von Blöcken, suchen Sie nach "Widget" und wählen Sie das neue Widget aus.
Dieses Widget hat nur ein Formularfeld, das ausgefüllt werden muss.
Sie können Ihren Text hinzufügen und auf die Schaltfläche "Aktualisieren" klicken, um Ihre Änderungen zu speichern.
Jetzt können Sie Ihre WordPress-Website besuchen, um das benutzerdefinierte Widget in Aktion zu sehen.
Hinzufügen eines benutzerdefinierten Widgets im klassischen WordPress-Editor
Wenn Sie den klassischen Widget-Editor verwenden, um neue Widgets zu Ihrer Website hinzuzufügen, ist der Vorgang ähnlich.
In der Liste der verfügbaren Widgets wird ein neues Widget mit der Bezeichnung "Widget" angezeigt, das Sie per Drag & Drop in Ihre Seitenleiste ziehen müssen.
Geben Sie dann einen Titel ein und klicken Sie auf "Speichern", um Ihre Widget-Einstellungen zu speichern.
Ihr neues benutzerdefiniertes Widget wird nun auf Ihrer Website angezeigt.
Schauen wir uns nun den Code noch einmal an.
Zuerst haben wir das 'wpb_widget' registriert und unser benutzerdefiniertes Widget geladen. Danach haben wir definiert, was dieses Widget tut und wie das Widget im Backend angezeigt werden soll.
Schließlich haben wir festgelegt, wie Änderungen am Widget behandelt werden sollen.
Es gibt einige Fragen, die Sie sich stellen sollten, z. B.: Was ist der Zweck von wpb_text_domain ?
WordPress verwendet "gettext" für die Übersetzung und Lokalisierung. wpb_text_domain und __e weist 'gettext' an, eine Zeichenkette für die Übersetzung verfügbar zu machen. Weitere Informationen finden Sie in unserem Leitfaden, wie Sie übersetzungsfähige WordPress-Themes finden können.
Wenn Sie ein benutzerdefiniertes Widget für Ihr Thema erstellen, können Sie die wpb_text_domain mit der Textdomäne Ihres Themas.
Alternativ können Sie auch ein WordPress-Übersetzungs-Plugin verwenden, um WordPress einfach zu übersetzen und eine mehrsprachige WordPress-Website zu erstellen.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie ganz einfach ein benutzerdefiniertes WordPress-Widget erstellen können. Vielleicht interessieren Sie sich auch für unseren Leitfaden über den Unterschied zwischen einem Domainnamen und Webhosting und unsere Expertenauswahl über das beste kostenlose Website-Hosting im Vergleich.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
