So fügen Sie Ihrem Website-Header ein WordPress-Widget hinzu (2 Möglichkeiten)

Möchten Sie ein WordPress-Widget zum Header-Bereich Ihrer Website hinzufügen?

Mit Widgets können Sie ganz einfach Inhaltsblöcke zu bestimmten Abschnitten Ihres Designs hinzufügen, aber nicht jedes Design enthält einen Header-Widget-Bereich.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach ein WordPress-Widget zu Ihrem Website-Header hinzufügen können.

Warum ein Header-Widget zu Ihrer WordPress-Site hinzufügen?

Ihr Website-Header ist eines der ersten Dinge, die Ihre Besucher sehen, wenn sie Ihre WordPress-Website besuchen. Indem Sie Ihrer Kopfzeile ein WordPress-Widget hinzufügen, können Sie diesen Bereich optimieren, um die Aufmerksamkeit der Leser zu gewinnen.

Die meisten Website-Header enthalten ein benutzerdefiniertes Logo und ein Navigationsmenü, damit sich Besucher auf Ihrer Website zurechtfinden.

Sie können auch ein Header-Widget über oder unter diesem Bereich hinzufügen, um hilfreiche Inhalte, Bannerwerbung, zeitlich begrenzte Angebote, einzeilige Formulare und mehr anzuzeigen.

Hier bei WPBeginner haben wir einen Aufruf zum Handeln in der Kopfzeile direkt unter dem Navigationsmenü.

Die meisten WordPress-Themen haben Widget-bereite Bereiche in der Seitenleiste und den Fußzeilenbereichen der Website, aber nicht jedes Thema fügt Widget-bereite Bereiche in der Kopfzeile hinzu.

Aber zuerst werfen wir einen Blick darauf, wie Sie ein WordPress-Widget zu Ihrem Website-Header in Ihrem bestehenden Design hinzufügen. Verwenden Sie einfach die nachstehenden Quicklinks, um direkt zu der Methode zu springen, die Sie verwenden möchten.

Viele der besten WordPress-Themes enthalten einen Header-Widget-Bereich, den Sie nach Ihren Wünschen anpassen können.

Zunächst sollten Sie sehen, ob Ihr aktuelles WordPress-Theme einen WordPress-Widget-Bereich in der Kopfzeile unterstützt.

Sie finden dies, indem Sie zum WordPress-Theme-Customizer oder zum Widget-Bereich Ihres WordPress-Admin-Panels gehen. Navigieren Sie dazu zu Aussehen » Anpassen und prüfen Sie, ob es eine Option zum Bearbeiten der Kopfzeile gibt.

In diesem Beispiel hat das kostenlose Astra-Design eine Option namens „Header Builder“. Wir zeigen Ihnen, wie Sie diese Funktion in Astra verwenden, aber denken Sie daran, dass dies je nach verwendetem Thema anders aussieht.

Wenn Sie darauf klicken, gelangen Sie zu einem Bildschirm, auf dem Sie Ihre Kopfzeile bearbeiten und Widgets hinzufügen können.

Am unteren Bildschirmrand können Sie die Kopfzeile zusammen mit den Bereichen über und unter der Kopfzeile vollständig anpassen. Bewegen Sie einfach den Mauszeiger über einen der leeren Bereiche und klicken Sie auf das „Plus“-Symbol.

Dies öffnet ein Popup-Menü, in dem Sie „Widget 1“ auswählen können.

Es stehen zusätzliche Optionen zur Auswahl, aber Sie müssen eine der „Widget“-Optionen auswählen, um das Header-Widget bereit zu machen.

Um Ihrer Kopfzeile einen Widget-Bereich hinzuzufügen, klicken Sie auf das Feld „Widget 1“ im Abschnitt „Kopfzeilen-Anpassung“.

Dadurch wird die Option zum Hinzufügen eines Widgets angezeigt.

Klicken Sie als Nächstes im linken Menü auf das Plus-Symbol zum Hinzufügen von Blöcken.

Dies öffnet ein Popup, in dem Sie ein Widget auswählen können, das Sie Ihrer Kopfzeile hinzufügen möchten.

Sie können Ihren Header weiter anpassen und so viele Widgets hinzufügen, wie Sie möchten.

Wenn Sie fertig sind, klicken Sie unbedingt auf die Schaltfläche „Veröffentlichen“, um Ihre Änderungen zu speichern.

Jetzt können Sie Ihren Kopfbereich mit dem hinzugefügten Widget oder den hinzugefügten Widgets anzeigen.

Nutzt du kein Astra?

Eine andere Möglichkeit, um zu sehen, ob Ihr Theme bereits ein WordPress-Header-Widget hat, besteht darin, in Ihrem WordPress-Admin-Panel zu Aussehen » Widgets zu navigieren.

Sehen Sie dann nach, ob es einen Widget-Abschnitt mit der Bezeichnung „Header“ oder etwas Ähnliches gibt.

Wenn dies der Fall ist, klicken Sie einfach auf das Plus-Symbol zum Hinzufügen von Blöcken, um das Widgets-Menü aufzurufen.

Dann können Sie ein beliebiges Widget hinzufügen, indem Sie darauf klicken.

Stellen Sie sicher, dass Sie auf die Schaltfläche „Aktualisieren“ klicken, um Ihre Änderungen im Header-Widget-Bereich zu speichern.

Wenn Ihr WordPress-Theme derzeit keinen WordPress-Widget-Bereich in der Kopfzeile hat, müssen Sie ihn manuell hinzufügen, indem Sie WordPress Code hinzufügen.

Wenn Sie dies noch nicht getan haben, lesen Sie unsere Anleitung zum Kopieren und Einfügen von Code in WordPress.

Anschließend können Sie das folgende Code-Snippet zu Ihrer Datei functions.php in einem seitenspezifischen Plug-in oder mithilfe eines Code-Snippets-Plug-ins hinzufügen.

function wpb_widgets_init() 

	register_sidebar( array(
		'name'          => 'Custom Header Widget Area',
		'id'            => 'custom-header-widget',
		'before_widget' => '<div class="chw-widget">',
		'after_widget'  => '</div>',
		'before_title'  => '<h2 class="chw-title">',
		'after_title'   => '</h2>',
	) );


add_action( 'widgets_init', 'wpb_widgets_init' );

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

Wenn Sie zu Aussehen » Widgets gehen, sehen Sie einen neuen Widget-Bereich mit der Bezeichnung „Benutzerdefinierter Kopfzeilen-Widget-Bereich“.

Jetzt können Sie Ihre Widgets zu diesem neuen Bereich hinzufügen. Weitere Einzelheiten finden Sie in unserem Leitfaden zum Hinzufügen und Verwenden von Widgets in WordPress.

Ihr Header-Widget wird jedoch noch nicht live auf Ihrer Website angezeigt. Wie das geht, zeigen wir Ihnen als Nächstes.

Anzeigen Ihres benutzerdefinierten Header-Widgets in WordPress

Nachdem Sie den Header-Widget-Bereich erstellt haben, müssen Sie WordPress mitteilen, wo es auf Ihrer Website angezeigt werden soll.

Dazu müssen Sie die header.php-Datei Ihres Themes bearbeiten. Dann müssen Sie den folgenden Code dort hinzufügen, wo das Widget angezeigt werden soll.

<?php

if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div class="chw-widget-area widget-area" role="complementary">
	<?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>

<?php endif; ?>

Dieser Code fügt den Widget-Bereich, den Sie zuvor erstellt haben, zum Header-Bereich Ihrer Website hinzu.

Jetzt können Sie Ihren WordPress-Blog besuchen, um Ihren Header-Widget-Bereich live zu sehen.

Gestalten Sie Ihren WordPress-Header-Widget-Bereich mit CSS

Abhängig von Ihrem Thema müssen Sie möglicherweise auch CSS zu WordPress hinzufügen, um zu steuern, wie der Header-Widget-Bereich und jedes darin enthaltene Widget angezeigt werden. Wenn Sie CSS nicht kennen, können Sie stattdessen ein Plugin wie CSS Hero verwenden.

Weitere Informationen finden Sie in unserem Leitfaden zum einfachen Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Site.

Navigieren Sie als Nächstes zu Darstellung » Anpassen in Ihrem WordPress-Adminbereich.

Dadurch wird das Anpassungsfenster für das WordPress-Design aufgerufen. Sie müssen auf die Registerkarte „Zusätzliches CSS“ klicken.

Auf diese Weise können Sie zusätzliches CSS direkt zu Ihrem Design hinzufügen und die Änderungen in Echtzeit sehen.

Hier ist ein Beispiel-CSS-Code, um Ihnen den Einstieg zu erleichtern:

div#header-widget-area 
    width: 100%;
    background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
    text-align: center;
		padding: 20px;

h2.chw-title 
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;
    

Fügen Sie einfach den CSS-Code in das Feld „Zusätzliches CSS“ ein.

Wenn Sie mit dem Hinzufügen Ihres CSS fertig sind, stellen Sie sicher, dass Sie auf die Schaltfläche „Veröffentlichen“ klicken, um Ihre Änderungen zu speichern.

So sieht das benutzerdefinierte Header-Widget mit den CSS-Änderungen live aus.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie ein WordPress-Widget zu Ihrem Website-Header hinzufügen. Vielleicht möchten Sie auch unseren Leitfaden zur Auswahl des besten WordPress-Hostings und unsere Expertenauswahl der besten Live-Chat-Software für kleine Unternehmen lesen.

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