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

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

Beachtung: 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 auf einfache Weise Inhaltsblöcke zu einem bestimmten Bereich in einem WordPress-Design hinzufügen. Diese festgelegten Bereiche werden als vorbereitete Bereichsleisten an der Seite oder im Widget bezeichnet.

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

Dieser spezielle Bereich heißt “Under the Fold” und wird von allen gängigen 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.

Daher werden wir in diesem Artikel über das Hinzufügen eines Widget-Bereichs zum Header der WordPress-Website sprechen.

Schritt 1. Erstellen Sie einen Header-Widget-Bereich

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

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

Funktion wpb_widgets_init () {register_sidebar (Array (“name” => “Benutzerdefinierter Header-Widget-Bereich”, “id” => “Benutzerdefiniertes Header-Widget”, “before_widget” => ‘

“,” After_widget “=> ‘

“,” Before_title “=> ‘

“,” After_title “=> ‘

“));} Aktivitäten hinzufügen (” widgets_init “,” wpb_widgets_init “);

Dieser Code registriert eine neue Seitenleiste oder einen neuen Bereich, der für das Themen-Widget bereit ist.

Jetzt können Sie zu gehen Aussehen »Widgets und Sie sehen einen neuen Widget-Bereich mit der Bezeichnung “Benutzerdefinierter Widget-Header-Bereich”.

Fügen Sie dem 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.

passiert 2- Benutzerdefiniertes Header-Widget anzeigen

Wenn Sie Ihre Website jetzt besuchen, wird das Text-Widget, das Sie gerade zum 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 zu diesem Zeitpunkt tun.

Sie müssen die Datei header.php im Design bearbeiten und diesen Code hinzufügen, in dem Sie den 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 mithilfe von CSS

Je nach Thema müssen Sie CSS hinzufügen, um die Anzeige des Header-Widget-Bereichs und jedes darin enthaltenen Widgets zu steuern.

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

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

Dadurch wird die Anpassungsoberfläche für das WordPress-Design gestartet. Sie müssen auf die Registerkarte “Zusätzliches CSS” klicken.

Auf einer zusätzlichen Registerkarte “CSS” im Tool zur Themenanpassung können Sie benutzerdefiniertes CSS hinzufügen, während Ihre Änderungen in der Live-Ansicht angezeigt werden.

Für die Zwecke dieses Tutorials wird davon ausgegangen, dass Sie diesen Bereich nur zum Hinzufügen eines 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 {width: 100%; Hintergrundfarbe: # f7f7f7; Unterkante: 1px fest #eeeeee; Textausrichtung: mittel; } H2.chw-title {Rand oben: 0px; Textausrichtung: links; Textumwandlung: Großbuchstaben; Schriftgröße: klein; Hintergrundfarbe: #feffce; Breite: 130px; Polsterung: 5 Pixel; }}

So war der benutzerdefinierte Header-Bereich des Standardthemens Twenty Seventeen.

Möglicherweise muss das CSS an das Thema angepasst werden. Lesen Sie unsere Anleitung zum Hinzufügen benutzerdefinierter Stile zu WordPress-Widgets.

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

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie unseren YouTube-Kanal und sehen Sie sich die WordPress-Tutorial-Videos an. Sie finden uns auch auf der Website Twitter und Facebook.