![\"F\u00fcgen](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/wpwidgetheader.jpg\" "\\"F\u00fcgen")
<\/p>\nM\u00f6chten Sie dem Header-Bereich Ihrer Website ein WordPress-Widget hinzuf\u00fcgen? Mit Widgets k\u00f6nnen Sie auf einfache Weise Inhaltsbl\u00f6cke zu bestimmten Abschnitten Ihres Themas hinzuf\u00fcgen. In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach ein WordPress-Widget zu Ihrem Website-Header hinzuf\u00fcgen k\u00f6nnen. <\/p>\n
<\/p>\n
Hinweis:<\/strong> Dies ist ein Tutorial f\u00fcr Fortgeschrittene. Sie m\u00fcssen Ihren WordPress-Themendateien Code hinzuf\u00fcgen und CSS schreiben. <\/p>\n Mit Widgets k\u00f6nnen Sie problemlos Inhaltsbl\u00f6cke zu einem bestimmten Bereich in Ihrem WordPress-Design hinzuf\u00fcgen. Diese ausgewiesenen Bereiche werden als seitlich vorbereitete Bereiche oder Widget-Leisten bezeichnet. <\/p>\n Sie k\u00f6nnen einen Widget-f\u00e4higen Bereich in der Kopfzeile oder vor dem Inhalt verwenden, um Anzeigen, aktuelle Artikel oder was auch immer Sie m\u00f6chten anzuzeigen. <\/p>\n Dieser spezielle Bereich hei\u00dft \u201eUnter der Falte\u201c und wird von allen beliebten Websites verwendet, um wirklich wichtige Dinge zu zeigen. <\/p>\n WordPress-Themes f\u00fcgen im Allgemeinen Seitenleisten neben Inhalten oder im Fu\u00dfzeilenbereich hinzu. Nur wenige WordPress-Themes f\u00fcgen dem Inhalt oder der Kopfzeile Widget-f\u00e4hige Bereiche hinzu. <\/p>\n Aus diesem Grund wird in diesem Artikel erl\u00e4utert, wie Sie dem WordPress-Website-Header einen Widget-Bereich hinzuf\u00fcgen. <\/p>\n Zuerst m\u00fcssen wir einen benutzerdefinierten Widget-Bereich erstellen. In diesem Schritt k\u00f6nnen Sie Ihren benutzerdefinierten Widget-Bereich in anzeigen Aussehen \u00bbWidgets<\/strong> Seite in Ihrem WordPress-Dashboard.<\/p>\n Sie m\u00fcssen diesen Code zur Datei functions.php Ihres Themas hinzuf\u00fcgen. <\/p>\n Wpb_widgets_init () Funktion {<\/p>\n register_sidebar (Array ( ‘, ‘, ‘, }} Dieser Code registriert eine neue Seitenleiste oder einen neuen Widget-f\u00e4higen Bereich f\u00fcr Ihr Thema. <\/p>\n Jetzt k\u00f6nnen Sie zu gehen Aussehen \u00bbWidgets<\/strong> Auf dieser Seite wird ein neuer Widget-Bereich mit dem Namen “Benutzerdefinierter Header-Widget-Bereich” angezeigt. <\/p>\n F\u00fcgen Sie diesem neu erstellten Widget-Bereich ein Text-Widget hinzu und speichern Sie es. Ausf\u00fchrliche Anweisungen zum Hinzuf\u00fcgen von Widgets finden Sie in unserer Anleitung zum Hinzuf\u00fcgen und Verwenden von Widgets in WordPress.<\/p>\n Wenn Sie Ihre Website jetzt besuchen, wird das Text-Widget, das Sie gerade zu Ihrem neu erstellten Header-Widget hinzugef\u00fcgt haben, nicht angezeigt. <\/p>\n Dies liegt daran, dass wir WordPress noch nicht mitgeteilt haben, wo dieser Widget-Bereich angezeigt werden soll. <\/p>\n Wir werden dies in diesem Schritt tun. <\/p>\n Sie m\u00fcssen die Datei header.php in Ihrem Design bearbeiten und diesen Code hinzuf\u00fcgen, in dem Sie Ihren benutzerdefinierten Widget-Bereich anzeigen m\u00f6chten. <\/p>\n Vergessen Sie nicht, Ihre \u00c4nderungen zu speichern. <\/p>\n Sie k\u00f6nnen jetzt ihre Website besuchen und den Header-Widget-Bereich anzeigen. <\/p>\n Sie werden feststellen, dass es etwas poliert aussieht. Hier ben\u00f6tigen Sie CSS, um es zu verbessern. <\/p>\n Abh\u00e4ngig von Ihrem Thema m\u00fcssen Sie CSS hinzuf\u00fcgen, um zu steuern, wie der Header-Widget-Bereich und jedes darin enthaltene Widget angezeigt wird. <\/p>\n Der einfachste Weg, dies zu tun, ist die Verwendung des CSS Hero-Plugins. Sie k\u00f6nnen eine intuitive Benutzeroberfl\u00e4che verwenden, um das CSS eines beliebigen WordPress-Themas zu \u00e4ndern. Weitere Informationen finden Sie in unserem CSS Hero-Test.<\/p>\n Wenn Sie kein Plugin verwenden m\u00f6chten, k\u00f6nnen Sie Ihrem Thema durch Besuchen benutzerdefiniertes CSS hinzuf\u00fcgen Aussehen \u00bbAnpassen<\/strong> Seite. <\/p>\n Dadurch wird die WordPress Theme Customizer-Oberfl\u00e4che gestartet. Sie m\u00fcssen auf die Registerkarte “Zus\u00e4tzliches CSS” klicken. <\/p>\n Auf der zus\u00e4tzlichen Registerkarte CSS im Design-Customizer k\u00f6nnen Sie Ihr benutzerdefiniertes CSS hinzuf\u00fcgen und dabei die \u00c4nderungen beobachten, die in der Live-Ansicht angezeigt werden. <\/p>\n F\u00fcr die Zwecke dieses Tutorials wird davon ausgegangen, dass Sie diesen Bereich nur zum Hinzuf\u00fcgen eines einzelnen Widgets zum Anzeigen von Bannerwerbung oder eines benutzerdefinierten Men\u00fc-Widgets verwenden. <\/p>\n Hier sind einige CSS-Beispiele, die Ihnen den Einstieg erleichtern sollen. <\/p>\n div # header-widget-area { So sieht unser benutzerdefinierter Header-Widget-Bereich im Standardthema Twenty Seventeen aus. <\/p>\n M\u00f6glicherweise m\u00fcssen Sie das CSS an Ihr Thema anpassen. In unserem Handbuch erfahren Sie, wie Sie WordPress-Widgets benutzerdefinierte Stile hinzuf\u00fcgen. <\/p>\n Wir hoffen, dieser Artikel hat Ihnen geholfen, zu lernen, wie Sie Ihrem Website-Header ein WordPress-Widget hinzuf\u00fcgen. Sie k\u00f6nnen auch unsere Liste der 25 n\u00fctzlichsten WordPress-Widgets f\u00fcr Ihre Website anzeigen. <\/p>\n Wenn dir dieser Artikel gefallen hat, abonniere unseren YouTube-Kanal, um WordPress-Tutorial-Videos anzusehen. Sie finden uns auch unter Twitter und Facebook. <\/p>\n ","protected":false},"excerpt":{"rendered":" M\u00f6chten Sie dem Header-Bereich Ihrer Website ein WordPress-Widget hinzuf\u00fcgen? Mit Widgets k\u00f6nnen Sie auf einfache Weise Inhaltsbl\u00f6cke zu bestimmten Abschnitten Ihres Themas hinzuf\u00fcgen. In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach ein WordPress-Widget zu Ihrem Website-Header hinzuf\u00fcgen k\u00f6nnen. Hinweis: Dies ist ein Tutorial f\u00fcr Fortgeschrittene. Sie m\u00fcssen Ihren WordPress-Themendateien Code hinzuf\u00fcgen und CSS […]<\/p>\n","protected":false},"author":1,"featured_media":35336,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/06\/Como-agregar-un-widget-de-WordPress-al-encabezado-del-sitio.jpg","fifu_image_alt":""},"categories":[7],"tags":[109,300,304,730,60,9346,8567],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/35335"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=35335"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/35335\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/35336"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=35335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=35335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=35335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Warum und wann ben\u00f6tigen Sie ein Header-Widget auf Ihrer Website?<\/h4>\n
![\"Der](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/abovethefold.png\" "\\"Der")
<\/p>\nSchritt 1. Erstellen Sie einen Header-Widget-Bereich<\/h4>\n
‘name’ => ‘Benutzerdefinierter Header-Widget-Bereich’,
‘id’ => ‘benutzerdefiniertes Header-Widget’,
‘before_widget’ => ‘<\/p>\n
‘after_widget’ => ‘<\/p>\n
‘before_title’ => ‘<\/p>\n‘,
‘after_title’ => ‘<\/h2>\n
));<\/p>\n
add_action (‘widgets_init’, ‘wpb_widgets_init’);<\/p>\n![\"Benutzerdefinierter](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/customsidebar.png\" "\\"Benutzerdefinierter")
<\/p>\nSchritt 2 – Zeigen Sie Ihr benutzerdefiniertes Header-Widget an<\/h4>\n
![\"Stilisiertes](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/unstyled-widget.jpg\" "\\"Stilisiertes")
<\/p>\nSchritt 3: Entwerfen Sie den Header-Widget-Bereich mit CSS<\/h4>\n
![\"F\u00fcgen](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/additionalcss.jpg\" "\\"F\u00fcgen")
<\/p>\n
Breite: 100%;
Hintergrundfarbe: # f7f7f7;
Unterkante: 1px fest #eeeeee;
Textausrichtung: Mitte;
}}
h2.chw-title {
oberer Rand: 0 px;
Textausrichtung: links;
Textumwandlung: Gro\u00dfbuchstaben;
Schriftgr\u00f6\u00dfe: klein;
Hintergrundfarbe: #feffce;
Breite: 130px;
Polsterung: 5px;
}}<\/p>\n![\"Vorschau](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/05\/headerwidget-1.jpg\" "\\"Vorschau")
<\/p>\n