So erstellen Sie ein benutzerdefiniertes WordPress-Widget (Schritt für Schritt)

Widgets ermöglichen es Ihnen, Nicht-Inhaltselemente in eine Seitenleiste oder einen beliebigen Widget-fähigen Bereich Ihrer WordPress-Website einzufügen. Sie können sie verwenden, um Banner, Anzeigen, Newsletter-Anmeldeformulare und andere Elemente zu Ihrer Website hinzuzufügen.

Sie können auch ein benutzerdefiniertes Widget erstellen, um einzigartige Funktionen mit einer persönlichen Note einzubetten, wie z. B. Social-Media-Feeds, aktuelle Beiträge oder HTML-Tags.

Bei WPBeginner verwenden wir benutzerdefinierte Widgets, um verschiedene Arten von Inhalten in unserer Website-Seitenleiste anzuzeigen. Und in diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie ein benutzerdefiniertes WordPress-Widget erstellen.

Hinweis: Dieses Tutorial richtet sich an DIY-WordPress-Benutzer, die WordPress-Entwicklung und Programmierung lernen.

Was ist ein WordPress-Widget?

WordPress-Widgets enthalten Code-Schnipsel, die Sie zu den Seitenleisten oder Widget-Bereichen Ihrer Website hinzufügen können.

Stellen Sie sich diese als Module vor, mit denen Sie Ihrer Website verschiedene Elemente und Funktionen hinzufügen können.

Standardmäßig verfügt WordPress über eine Reihe von Widgets, die Sie mit jedem WordPress-Theme verwenden können. Weitere Details finden Sie in unserem Leitfaden für Anfänger, wie Sie Widgets in WordPress hinzufügen und verwenden.

WordPress erlaubt es Entwicklern auch, ihre eigenen benutzerdefinierten Widgets zu erstellen.

Viele Premium WordPress-Themes und Plugins werden mit eigenen benutzerdefinierten Widgets geliefert, die Sie zu Ihren Seitenleisten hinzufügen können.

Zum Beispiel können Sie ein Kontaktformular, ein benutzerdefiniertes Anmeldeformular, eine Fotogalerie, ein E-Mail-Listen-Anmeldeformular und mehr zu einer Seitenleiste hinzufügen, ohne Code schreiben zu müssen.

Lassen Sie uns nun sehen, wie Sie ganz einfach Ihre eigenen benutzerdefinierten Widgets in WordPress erstellen können.

Bevor Sie ein benutzerdefiniertes Widget in WordPress erstellen

Wenn Sie WordPress-Programmierung lernen, benötigen Sie eine lokale Entwicklungsumgebung. Dies gibt Ihnen die Freiheit, Dinge zu lernen und zu testen, ohne sich Sorgen machen zu müssen, dass Ihre Website live ist.

Sie können WordPress lokal auf einem Mac mit MAMP oder einem Windows-Computer mit WAMP installieren.

Wenn Sie bereits eine Live-Website haben, können Sie diese auf einen lokalen Host verschieben. Weitere Details finden Sie in unserem Leitfaden unter wie man eine Live-WordPress-Website auf einen lokalen Server verschiebt.

Danach gibt es mehrere Möglichkeiten, Ihren benutzerdefinierten Widget-Code in WordPress hinzuzufügen.

Idealerweise können Sie ein websitespezifisches Plugin erstellen und Ihren Widget-Code dort einfügen. Dies ermöglicht es Ihnen, Code zu WordPress hinzuzufügen, der nicht von Ihrem WordPress-Theme abhängig ist.

Sie können den Code auch in die functions.php-Datei Ihres Themes einfügen. Er ist jedoch nur verfügbar, wenn dieses spezielle Theme aktiv ist.

Ein weiteres Tool, das Sie verwenden können, ist das WPCode Plugin, mit dem Sie ganz einfach benutzerdefinierten Code zu Ihrer Website hinzufügen können.

In diesem Tutorial erstellen wir ein einfaches Widget, das Besucher einfach begrüßt. Das Ziel ist es, sich mit der WordPress-Widget-Klasse vertraut zu machen.

Bereit? Legen wir los.

Erstellen eines einfachen WordPress-Widgets

WordPress wird mit einer integrierten WordPress-Widget-Klasse geliefert. Jedes neue WordPress-Widget erweitert die WordPress-Widget-Klasse.

Im Handbuch für WordPress-Entwickler werden 19 Methoden erwähnt, die mit der WP Widget-Klasse verwendet werden können.

Für dieses Tutorial konzentrieren wir uns jedoch auf die folgenden Methoden.

• __construct() : Dies ist der Teil, in dem wir die Widget-ID, den Titel und die Beschreibung erstellen.
• widget: Hier definieren wir die vom Widget generierte Ausgabe.
• Formular: Dieser Teil des Codes ist, wo wir das Formular mit Widget-Optionen für das Backend erstellen.
• Update: Dies ist der Teil, in dem wir Widget-Optionen in der Datenbank speichern.

Um ein benutzerdefiniertes Widget zu erstellen, können Sie den folgenden Codeausschnitt in Ihre functions.php-Datei oder in WPCode (empfohlen) kopieren und 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' );

Der einfachste Weg, benutzerdefinierten Code zu Ihrer WordPress-Website hinzuzufügen, ist die Verwendung von WPCode. Es ist das beste Code-Snippet-Plugin, das hilft, Code-Snippets auf Ihrer Website zu verwalten und einzufügen, ohne etwas zu beschädigen.

Zuerst 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-Admin-Panel zu Code-Snippets » + Snippet hinzufügen navigieren. Wählen Sie hier die Option „Eigene benutzerdefinierte Codes hinzufügen (Neues Snippet)“.

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

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

Als Nächstes können Sie nach unten scrollen und die Einfügungsmethode für Ihren Code auswählen.

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

Sobald das erledigt ist, können Sie wieder nach oben scrollen, um den Snippet zu speichern.

Um den Snippet zu aktivieren, klicken Sie einfach auf den Schalter auf 'Aktiv'.

Um mehr zu erfahren, lesen Sie bitte unseren Leitfaden zum einfachen Hinzufügen von benutzerdefiniertem Code in WordPress.

Nachdem Sie den Code zu WordPress hinzugefügt haben, müssen Sie zur Seite Darstellung » Widgets in Ihrem WordPress-Admin-Panel gehen.

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 zum Ausfüllen.

Sie können Ihren Text eingeben 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.

Hier ist ein Beispiel dafür, wie es auf unserer Demoseite aussieht.

Hinzufügen eines benutzerdefinierten Widgets im klassischen WordPress-Editor

Wenn Sie den klassischen Widget-Editor verwenden, um Ihrer Website neue Widgets hinzuzufügen, ist der Vorgang ähnlich.

In der Liste der verfügbaren Widgets gibt es ein neues Widget namens „WPBeginner Widget“. Sie müssen dieses Widget in Ihre Seitenleiste ziehen.

Geben Sie dann einen Titel ein und klicken Sie auf „Speichern“, um Ihre Widget-Einstellungen zu speichern. 

Ihr neues benutzerdefiniertes Widget ist jetzt auf Ihrer Website live.

Nun, lassen Sie uns den Code noch einmal studieren.

Zuerst 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 wird.

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

Nun gibt es ein paar Dinge, die Sie vielleicht fragen möchten. Was ist zum Beispiel der Zweck von textdomain?

WordPress verwendet „gettext“, um Übersetzung und Lokalisierung zu handhaben. Diese textdomain und _e weisen „gettext“ an, einen String für die Übersetzung verfügbar zu machen. Weitere Informationen finden Sie in unserem Leitfaden, wie Sie übersetzungsbereite WordPress-Themes finden.

Wenn Sie ein benutzerdefiniertes Widget für Ihr Theme erstellen, können Sie textdomain durch die Textdomäne Ihres Themes ersetzen.

Alternativ können Sie ein WordPress-Übersetzungs-Plugin verwenden, um WordPress einfach zu übersetzen und eine mehrsprachige WordPress-Website erstellen.

Bonus: Benutzerdefinierte Stile zu Ihren WordPress-Widgets hinzufügen

Sobald Sie ein WordPress-Widget erstellt haben, können Sie ihm auch benutzerdefinierte Stile hinzufügen. Dies kann das Erscheinungsbild Ihrer Website verbessern, Konsistenz wahren und wichtige Informationen hervorheben.

Besuchen Sie dazu die Seite Darstellung » Widgets und fügen Sie das Widget hinzu, das Sie anpassen möchten. Sie sehen nun einige Optionen, um Farben und Typografie im Blockbereich auf der rechten Seite zu ändern.

Wenn das Widget diese Option jedoch nicht anzeigt, können Sie es anpassen, indem Sie CSS-Klassen hinzufügen, nachdem Sie den Tab 'Erweitert' erweitert haben.

Jetzt können Sie benutzerdefiniertes CSS zu Ihrem WordPress-Theme hinzufügen, das auf diese spezielle CSS-Klasse abzielt.

Gehen Sie dazu zur Seite Design » Anpassen und wechseln Sie zum Tab Zusätzliches CSS. Hier sehen Sie eine Vorschau Ihrer Website mit einem Feld, in das Sie Ihre CSS-Regeln eingeben können.

Sie können jetzt benutzerdefiniertes CSS verwenden, um das Erscheinungsbild Ihres Widgets anzupassen. Details finden Sie in unserem Tutorial, wie Sie benutzerdefinierte Stile zu Ihren WordPress-Widgets hinzufügen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie einfach ein benutzerdefiniertes WordPress-Widget erstellen. Möglicherweise möchten Sie auch unseren Leitfaden zum Deaktivieren von Widget-Blöcken in WordPress und unser Tutorial zum Entfernen inaktiver Widgets in WordPress lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.