Möchten Sie dem Header-Bereich Ihrer Website ein WordPress-Widget hinzufügen? Mit Widgets können Sie ganz einfach Inhaltsblöcke zu bestimmten Abschnitten Ihres Themas hinzufügen. In diesem Artikel zeigen wir dir, wie du ganz einfach ein WordPress-Widget zum Header deiner Website hinzufügen kannst.
Notiz: Dies ist ein Tutorial auf mittlerem Niveau. Sie müssen Ihren WordPress-Themedateien Code hinzufügen und CSS schreiben.
Warum und wann benötigen Sie ein Header-Widget auf Ihrer Site?
Mit Widgets können Sie ganz einfach Inhaltsblöcke zu einem bestimmten Bereich in Ihrem WordPress-Theme hinzufügen. Diese ausgewiesenen Bereiche werden als Seitenleisten oder Widget-bereite Bereiche bezeichnet.
Ein Widget-bereiter Bereich in der Kopfzeile oder vor dem Inhalt kann verwendet werden, um Anzeigen, aktuelle Artikel oder alles andere anzuzeigen, was Sie möchten.
Dieser spezielle Bereich wird „Below the fold“ genannt und alle gängigen Sites verwenden ihn, um wirklich wichtige Dinge zu zeigen.
Normalerweise fügen WordPress-Themes Seitenleisten neben dem Inhalt oder im Fußzeilenbereich hinzu. Nicht viele WordPress-Themes fügen Widget-bereite Bereiche über dem Inhalt oder im Header hinzu.
Aus diesem Grund behandeln wir in diesem Artikel, wie Sie dem Header Ihrer WordPress-Website einen Widget-Bereich hinzufügen.
Schritt 1. Erstellen eines Header-Widget-Bereichs
Zuerst müssen wir einen benutzerdefinierten Widget-Bereich erstellen. In diesem Schritt können Sie Ihren benutzerdefinierten Widget-Bereich auf . sehen Aussehen » Widgets Seite in Ihrem WordPress-Dashboard.
Sie müssen diesen Code der Datei functions.php Ihres Themes 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.
Sie können jetzt gehen zu Aussehen » Widgets Seite, und Sie sehen einen neuen Widget-Bereich mit der Bezeichnung ‚Benutzerdefinierter Header-Widget-Bereich‘.
Fahren Sie fort und fügen Sie diesem neu erstellten Widget-Bereich ein Text-Widget hinzu und speichern Sie es. In unserem Leitfaden zum Hinzufügen und Verwenden von Widgets in WordPress finden Sie detaillierte Anweisungen zum Hinzufügen von Widgets.
Schritt 2: Zeigen Sie Ihr benutzerdefiniertes Header-Widget an
Wenn Sie Ihre Website jetzt besuchen, können Sie das Text-Widget, das Sie gerade zu Ihrem neu erstellten Header-Widget hinzugefügt haben, nicht sehen.
Das liegt daran, dass wir WordPress noch nicht mitgeteilt haben, wo dieser Widget-Bereich angezeigt werden soll.
Lassen Sie uns das in diesem Schritt tun.
Sie müssen die Datei header.php in Ihrem Theme bearbeiten und diesen Code dort hinzufügen, wo Sie Ihren benutzerdefinierten Widget-Bereich anzeigen möchten.
<?php if ( is_active_sidebar( 'custom-header-widget' ) ) : ?> <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary"> <?php dynamic_sidebar( 'custom-header-widget' ); ?> </div> <?php endif; ?>
Vergessen Sie nicht, Ihre Änderungen zu speichern.
Sie können jetzt Ihre Website besuchen und sehen Ihren Header-Widget-Bereich.
Sie werden feststellen, dass es etwas unpoliert aussieht. Hier benötigen Sie CSS, damit es besser aussieht.
Schritt 3: Gestalten Sie Ihren 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 Widget darin angezeigt wird.
Der einfachere Weg, dies zu tun, ist die Verwendung des CSS Hero-Plugins. Es ermöglicht Ihnen, eine intuitive Benutzeroberfläche zu verwenden, um das CSS eines beliebigen WordPress-Themes zu ändern. Weitere Informationen finden Sie in unserem CSS Hero-Test.
Wenn Sie kein Plugin verwenden möchten, können Sie Ihrem Theme benutzerdefiniertes CSS hinzufügen, indem Sie besuchen Aussehen » Anpassen Seite.
Dadurch wird die WordPress-Theme-Anpasser-Schnittstelle gestartet. Sie müssen auf die Registerkarte „Zusätzliches CSS“ klicken.
Auf der zusätzlichen CSS-Registerkarte im Theme-Anpasser können Sie Ihr benutzerdefiniertes CSS hinzufügen, während Sie die Änderungen in der Live-Vorschau sehen.
Für dieses Tutorial gehen wir davon aus, dass Sie diesen Bereich nur verwenden, um ein einzelnes Widget zum Anzeigen von Bannerwerbung oder ein benutzerdefiniertes Menü-Widget hinzuzufügen.
Hier sind einige CSS-Beispiele, die Ihnen den Einstieg erleichtern.
div#header-widget-area { width: 100%; background-color: #f7f7f7; border-bottom:1px solid #eeeeee; text-align: center; } h2.chw-title { margin-top: 0px; text-align: left; text-transform: uppercase; font-size: small; background-color: #feffce; width: 130px; padding: 5px; }
So sah unser benutzerdefinierter Header-Widget-Bereich auf dem Standardthema Twenty Seventeen aus.
Möglicherweise müssen Sie das CSS an Ihr Theme anpassen. Sehen Sie sich unsere Anleitung zum Hinzufügen von benutzerdefinierten Stilen zu WordPress-Widgets an.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu erfahren, wie Sie dem Header Ihrer Website ein WordPress-Widget hinzufügen. Vielleicht möchten Sie auch unsere Liste der 25 nützlichsten WordPress-Widgets für Ihre Website anzeigen.