WordPress Widgets sind kleine Blöcke von Inhalt können Sie ziehen und fallen in Sidebars, Fußzeilen, oder benutzerdefinierte Widget-Bereiche - perfekt für die Anzeige neuer Beiträge, Kontaktinformationen, Social Links, Anzeigen oder benutzerdefinierte Nachrichten. Während WordPress viele Standard-Widgets beinhaltet, erstellen Sie Ihr eigenes benutzerdefiniertes Widget können Sie einzigartige Funktionen hinzufügen, die auf Ihre Website oder Kundenbedürfnisse zugeschnitten sind (z.B. eine benutzerdefinierte “Letzte Updates” Box, personalisierte Gruß oder dynamische Inhalte). Im Jahr 2026, mit Full-Site-Bearbeitung und Block-Themen immer Standard, benutzerdefinierte Widgets bleiben eine leistungsfähige Weise, um Sidebars und alte Widget-Bereiche zu erweitern.
Bei Cope Business, bauen wir benutzerdefinierte Widgets für Kunden während unserer technische SEO Audits die benutzererfahrung zu verbessern, markenelemente hinzuzufügen und das engagement zu verbessern, ohne sich auf schwere drittanbieter-plugins zu verlassen.
Diese Schritt-für-Schritt Anleitung zeigt Ihnen, wie Sie ein einfaches benutzerdefiniertes WordPress-Widget von Grund auf erstellen — keine Plugins erforderlich. Wir erstellen eine, die eine benutzerdefinierte Nachricht mit einem optionalen Titel und Link zeigt. Sie können es später für erweiterte Funktionen erweitern.
Warum ein benutzerdefiniertes WordPress Widget erstellen?
- Einzigartige Funktionalität — Fügen Sie genau das hinzu, was Sie brauchen (kein Bluff von Drittanbieter-Plugins)
- Vollständige Kontrolle — Stil und verhalten sich genau, wie Sie wollen
- Leichtgewicht — Kein zusätzliches Plugin Overhead → schnellere Website
- Wiederverwendbar — Verwenden Sie es über mehrere Websites oder Client-Projekte
- Lernmöglichkeiten — Tolle Weise zu verstehen WordPress-Entwicklung
Voraussetzungen
- Eine lokale / stagnierende WordPress-Website (sicher testen!)
- Grundlegendes PHP-Wissen (wir erklären jede Zeile)
- Ein Kinderthema (empfohlen) oder ein benutzerdefiniertes Plugin-Ordner
- Zugriff auf wp-content (via FTP oder Hosting-Dateimanager)
Schritt für Schritt: Erstellen Sie Ihr erstes benutzerdefiniertes Widget
Schritt 1: Erstellen Sie ein benutzerdefiniertes Plugin (Safest & Portable)
Es ist besser, ein kleines Plugin zu erstellen, als Code zu den Funktionen hinzufügen.php (Überlebt Themenänderungen).
- In /wp-content/plugins/ erstellen Sie einen neuen Ordner: cope-custom-widget
- Innen, erstellen Sie eine Datei: cope-custom-widget.php
- Fügen Sie diesen Header hinzu:
PHP
<?php
/**
* Plugin Name: Cope Custom Widget
* Plugin URI: https://www.copebusiness.com
* Description: Adds a simple custom widget to WordPress
* Version: 1.0
* Author: Cope Business
* Author URI: https://www.copebusiness.com
* License: GPL2
*/Schritt 2: Registrieren Sie die Widget Klasse
Fügen Sie diesen Code unter dem Header hinzu:
PHP
class Cope_Custom_Widget extends WP_Widget {
// Constructor
public function __construct() {
parent::__construct(
'cope_custom_widget', // Base ID
'Cope Custom Message Widget', // Name shown in widget area
array( 'description' => 'Displays a custom message with optional link.' )
);
}
// Front-end display of widget
public function widget( $args, $instance ) {
echo $args['before_widget'];
if ( ! empty( $instance['title'] ) ) {
echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
}
echo '<div class="cope-custom-message">';
echo ! empty( $instance['message'] ) ? esc_html( $instance['message'] ) : 'Add your custom message here.';
if ( ! empty( $instance['link_url'] ) && ! empty( $instance['link_text'] ) ) {
echo ' <a href="' . esc_url( $instance['link_url'] ) . '">' . esc_html( $instance['link_text'] ) . '</a>';
}
echo '</div>';
echo $args['after_widget'];
}
// Back-end widget form
public function form( $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : 'Custom Message';
$message = ! empty( $instance['message'] ) ? $instance['message'] : '';
$link_url = ! empty( $instance['link_url'] ) ? $instance['link_url'] : '';
$link_text = ! empty( $instance['link_text'] ) ? $instance['link_text'] : 'Learn More';
?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>">Title:</label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'message' ) ); ?>">Message:</label>
<textarea class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'message' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'message' ) ); ?>" rows="5"><?php echo esc_textarea( $message ); ?></textarea>
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'link_url' ) ); ?>">Link URL:</label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'link_url' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'link_url' ) ); ?>" type="url" value="<?php echo esc_url( $link_url ); ?>">
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'link_text' ) ); ?>">Link Text:</label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'link_text' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'link_text' ) ); ?>" type="text" value="<?php echo esc_attr( $link_text ); ?>">
</p>
<?php
}
// Update widget values
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';
$instance['message'] = ( ! empty( $new_instance['message'] ) ) ? sanitize_textarea_field( $new_instance['message'] ) : '';
$instance['link_url'] = ( ! empty( $new_instance['link_url'] ) ) ? esc_url_raw( $new_instance['link_url'] ) : '';
$instance['link_text'] = ( ! empty( $new_instance['link_text'] ) ) ? sanitize_text_field( $new_instance['link_text'] ) : '';
return $instance;
}
}Schritt 3: Registrieren Sie das Widget
Fügen Sie das unten hinzu:
PHP
function cope_register_custom_widget() {
register_widget( 'Cope_Custom_Widget' );
}
add_action( 'widgets_init', 'cope_register_custom_widget' );Schritt 4: Aktivieren & Test
- Speichern Sie die Datei.
- Gehen Sie Plugins → Aktivieren Sie “Cope Custom Widget”.
- Gehen Sie Erscheinung > Widgets → Ziehen Sie “Cope Custom Message Widget” an eine Seitenleiste.
- Füllen Sie Titel, Nachricht und optionalen Link → Speichern.
- Besuchen Sie Ihre Website — das benutzerdefinierte Widget erscheint!
Pros: Volle Kontrolle, keine zusätzlichen Plugins, wiederverwendbar.
Negativ: Erfordert grundlegende PHP; Test auf Staging zuerst.
Methode 2: Verwendung eines Plugins (Faster für Nicht-Coder)
Wenn Codierung fühlt sich überwältigend, verwenden Sie ein Plugin.
Empfohlenes Plugin: Widget-Optionen (Free/Pro) oder SiteOrigin Widgets Bundle
- Installieren Widget Optionen (frei).
- Gehen Sie Erscheinung > Widgets.
- Hinzufügen von Widget (Text, benutzerdefinierte HTML, etc.).
- Verwenden Sie Widget-Optionen zum Style, Ausrichten oder Hinzufügen von benutzerdefinierten Klassen.
- Für erweiterte Widgets: Installieren SiteOrigin Widgets Bundle (kostenlos) → verwenden sie vorgefertigte widgets oder erstellen sie benutzerdefinierte.
Pros: Kein Code, visuelle Bedienelemente, einfach.
Negativ: Weniger flexibel als benutzerdefinierter Code.
Best Practices für benutzerdefinierte Widgets
- Verwenden Sie immer ein Child-Thema oder benutzerdefinierte Plugin - nie bearbeiten Themendateien direkt.
- Sanitieren Sie alle Eingaben (entwede im Beispielcode).
- Test auf Mobile – sicherstellen, dass Widget gut in Sidebars aussieht.
- Halten Sie es leicht – vermeiden Sie schwere Abfragen in Widgets.
- Fügen Sie CSS für Styling hinzu (Ansicht > Zusätzliche CSS anpassen).
Letzte Gedanken
Erstellen eines benutzerdefinierten WordPress-Widget ist eine großartige Möglichkeit, einzigartige Funktionalität hinzuzufügen, ohne auf schwere Drittanbieter-Plugins zu verlassen. Beginnen Sie mit dem obigen Codebeispiel – es ist einfach, sicher und erweiterbar.
Benutzerdefinierte Widgets geben Ihnen volle Kontrolle und halten Sie Ihre Website schlank.
Brauchen Sie Hilfe beim Aufbau von benutzerdefinierten Widgets, der Optimierung Ihrer Seitenleiste oder der Verbesserung der Website-Leistung? Kontakt Cope Business für eine kostenlose technische SEO Beratung – wir erstellen maßgeschneiderte Lösungen, um Ihre WordPress-Website genau so zu verbessern, wie Sie wollen.
