Wie man ein benutzerdefiniertes WordPress-Widget erstellt (Schritt für Schritt)

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 in Ihre Website einzufügen.

In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie ein benutzerdefiniertes WordPress-Widget erstellen können.

Hinweis: Dieses Tutorial richtet sich an WordPress-Benutzer, die die Entwicklung und Programmierung von WordPress erlernen möchten.

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 geliefert, 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.

So können Sie beispielsweise ein Kontaktformular, ein benutzerdefiniertes Anmeldeformular, eine Fotogalerie, ein Anmeldeformular für eine E-Mail-Liste und vieles mehr in eine Seitenleiste einfügen, ohne Code schreiben zu müssen.

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 lernen, WordPress zu programmieren, brauchen Sie eine lokale Entwicklungsumgebung. Dies gibt Ihnen die Freiheit, Dinge zu lernen und zu testen, 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 dort Ihren Widget-Code 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. Er ist jedoch nur verfügbar, wenn das jeweilige Theme aktiv ist.

Ein weiteres Tool, das Sie verwenden können, ist das WPCode-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 die Besucher einfach begrüßt. Das Ziel ist es, sich mit der WordPress-Widget-Klasse vertraut zu machen.

Sind Sie bereit? Dann fangen wir an.

Erstellen eines einfachen WordPress-Widgets

WordPress verfügt über eine integrierte WordPress-Widget-Klasse. Jedes neue WordPress-Widget erweitert die WordPress-Widget-Klasse.

Im WordPress-Entwicklerhandbuch sind 19 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 Widget-Optionen für das Backend erstellt.
• update: Dies ist der Teil, in dem wir die Widget-Optionen in der Datenbank speichern.

Um ein benutzerdefiniertes Widget zu erstellen, können Sie den folgenden Codeschnipsel kopieren und in Ihre functions.php-Datei oder in ein Site-spezifisches Plugin einfügen.

<?php

// Creating the widget
class wpb_widget extends WP_Widget {
	function __construct() {
		parent::__construct(
		// Base ID of your widget
			'wpb_widget',

			// Widget name will appear in UI
			__( 'WPBeginner Widget', 'textdomain' ),

			// Widget description
			[
				'description' => __( 'Sample widget based on WPBeginner Tutorial', 'textdomain' ),
			]
		);
	}

	// Creating widget front-end
	public function widget( $args, $instance ) {
		$title = apply_filters( 'widget_title', $instance['title'] );

		// before and after widget arguments are defined by themes
		echo $args['before_widget'];
		if ( ! empty( $title ) ) {
			echo $args['before_title'] . $title . $args['after_title'];
		}

		// This is where you run the code and display the output
		echo __( 'Hello, World!', 'textdomain' );
		echo $args['after_widget'];
	}

	// Widget Settings Form
	public function form( $instance ) {
		if ( isset( $instance['title'] ) ) {
			$title = $instance['title'];
		} else {
			$title = __( 'New title', 'textdomain' );
		}

		// Widget admin form
		?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>">
				<?php _e( 'Title:', 'textdomain' ); ?>
            </label>
            <input
                    class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>"
                    name="<?php echo $this->get_field_name( 'title' ); ?>"
                    type="text"
                    value="<?php echo esc_attr( $title ); ?>"
            />
        </p>
		<?php
	}

	// Updating widget replacing old instances with new
	public function update( $new_instance, $old_instance ) {
		$instance          = array();
		$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

		return $instance;
	}

	// Class wpb_widget ends here
}

// Register and load the widget
function wpb_load_widget() {
	register_widget( 'wpb_widget' );
}

add_action( 'widgets_init', 'wpb_load_widget' );

Eine einfachere Möglichkeit, benutzerdefinierten Code zu Ihrer WordPress-Website hinzuzufügen, ist die Verwendung von WPCode. Es ist das beste Code-Snippet-Plugin, das Ihnen hilft, Code-Snippets auf Ihrer Website zu verwalten und einzufügen, ohne dass Sie Gefahr laufen, etwas kaputt zu machen.

Zunächst müssen Sie das WPCode-Plugin auf Ihrer Website installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie im WordPress-Administrationsbereich zu Code Snippets “ + Snippet hinzufügen gehen. Wählen Sie hier die Option „Eigenen Code hinzufügen (neues Snippet)“.

Danach können Sie den benutzerdefinierten Widget-Code in den Code-Vorschaubereich einfügen.

Sie müssen auch auf das Dropdown-Menü „Code-Typ“ klicken und die Option „PHP Snippet“ auswählen.

Anschließend können Sie nach unten blättern und die Einfügemethode für Ihren Code auswählen.

Mit WPCode können Sie wählen, wo der Code ausgeführt werden soll. Für dieses Lernprogramm können Sie die Standardoptionen verwenden und den Code überall ausführen.

Wenn das erledigt ist, können Sie zurück nach oben scrollen, um den Ausschnitt zu speichern.

Um das Snippet zu aktivieren, klicken Sie einfach auf die Umschalttaste Aktiv.

Weitere Informationen finden Sie in unserer Anleitung zum Hinzufügen von benutzerdefiniertem Code zu einer WordPress-Website.

Nachdem Sie den Code zu WordPress hinzugefügt haben, müssen Sie die Seite Erscheinungsbild “ Widgets in Ihrem WordPress-Admin-Panel aufrufen.

Klicken Sie dann auf das Plus-Symbol zum Hinzufügen von Blöcken, suchen Sie nach „WPBeginner 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.

Es wird ein neues Widget mit dem Namen „WPBeginner Widget“ in der Liste der verfügbaren Widgets erscheinen. Sie müssen dieses Widget in Ihre Seitenleiste ziehen und ablegen.

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.

Zunächst haben wir das „wpb_widget“ registriert und unser benutzerdefiniertes Widget geladen. Danach haben wir definiert, was dieses Widget tut und wie das Backend des Widgets angezeigt werden soll.

Schließlich haben wir festgelegt, wie Änderungen am Widget behandelt werden sollen.

Nun gibt es einige Fragen, die Sie sich vielleicht stellen möchten. Zum Beispiel, was ist der Zweck von textdomain?

WordPress verwendet „gettext“ für die Übersetzung und Lokalisierung. Diese Textdomäne und _e weisen „gettext“ an, eine Zeichenfolge für die Übersetzung bereitzustellen. 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 textdomain durch die Textdomain Ihres Themas ersetzen.

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 für 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.