So fügen Sie Ihrem Website-Header ein WordPress-Widget hinzu

Möchten Sie dem Header-Bereich Ihrer Website ein WordPress-Widget hinzufügen? Mit Widgets können Sie auf einfache Weise Inhaltsblöcke zu bestimmten Abschnitten Ihres Themas hinzufügen. In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach ein WordPress-Widget zu Ihrem Website-Header hinzufügen können.

Hinweis: Dies ist ein Tutorial für Fortgeschrittene. Sie müssen Ihren WordPress-Themendateien Code hinzufügen und CSS schreiben.

Warum und wann benötigen Sie ein Header-Widget auf Ihrer Website?

Mit Widgets können Sie problemlos Inhaltsblöcke zu einem bestimmten Bereich in Ihrem WordPress-Design hinzufügen. Diese ausgewiesenen Bereiche werden als seitlich vorbereitete Bereiche oder Widget-Leisten bezeichnet.

Sie können einen Widget-fähigen Bereich in der Kopfzeile oder vor dem Inhalt verwenden, um Anzeigen, aktuelle Artikel oder was auch immer Sie möchten anzuzeigen.

Dieser spezielle Bereich heißt „Unter der Falte“ und wird von allen beliebten Websites verwendet, um wirklich wichtige Dinge zu zeigen.

WordPress-Themes fügen im Allgemeinen Seitenleisten neben Inhalten oder im Fußzeilenbereich hinzu. Nur wenige WordPress-Themes fügen dem Inhalt oder der Kopfzeile Widget-fähige Bereiche hinzu.

Aus diesem Grund wird in diesem Artikel erläutert, wie Sie dem WordPress-Website-Header einen Widget-Bereich hinzufügen.

Schritt 1. Erstellen Sie einen Header-Widget-Bereich

Zuerst müssen wir einen benutzerdefinierten Widget-Bereich erstellen. In diesem Schritt können Sie Ihren benutzerdefinierten Widget-Bereich in anzeigen Aussehen »Widgets Seite in Ihrem WordPress-Dashboard.

Sie müssen diesen Code zur Datei functions.php Ihres Themas hinzufügen.

Wpb_widgets_init () Funktion {

register_sidebar (Array (
‘name’ => ‘Benutzerdefinierter Header-Widget-Bereich’,
‘id’ => ‘benutzerdefiniertes Header-Widget’,
‘before_widget’ => ‘

‘,
‘after_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));

}}
add_action (‘widgets_init’, ‘wpb_widgets_init’);

Dieser Code registriert eine neue Seitenleiste oder einen neuen Widget-fähigen Bereich für Ihr Thema.

Jetzt können Sie zu gehen Aussehen »Widgets Auf dieser Seite wird ein neuer Widget-Bereich mit dem Namen “Benutzerdefinierter Header-Widget-Bereich” angezeigt.

Fügen Sie diesem neu erstellten Widget-Bereich ein Text-Widget hinzu und speichern Sie es. Ausführliche Anweisungen zum Hinzufügen von Widgets finden Sie in unserer Anleitung zum Hinzufügen und Verwenden von Widgets in WordPress.

Schritt 2 – Zeigen Sie Ihr benutzerdefiniertes Header-Widget an

Wenn Sie Ihre Website jetzt besuchen, wird das Text-Widget, das Sie gerade zu Ihrem neu erstellten Header-Widget hinzugefügt haben, nicht angezeigt.

Dies liegt daran, dass wir WordPress noch nicht mitgeteilt haben, wo dieser Widget-Bereich angezeigt werden soll.

Wir werden dies in diesem Schritt tun.

Sie müssen die Datei header.php in Ihrem Design bearbeiten und diesen Code hinzufügen, in dem Sie Ihren benutzerdefinierten Widget-Bereich anzeigen möchten.

Vergessen Sie nicht, Ihre Änderungen zu speichern.

Sie können jetzt ihre Website besuchen und den Header-Widget-Bereich anzeigen.

Sie werden feststellen, dass es etwas poliert aussieht. Hier benötigen Sie CSS, um es zu verbessern.

Schritt 3: Entwerfen Sie den Header-Widget-Bereich mit CSS

Abhängig von Ihrem Thema müssen Sie CSS hinzufügen, um zu steuern, wie der Header-Widget-Bereich und jedes darin enthaltene Widget angezeigt wird.

Der einfachste Weg, dies zu tun, ist die Verwendung des CSS Hero-Plugins. Sie können eine intuitive Benutzeroberfläche verwenden, um das CSS eines beliebigen WordPress-Themas zu ändern. Weitere Informationen finden Sie in unserem CSS Hero-Test.

Wenn Sie kein Plugin verwenden möchten, können Sie Ihrem Thema durch Besuchen benutzerdefiniertes CSS hinzufügen Aussehen »Anpassen Seite.

Dadurch wird die WordPress Theme Customizer-Oberfläche gestartet. Sie müssen auf die Registerkarte “Zusätzliches CSS” klicken.

Auf der zusätzlichen Registerkarte CSS im Design-Customizer können Sie Ihr benutzerdefiniertes CSS hinzufügen und dabei die Änderungen beobachten, die in der Live-Ansicht angezeigt werden.

Für die Zwecke dieses Tutorials wird davon ausgegangen, dass Sie diesen Bereich nur zum Hinzufügen eines einzelnen Widgets zum Anzeigen von Bannerwerbung oder eines benutzerdefinierten Menü-Widgets verwenden.

Hier sind einige CSS-Beispiele, die Ihnen den Einstieg erleichtern sollen.

div # header-widget-area {
Breite: 100%;
Hintergrundfarbe: # f7f7f7;
Unterkante: 1px fest #eeeeee;
Textausrichtung: Mitte;
}}
h2.chw-title {
oberer Rand: 0 px;
Textausrichtung: links;
Textumwandlung: Großbuchstaben;
Schriftgröße: klein;
Hintergrundfarbe: #feffce;
Breite: 130px;
Polsterung: 5px;
}}

So sieht unser benutzerdefinierter Header-Widget-Bereich im Standardthema Twenty Seventeen aus.

Möglicherweise müssen Sie das CSS an Ihr Thema anpassen. In unserem Handbuch erfahren Sie, wie Sie WordPress-Widgets benutzerdefinierte Stile hinzufügen.

Wir hoffen, dieser Artikel hat Ihnen geholfen, zu lernen, wie Sie Ihrem Website-Header ein WordPress-Widget hinzufügen. Sie können auch unsere Liste der 25 nützlichsten WordPress-Widgets für Ihre Website anzeigen.

Wenn dir dieser Artikel gefallen hat, abonniere unseren YouTube-Kanal, um WordPress-Tutorial-Videos anzusehen. Sie finden uns auch unter Twitter und Facebook.