{"id":35368,"date":"2020-07-16T03:16:13","date_gmt":"2020-07-16T03:16:13","guid":{"rendered":"https:\/\/blogging-techies.com\/ge\/so-fugen-sie-dem-website-header-ein-wordpress-widget-hinzu\/"},"modified":"2020-07-16T03:16:13","modified_gmt":"2020-07-16T03:16:13","slug":"so-fugen-sie-dem-website-header-ein-wordpress-widget-hinzu","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/ge\/so-fugen-sie-dem-website-header-ein-wordpress-widget-hinzu\/","title":{"rendered":"So f\u00fcgen Sie dem Website-Header ein WordPress-Widget hinzu"},"content":{"rendered":"

M\u00f6chten Sie dem Header-Bereich Ihrer Website ein WordPress-Widget hinzuf\u00fcgen? Mit Widgets k\u00f6nnen Sie einfach Inhaltsbl\u00f6cke zu bestimmten Themenabschnitten 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

\"F\u00fcgen<\/p>\n

Beachtung:<\/strong> Dies ist ein Tutorial f\u00fcr Fortgeschrittene. Sie m\u00fcssen Ihren WordPress-Themendateien Code hinzuf\u00fcgen und CSS schreiben. <\/p>\n

Warum und wann ben\u00f6tigen Sie ein Header-Widget auf Ihrer Website?<\/h4>\n

Mit Widgets k\u00f6nnen Sie auf einfache Weise Inhaltsbl\u00f6cke zu einem bestimmten Bereich in einem WordPress-Design hinzuf\u00fcgen. Diese festgelegten Bereiche werden als vorbereitete Bereichsleisten an der Seite oder im Widget bezeichnet. <\/p>\n

Sie k\u00f6nnen den Widget-f\u00e4higen Bereich in der Kopfzeile oder im vorherigen Inhalt verwenden, um Anzeigen, aktuelle Artikel oder was auch immer Sie m\u00f6chten anzuzeigen. <\/p>\n

Dieser spezielle Bereich hei\u00dft “Under the Fold” und wird von allen g\u00e4ngigen Websites verwendet, um wirklich wichtige Dinge zu zeigen. <\/p>\n

\"Header-Bereich<\/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

Daher werden wir in diesem Artikel \u00fcber das Hinzuf\u00fcgen eines Widget-Bereichs zum Header der WordPress-Website sprechen. <\/p>\n

Schritt 1. Erstellen Sie einen Header-Widget-Bereich<\/h4>\n

Zuerst m\u00fcssen wir einen benutzerdefinierten Widget-Bereich erstellen. In diesem Schritt k\u00f6nnen Sie den benutzerdefinierten Widget-Bereich in anzeigen Aussehen \u00bbWidgets<\/strong> Seite im WordPress-Dashboard.<\/p>\n

Sie m\u00fcssen diesen Code zur Datei functions.php Ihres Themas hinzuf\u00fcgen. <\/p>\n

Funktion wpb_widgets_init () {register_sidebar (Array (“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

“));} Aktivit\u00e4ten hinzuf\u00fcgen (” widgets_init “,” wpb_widgets_init “);<\/p>\n

Dieser Code registriert eine neue Seitenleiste oder einen neuen Bereich, der f\u00fcr das Themen-Widget bereit ist. <\/p>\n

Jetzt k\u00f6nnen Sie zu gehen Aussehen \u00bbWidgets<\/strong> und Sie sehen einen neuen Widget-Bereich mit der Bezeichnung “Benutzerdefinierter Widget-Header-Bereich”. <\/p>\n

\"Benutzerdefinierter<\/p>\n

F\u00fcgen Sie dem 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

passiert 2- Benutzerdefiniertes Header-Widget anzeigen<\/h4>\n

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

Sie m\u00fcssen die Datei header.php im Design bearbeiten und diesen Code hinzuf\u00fcgen, in dem Sie den 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

\"Stilisiertes<\/p>\n

Sie werden feststellen, dass es etwas poliert aussieht. Hier ben\u00f6tigen Sie CSS, um es zu verbessern. <\/p>\n

Schritt 3: Entwerfen Sie den Header-Widget-Bereich mithilfe von CSS<\/h4>\n

Je nach Thema m\u00fcssen Sie CSS hinzuf\u00fcgen, um die Anzeige des Header-Widget-Bereichs und jedes darin enthaltenen Widgets zu steuern. <\/p>\n

Der einfachste Weg, dies zu tun, ist mit dem CSS Hero Plugin. Sie k\u00f6nnen die 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 das Plugin nicht verwenden m\u00f6chten, k\u00f6nnen Sie Ihrem Thema durch Besuchen benutzerdefiniertes CSS hinzuf\u00fcgen Aussehen \u00bbAnpassen<\/strong> Seite. <\/p>\n

Dadurch wird die Anpassungsoberfl\u00e4che f\u00fcr das WordPress-Design gestartet. Sie m\u00fcssen auf die Registerkarte “Zus\u00e4tzliches CSS” klicken. <\/p>\n

\"F\u00fcgen<\/p>\n

Auf einer zus\u00e4tzlichen Registerkarte “CSS” im Tool zur Themenanpassung k\u00f6nnen Sie benutzerdefiniertes CSS hinzuf\u00fcgen, w\u00e4hrend Ihre \u00c4nderungen 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 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 {width: 100%; Hintergrundfarbe: # f7f7f7; Unterkante: 1px fest #eeeeee; Textausrichtung: mittel; } H2.chw-title {Rand oben: 0px; Textausrichtung: links; Textumwandlung: Gro\u00dfbuchstaben; Schriftgr\u00f6\u00dfe: klein; Hintergrundfarbe: #feffce; Breite: 130px; Polsterung: 5 Pixel; }}<\/p>\n

So war der benutzerdefinierte Header-Bereich des Standardthemens Twenty Seventeen. <\/p>\n

\"Vorschau<\/p>\n

M\u00f6glicherweise muss das CSS an das Thema angepasst werden. Lesen Sie unsere Anleitung zum Hinzuf\u00fcgen benutzerdefinierter Stile zu WordPress-Widgets. <\/p>\n

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie das WordPress-Widget zu Ihrem Website-Header hinzuf\u00fcgen. Sie k\u00f6nnen auch unsere Liste der 25 n\u00fctzlichsten WordPress-Widgets f\u00fcr Ihre Website anzeigen. <\/p>\n

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. <\/p>\n ","protected":false},"excerpt":{"rendered":"

M\u00f6chten Sie dem Header-Bereich Ihrer Website ein WordPress-Widget hinzuf\u00fcgen? Mit Widgets k\u00f6nnen Sie einfach Inhaltsbl\u00f6cke zu bestimmten Themenabschnitten hinzuf\u00fcgen. In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach ein WordPress-Widget zu Ihrem Website-Header hinzuf\u00fcgen k\u00f6nnen. Beachtung: Dies ist ein Tutorial f\u00fcr Fortgeschrittene. Sie m\u00fcssen Ihren WordPress-Themendateien Code hinzuf\u00fcgen und CSS schreiben. Warum und wann […]<\/p>\n","protected":false},"author":1,"featured_media":35369,"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":[34,109,300,304,60,9346,8567],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/35368"}],"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=35368"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/35368\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/35369"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=35368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=35368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=35368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}