{"id":32778,"date":"2020-03-05T01:56:16","date_gmt":"2020-03-05T09:56:16","guid":{"rendered":"https:\/\/kinsta.com\/?p=65034"},"modified":"2023-08-31T15:51:25","modified_gmt":"2023-08-31T14:51:25","slug":"wordpress-widgets","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/","title":{"rendered":"Der vollst\u00e4ndige Leitfaden zu WordPress Widgets: Wie man sie verwendet, hinzuf\u00fcgt und implementiert, um deine Webseite anzupassen"},"content":{"rendered":"<p>WordPress-Widgets sind unglaublich n\u00fctzlich. Sie erm\u00f6glichen es dir, alle Arten von zus\u00e4tzlichen Inhalten zu deiner Webseite au\u00dferhalb des Beitrags oder der Seite selbst hinzuzuf\u00fcgen und die Benutzer dazu anzuregen, Informationen zu erhalten, Links zu folgen oder Ma\u00dfnahmen zu ergreifen.<\/p>\n<p>In diesem Beitrag werde ich dir alles zeigen, was du \u00fcber WordPress-Widgets wissen musst. Wie man sie auf der Webseite einf\u00fcgt, wie man Widget-Bereiche zum Einf\u00fcgen der Widgets erstellt, wie man <a href=\"https:\/\/kinsta.com\/de\/blog\/so-installierst-wordpress-plugins\/\">Plugins installiert<\/a>, mit denen man mehr davon erh\u00e4lt, wie man eigene Widgets programmiert und vieles mehr.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<p>Beginnen wir zun\u00e4chst mit der Frage was WordPress-Widget sind.<\/p>\n<h2><strong>Was sind WordPress-Widgets?<\/strong><\/h2>\n<p>In WordPress sind Widgets Inhaltsausschnitte, die au\u00dferhalb des Flusses der Seite leben oder Inhalte ver\u00f6ffentlichen.<\/p>\n<p>Widgets enthalten Informationen, Navigation oder Medien, die von einem einzelnen Beitrag oder einer Seite getrennt sind. In den meisten F\u00e4llen wird jedes Widget auf jeder Seite der Webseite angezeigt, aber man kann auch Widget-Bereiche f\u00fcr bestimmte Seiten, wie z.B. die Startseite, einrichten.<\/p>\n<p>Um ein Widget zu deiner Webseite hinzuzuf\u00fcgen, musst du es zu einem Widget-Bereich hinzuf\u00fcgen. Widget-Bereiche werden von deinem Theme erstellt, da sie sich auf das Design und Layout deiner Webseite bezieht und nicht auf die Funktionalit\u00e4t.<\/p>\n<p>Die meisten <a href=\"https:\/\/kinsta.com\/de\/blog\/schnellsten-wordpress-theme\/\">WordPress-Themes<\/a> haben Widget-Bereiche in der Seitenleiste und in der Fu\u00dfzeile, obwohl einige an vielen Stellen mehrere Widget-Bereiche haben, z.B. unter oder \u00fcber dem Inhalt oder in der Kopfzeile.<\/p>\n<p>Der folgende Screenshot einer meiner eigenen Seiten zeigt Widgets in der Seitenleiste und in der Fu\u00dfzeile.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/widget-bereiche-auf-RachelMcWrites-seite.jpg\" alt=\"Widget Bereiche auf meiner Seite\" width=\"1500\" height=\"1080\"><figcaption class=\"wp-caption-text\">Widget Bereiche auf meiner Seite<\/figcaption><\/figure>\n<p>WordPress wird mit einer Reihe vorinstallierter Widgets geliefert, so dass man sie verwenden kann, ohne <a href=\"https:\/\/kinsta.com\/de\/blog\/so-installierst-wordpress-plugins\/\">Plugins installieren<\/a> oder Code schreiben zu m\u00fcssen. Man kann aber auch viele weitere Widgets hinzuf\u00fcgen, indem man Plugins installiert oder eigenen Code schreibt.<\/p>\n<p>Diese k\u00f6nnen eine gro\u00dfe Bandbreite von Inhaltstypen abdecken, wie z.B. Medien, Social Media Feeds, Navigation, Suche, Karten und vieles mehr. Es gibt nur sehr wenig, was du auf deiner Webseite haben m\u00f6chtest, f\u00fcr das du kein Widget finden kannst. Tats\u00e4chlich besteht die gr\u00f6\u00dfte Herausforderung oft darin, sich zwischen allen Optionen zu entscheiden und nicht zu \u00fcbertreiben.<\/p>\n<h2><strong>Wann sind WordPress Widgets zu verwenden?<\/strong><\/h2>\n<p>Ein Widget eignet sich immer dann, wenn man einer oder mehreren Seiten seiner Webseite zus\u00e4tzlichen Inhalt hinzuf\u00fcgen m\u00f6chte (und wenn ich Seite sage, schlie\u00dfe ich Beitr\u00e4ge, Archive usw. ein), aber das geh\u00f6rt nicht zum Inhalt dieser Seite. Sie sind besonders n\u00fctzlich f\u00fcr Inhalte, die man auf jeder Seite der Webseite anzeigen m\u00f6chte, wie z.B. eine Liste der neuesten Beitr\u00e4ge, einen <a href=\"https:\/\/kinsta.com\/de\/blog\/warenkorbabbruche\/\">Einkaufswagen<\/a> oder eine Schaltfl\u00e4che zum Aufruf von Aktionen.<\/p>\n<p>\u00dcberlege dir, wie viele Benutzer auf jedes Widget zugreifen m\u00fcssen und wie wichtig es ist, wenn du entscheidest, wo es platziert werden soll. Die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-dynamische-seitenleisten-widgets\/\">Widgets in der Seitenleiste<\/a> werden st\u00e4rker hervortreten als die in der Fu\u00dfzeile, die manche Benutzer vielleicht nicht einmal sehen.<\/p>\n<p>Ein Widget f\u00fcr die neuesten Beitr\u00e4ge oder einen Call to Action k\u00f6nnte also besser in der Seitenleiste platziert werden, wo die Leute mehr M\u00f6glichkeiten haben, mit ihnen zu interagieren, w\u00e4hrend ein Social Media-Feed in die Fu\u00dfzeile gelangen k\u00f6nnte.<\/p>\n<p>Wenn das Theme auch spezielle Widget-Bereiche f\u00fcr die Startseite hat, k\u00f6nnte es sinnvoll sein, diese f\u00fcr die Navigation durch die Abteilungen deiner Webseite, f\u00fcr Listen mit relevanten Inhalten oder f\u00fcr Medien wie ein Video zur Begr\u00fc\u00dfung der Besucher der Webseite zu verwenden.<\/p>\n<h2><strong>11 Beispiele f\u00fcr Widgets in WordPress<\/strong><\/h2>\n<p>Die M\u00f6glichkeiten, die die WordPress Widgets bieten, lassen sich am besten anhand einiger Beispiele verstehen. Schauen wir uns elf Arten von Widgets an, die man h\u00e4ufig auf WordPress-Seiten sieht.<\/p>\n<h3><strong>1. Widget f\u00fcr neue Beitr\u00e4ge<\/strong><\/h3>\n<p>Das neue Beitr\u00e4ge Widget ist m\u00f6glicherweise das am h\u00e4ufigsten verwendete Widget in Blogs.<\/p>\n<p>Mit ihm kann man eine Liste der neuesten Beitr\u00e4ge in der Seitenleiste oder in der Fu\u00dfzeile jeder Seite der Webseite anzeigen, wodurch die M\u00f6glichkeit erh\u00f6ht wird, dass die Leute die Webseite durchsuchen und eine Reihe von Beitr\u00e4gen lesen.<\/p>\n<p>Das Widget Letzte Beitr\u00e4ge ist in WordPress vorinstalliert. Du kannst damit einstellen, wie viele Beitr\u00e4ge du anzeigen und welche \u00dcberschrift du dem Widget geben willst.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/neue-beitrage-widget.jpg\" alt=\"Neue Beitr\u00e4ge Widget\" width=\"1500\" height=\"1301\"><figcaption class=\"wp-caption-text\">Neue Beitr\u00e4ge Widget<\/figcaption><\/figure>\n<p>Wenn man zus\u00e4tzliche Funktionalit\u00e4t hinzuf\u00fcgen m\u00f6chte, kann man ein Plugin f\u00fcr ein alternatives Widget wie <a href=\"https:\/\/wordpress.org\/plugins\/wordpress-popular-posts\/\">WordPress Beliebte Beitr\u00e4ge<\/a> installieren, das die beliebtesten Inhalte anzeigt. Alternativ dazu wird das <a href=\"https:\/\/wordpress.org\/plugins\/advanced-random-posts-widget\/\">Advanced Random Posts<\/a> Widget jedes Mal aktualisiert, wenn der Benutzer einen neuen Screen besucht.<\/p>\n<h3><strong>2. Widget f\u00fcr Neueste Kommentare<\/strong><\/h3>\n<p>Willst du den Besuchern zeigen, wie lebendig deine Webseite ist und wie sehr sich dein Publikum mit deinen Inhalten besch\u00e4ftigt?<\/p>\n<p>Das Widget &#8222;Aktuelle Kommentare&#8220; zeigt die neuesten Kommentare auf der Webseite an und gibt den Besuchern die M\u00f6glichkeit, direkt zu diesen Kommentaren zu navigieren und sich an der Diskussion zu beteiligen.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/aktuelle-kommentare-widget.jpg\" alt=\"Aktuelle Kommentare Widget\" width=\"1500\" height=\"1106\"><figcaption class=\"wp-caption-text\">Aktuelle Kommentare Widget<\/figcaption><\/figure>\n<p>Das Widget &#8222;Aktuelle Kommentare&#8220; wird mit WordPress geliefert. Auch hier l\u00e4sst sich ein <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-kommentar-plugins\/\">Plugin f\u00fcr Kommentare<\/a> von Drittanbietern wie das <a href=\"https:\/\/wordpress.org\/plugins\/gs-facebook-comments\/\">WP Social Comments Widget<\/a> installieren, das es den Nutzern erm\u00f6glicht, Kommentare \u00fcber ihr Facebook-Konto zu verfassen: gut f\u00fcr das Engagement in sozialen Medien.<\/p>\n<h3><strong>3. Call to Action Widgets<\/strong><\/h3>\n<p>Ein gro\u00dfer Nutzen eines Widgets besteht darin, die Menschen zum Handeln zu ermutigen, und das kann man mit einem Call to Action-Widget tun.<\/p>\n<p>Das Widget kann eine einfache Schaltfl\u00e4che sein, oder man k\u00f6nnte mit einem Text- oder HTML-Widget oder sogar einem Bildwidget, die alle in WordPress vorinstalliert sind, etwas Ma\u00dfgeschneidertes erstellen.<\/p>\n<p>Auf einer meiner eigenen Seiten habe ich ein Call to Action-Widget erstellt, das die Leute dazu anregt, sich in meine Mailingliste einzutragen. Dabei wird das integrierte HTML-Widget verwendet, in das ich ein Bild, etwas Text und eine Schaltfl\u00e4che, die ich in HTML programmiert habe, eingef\u00fcgt habe.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/call-to-action-widget-auf-meiner-seite.jpg\" alt=\"Call to Action Widget auf meiner Seite\" width=\"1500\" height=\"934\"><figcaption class=\"wp-caption-text\">Call to Action Widget auf meiner Seite<\/figcaption><\/figure>\n<h3><strong>4. Navigations-Widgets<\/strong><\/h3>\n<p>Du kannst auch Widgets verwenden, um die Leute dazu anzuregen, auf deiner Webseite zu navigieren.<\/p>\n<p>Daf\u00fcr gibt es einige Optionen: die Kategorien oder Tag Cloud Widgets und das Navigationsmen\u00fc-Widget.<\/p>\n<p>Mit dem Navigationsmen\u00fc-Widget kann man ein <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-menue\/\">benutzerdefiniertes Navigationsmen\u00fc<\/a> sowie das Hauptnavigationsmen\u00fc auf der Webseite erstellen und dieses dann einem Widgetbereich hinzuf\u00fcgen.<\/p>\n<p>Du k\u00f6nntest sogar dein Hauptnavigationsmen\u00fc zu einem Widget-Bereich hinzuf\u00fcgen, obwohl dies nur funktioniert, wenn du ein kleines Navigationsmen\u00fc hast.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/navigationsmenu-widget.jpg\" alt=\"Navigationsmen\u00fc Widget\" width=\"1500\" height=\"1086\"><figcaption class=\"wp-caption-text\">Navigationsmen\u00fc Widget<\/figcaption><\/figure>\n<p>Das Hinzuf\u00fcgen eines Navigationsmen\u00fcs in der Fu\u00dfzeile deiner Webseite wird Menschen, die das Ende eines Beitrags erreichen, dazu ermutigen, auf deiner Webseite zu navigieren. Es ist besonders hilfreich f\u00fcr mobile Benutzer, die m\u00f6glicherweise viel scrollen m\u00fcssen, um nach dem Erreichen des Endes eines Beitrags wieder zum <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-menu-plugins\/\">Hauptnavigationsmen\u00fc<\/a> zu gelangen.<\/p>\n<p>Alternativ dazu kannst du das integrierte Kategorien-Widget verwenden, um eine Liste der Kategorien auf deiner Seite anzuzeigen, oder das Tag Cloud Widget, um den Zugriff auf Tag-Archive zu erleichtern.<\/p>\n<h3><strong>5. Medien-Widgets<\/strong><\/h3>\n<p>Durch das <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-medienbibliothek\/\">Hinzuf\u00fcgen von Medien<\/a> zu der Seiten- oder Fu\u00dfzeile wird die Seite zum Leben erweckt und bietet den Benutzern etwas zum Anschauen oder Interagieren.<\/p>\n<p>Mit dem integrierten Bildwidget kannst du jedes beliebige Bild in der Seiten- oder Fu\u00dfleiste anzeigen und es erm\u00f6glicht dir, dieses Bild auch in einen Link zu verwandeln.<\/p>\n<figure style=\"width: 1305px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/Bild-widget.jpg\" alt=\"Bild widget\" width=\"1305\" height=\"1500\"><figcaption class=\"wp-caption-text\">Bild widget<\/figcaption><\/figure>\n<p>Alternativ dazu l\u00e4sst das Video-Widget dich Videos von YouTube oder Vimeo direkt in den Widget-Bereich deiner Webseite streamen. Dies ist besonders n\u00fctzlich, wenn deine Webseite spezielle Widget-Bereiche f\u00fcr die Startseite hat, kann aber auch gut in der Fu\u00dfzeile sein, um die Aufmerksamkeit der Leute zu erregen, wenn sie das Ende eines Posts erreichen.<\/p>\n<h3><strong>6. Social Media Widgets<\/strong><\/h3>\n<p>Wenn du dich mit Menschen, die deine Webseite \u00fcber soziale Medien besuchen, in Verbindung setzen m\u00f6chtest, zeigt dein Social-Media-Feed in der Seitenleiste oder in der Fu\u00dfzeile deiner Webseite den Menschen, dass du in sozialen Medien aktiv bist, und ermutigt sie, dich zu liken oder dir zu folgen.<\/p>\n<p>Eine M\u00f6glichkeit, Zugang zu Social-Media-Widgets f\u00fcr die gr\u00f6\u00dften Plattformen (Facebook, Twitter, Instagram) zu erhalten, ist die Installation des <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/jetpack\/\">Jetpack<\/a>-Plugins, das all diese und viele weitere enth\u00e4lt.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/Jetpack-plugin.jpg\" alt=\"Jetpack Plugin\" width=\"1500\" height=\"1105\"><figcaption class=\"wp-caption-text\">Jetpack Plugin<\/figcaption><\/figure>\n<p>Alternativ dazu haben alle Social-Media-Plattformen ihre eigenen Plugins, die kostenlos \u00fcber das Plugin-Verzeichnis verf\u00fcgbar sind. Oder man findet <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-social-media-plugins\/\">Plugins von Drittanbietern<\/a>, mit denen man die Art und Weise, wie man seinen Social-Media-Feed anzeigt, anpassen kann.<\/p>\n<h3><strong>7. Warenkorb-Widget<\/strong><\/h3>\n<p>Wenn du einen <a href=\"https:\/\/kinsta.com\/de\/blog\/e-commerce-strategien\/\">E-Commerce-Shop<\/a> auf deiner Webseite mit einem Plugin wie <a href=\"https:\/\/kinsta.com\/de\/blog\/woocommerce-tutorial\/\">WooCommerce<\/a> betreibst, ist es eine gute Idee, ein Warenkorb-Widget einzubauen, damit die Benutzer einfach zu ihrem Warenkorb navigieren k\u00f6nnen, egal wo sie sich im Shop befinden.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/einkaufswagen-widget.jpg\" alt=\"Einkaufswagen Widget\" width=\"1500\" height=\"909\"><figcaption class=\"wp-caption-text\">Einkaufswagen Widget<\/figcaption><\/figure>\n<p>Du k\u00f6nntest dies in die Seitenleiste einf\u00fcgen, wo es f\u00fcr die Leute leicht zu sehen ist, oder in die Kopfzeile, um die Sichtbarkeit zu erh\u00f6hen, wenn dein Theme dort einen Widget-Bereich enth\u00e4lt.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-ecommerce-plugins\/\">E-Commerce-Plugins<\/a> wie WooCommerce enthalten Einkaufswagen-Widgets und andere E-Commerce-Widgets als Teil des Plugins. Wenn du also einmal E-Commerce zu deiner Webseite hinzugef\u00fcgt hast, findest du sie auf deinem <strong>Widgets<\/strong>-Bildschirm.<\/p>\n<h3><strong>8. Formular-Widget<\/strong><\/h3>\n<p>Wenn du m\u00f6chtest, dass Leute dich kontaktieren, Fragen stellen oder sich in eine <a href=\"https:\/\/kinsta.com\/de\/blog\/wie-man-eine-e-mail-liste\/\">Mailingliste eintragen<\/a>, kannst du ein Formular in deine Seitenleiste einf\u00fcgen.<\/p>\n<p>Es gibt kein Formular-Widget in WordPress, aber man k\u00f6nnte Plugins hinzuf\u00fcgen, um diese zur Verf\u00fcgung zu stellen, wie z.B. das kostenlose <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-kontaktformular-plugins\/#contact-form-7\">Contact Form 7<\/a> oder die hochwertigen, aber sehr leistungsf\u00e4higen <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-kontaktformular-plugins\/#gravity-forms\">Gravity Forms<\/a>.<\/p>\n<h3><strong>9. Karten-Widget<\/strong><\/h3>\n<p>Wenn dein Unternehmen an einem physischen Standort angesiedelt ist und du m\u00f6chtest, dass dich die Leute leicht finden k\u00f6nnen, hilft es, ein Karten-Widget zu deiner Webseite hinzuzuf\u00fcgen.<\/p>\n<p>Es gibt eine Reihe kostenloser <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/#use-a-wordpress-google-maps-plugin-instead\">Google-Maps-Widget-Plugins<\/a>, die man verwenden kann, z. B. das <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/wp-google-maps\/\">WP-Google-Maps<\/a>-Plugin.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/WP-Google-Maps-plugin.jpg\" alt=\"WP Google Maps Plugin\" width=\"1500\" height=\"1073\"><figcaption class=\"wp-caption-text\">WP Google Maps Plugin<\/figcaption><\/figure>\n<p>Wenn man kein Plugin installieren m\u00f6chte, kann man alternativ den <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-google-maps\/\">Einbettungscode von Google Maps holen<\/a> und diesen einem HTML-Widget hinzuf\u00fcgen.<\/p>\n<h3><strong>10. Anmelde-Widget<\/strong><\/h3>\n<p>Wenn du eine <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-mitgliedschafts-plugins\/\">Mitgliedschafts-Webseite<\/a> betreibst, erleichtert ein Login-Widget den Leuten <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-url-loggst\/\">das Einloggen in deine Webseite<\/a>, ohne dass sie zu einer separaten Login-Seite gehen m\u00fcssen.<\/p>\n<p>Das Meta-Widget, das mit WordPress geliefert wird, enth\u00e4lt einen Login-Link, aber es enth\u00e4lt auch andere Dinge, die man vielleicht nicht m\u00f6chte, daher w\u00fcrde ich empfehlen, daf\u00fcr ein separates Plugin aus dem Plugin-Verzeichnis zu verwenden.<\/p>\n<p>Das <a href=\"https:\/\/wordpress.org\/plugins\/login-with-ajax\/\">Login with Ajax<\/a>-Widget gibt dir ein Login-Formular in deinem Widget, was bedeutet, dass sich die Leute von jeder Seite aus in deine Seite einloggen k\u00f6nnen.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/Login-with-Ajax-widget.jpg\" alt=\"Login with Ajax widget plugin\" width=\"1500\" height=\"883\"><figcaption class=\"wp-caption-text\">Login with Ajax widget plugin<\/figcaption><\/figure>\n<h3><strong>11. Such-Widget<\/strong><\/h3>\n<p>Ein wirklich einfaches, aber unglaublich n\u00fctzliches Widget ist das <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-suche\/\">Such-Widget<\/a>, das mit WordPress vorinstalliert ist.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/Such-widget.jpg\" alt=\"Such widget\" width=\"1500\" height=\"368\"><figcaption class=\"wp-caption-text\">Such widget<\/figcaption><\/figure>\n<p>F\u00fcge dies in deine Seitenleiste oder Kopfzeile ein, und du machst es f\u00fcr die Leute einfacher, Dinge auf deiner Webseite zu finden.<\/p>\n<p>Wenn du die Leistung deines Such-Widgets erh\u00f6hen m\u00f6chtest, kannst du das kostenlose <a href=\"https:\/\/wordpress.org\/plugins\/wp-google-search\/\">WP-Widget Google Search<\/a> installieren, das die Google-Suche verwendet.<\/p>\n<h2><strong>Wie man Widgets zu seiner WordPress-Seite hinzuf\u00fcgt<\/strong><\/h2>\n<p>Sobald man sich f\u00fcr die Art von Widgets entschieden hat, die man f\u00fcr seine WordPress-Seite ben\u00f6tigt, ist es an der Zeit, diese zu installieren.<\/p>\n<p>Lasst euch nicht dazu verleiten, zu viele hinzuzuf\u00fcgen. Je mehr Widgets es gibt, desto weniger werden sie von den Benutzern bemerkt. Konzentriere dich stattdessen auf zwei oder drei Schl\u00fcsselwidgets f\u00fcr die Seitenleiste. Du kannst mehr in die Fu\u00dfzeile einf\u00fcgen, wo sie ohnehin weniger wichtig sind.<\/p>\n<p>Und wenn du zus\u00e4tzliche Widget-Bereiche in <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-installiert\/\">deinem Theme<\/a> hast, entscheide, welche Widgets du in diese einf\u00fcgen m\u00f6chtest. Stelle sicher, dass sie zum Layout und <a href=\"https:\/\/kinsta.com\/de\/blog\/webdesign-trends\/\">Design deiner Webseite<\/a> passen.<\/p>\n<p>Es gibt drei M\u00f6glichkeiten, Widgets hinzuzuf\u00fcgen:<\/p>\n<ul>\n<li>Verwende die Widgets, die bereits mit WordPress geliefert werden.<\/li>\n<li>F\u00fcge ein Widget eines Drittanbieters aus dem <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-plugin-verzeichnis-veroeffentlicht\/\">Plugins-Verzeichnis<\/a><\/li>\n<li>Kaufe ein Premium-Plugin, das ein Widget enth\u00e4lt.<\/li>\n<\/ul>\n<h3><strong>Widgets f\u00fcr deine WordPress-Seite finden<\/strong><\/h3>\n<p>Es gibt eine gro\u00dfe Auswahl an verf\u00fcgbaren Widgets, so dass es schwierig sein kann, sich f\u00fcr eines zu entscheiden. Lasst uns einen Blick auf die Optionen werfen und dann pr\u00fcfen, wie du das beste f\u00fcr dich ausw\u00e4hlen kannst.<\/p>\n<h4><strong>Widgets, die mit WordPress geliefert werden<\/strong><\/h4>\n<p>Wenn eines der vorinstallierten Widgets das tut, was du brauchst, dann benutze es. Das spart Zeit, und es bedeutet, dass weniger Code auf deiner Webseite l\u00e4uft.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/Vorinstallierte-WordPress-Widgets.jpg\" alt=\"Vorinstallierte WordPress Widgets\" width=\"1500\" height=\"1158\"><figcaption class=\"wp-caption-text\">Vorinstallierte WordPress Widgets<\/figcaption><\/figure>\n<p>Die vorinstallierten Widgets sind:<\/p>\n<ul>\n<li><strong>Archive<\/strong>: Link zu den Archiven nach Monat, f\u00fcr Blogs konzipiert, aber inzwischen eher veraltet.<\/li>\n<li><strong>Kalender<\/strong>: ein Kalender deiner Beitr\u00e4ge, wiederum geeignet f\u00fcr Blogs, besonders wenn deiner zeitkritisch ist (aber heutzutage nicht so h\u00e4ufig).<\/li>\n<li><strong>Benutzerdefiniertes HTML<\/strong>: die ultimative Flexibilit\u00e4t, f\u00fcge beliebige Inhalte durch Eintippen oder Einf\u00fcgen in das HTML ein (wie <a href=\"https:\/\/kinsta.com\/de\/blog\/einbindet-google-formular\/\">Google-Formulare<\/a>). Vermeide es, wenn du dich mit der Programmierung nicht wohl f\u00fchlst.<\/li>\n<li><strong>Bild<\/strong>: <a href=\"https:\/\/kinsta.com\/de\/blog\/optimiert-bilder-fur-web\/\">Zeige ein Bild<\/a> aus deiner Medienbibliothek an.<\/li>\n<li><strong>Navigationsmen\u00fc<\/strong>: Zeige das Hauptnavigationsmen\u00fc oder ein separates, von dir erstelltes Men\u00fc an.<\/li>\n<li><strong>Letzte Kommentare<\/strong>: eine Liste der letzten Kommentare mit Links zu diesen.<\/li>\n<li><strong>Tag Cloud<\/strong>: eine Liste von Tags in einem Cloudformat, mit Links zu den entsprechenden Archiven.<\/li>\n<li><strong>Video<\/strong>: <a href=\"https:\/\/kinsta.com\/de\/blog\/einbettung-youtube-video-wordpress\/\">ein Video von YouTube<\/a> oder einem anderen Streaming-Dienst einbetten.<\/li>\n<li><strong>Audio<\/strong>: einen Podcast, einen <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-audiospieler\/\">Player<\/a>, ein Lied oder andere Audioclips einbetten (Vorschlag: <a href=\"https:\/\/kinsta.com\/de\/blog\/podcast-wordpress\/\">Wie starte ich einen Podcast mit WordPress<\/a>).<\/li>\n<li><strong>Kategorien<\/strong>: eine Liste der <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-audiospieler\/\">Kategorien in deinem Blog<\/a>, mit Links zu den Archivseiten.<\/li>\n<li><strong>Galerie<\/strong>: fortgeschrittener als das Bildwidget, zeige eine <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-fotogalerie-plugins\/\">Bildergalerie<\/a><\/li>\n<li><strong>Meta<\/strong>: Metadaten wie <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-url-loggst\/\">Login-Links<\/a> und <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-rss-feed\/\">RSS-Feeds<\/a>. Ein \u00dcberbleibsel aus den fr\u00fchen Tagen von WordPress und heute nicht mehr sehr n\u00fctzlich.<\/li>\n<li><strong>Seiten<\/strong>: Zeige eine Liste der Seiten deiner Webseite mit Links an.<\/li>\n<li><strong>Neueste Beitr\u00e4ge:<\/strong> Zeige eine Liste deiner neuesten Beitr\u00e4ge an, um die Leute zum Lesen zu ermutigen.<\/li>\n<li><strong>Suche<\/strong>: ein einfaches Suchfeld.<\/li>\n<li><strong>Text<\/strong>: jeder Text, den du hinzuf\u00fcgen m\u00f6chtest, z.B. Informationen \u00fcber die Webseite.<\/li>\n<\/ul>\n<h3><strong>Hinzuf\u00fcgen von Widgets mit einem Plugin<\/strong><\/h3>\n<p>Das WordPress-Plugin-Verzeichnis enth\u00e4lt tausende von kostenlosen Widgets-Plugins, die dir mehr Widgets zur Auswahl bieten.<\/p>\n<p>Dar\u00fcber hinaus enthalten viele andere Plugins auch Widgets, wie z.B. ein E-Commerce-Plugin, das dir ein <a href=\"https:\/\/kinsta.com\/de\/blog\/woocommerce-templates\/\">Warenkorb-Widget und mehr<\/a> bietet.<\/p>\n<p>Wenn das Plugin-Verzeichnis nicht das von dir ben\u00f6tigte Plugin enth\u00e4lt, kannst du dich entscheiden, ein Premium-Plugin hinzuzuf\u00fcgen. Manchmal bieten diese mehr Funktionen oder eine intuitivere Schnittstelle. Aber manchmal findet man die gleichen Funktionen auch in einem kostenlosen Plugin, also suche das Plugin-Verzeichnis gut durch, bevor du f\u00fcr Plugins bezahlst.<\/p>\n<h4><strong>Wie man das richtige Widget f\u00fcr seine Webseite findet<\/strong><\/h4>\n<p>Um das richtige WordPress Widget f\u00fcr sich zu finden, folge diesen Tipps:<\/p>\n<ol>\n<li>Identifiziere genau, was du von dem Widget ben\u00f6tigst. Welche Funktionalit\u00e4t muss es haben und wie soll es aussehen? Muss es mit APIs von Drittanbietern verkn\u00fcpft werden?<\/li>\n<li>\u00dcberpr\u00fcfe die integrierten Widgets, um zu sehen, ob eines deinen Bed\u00fcrfnissen entspricht. Teste alle relevanten Widgets, wenn du ein geeignetes findest, ist das gro\u00dfartig. Wenn nicht&#8230;<\/li>\n<li>Pr\u00fcfe das Plugin-Verzeichnis, auf das du \u00fcber <strong>Plugins &gt; Add New<\/strong> zugreifen kannst. Versuche, nach mehr als einem Begriff zu suchen, um das richtige Plugin f\u00fcr dich zu finden, und suche mit und ohne das Wort &#8218;Widget&#8216;. Manchmal enth\u00e4lt ein Plugin, das nicht auf Widgets ausgerichtet ist, ein Widget als Teil eines gr\u00f6\u00dferen Funktionsumfangs.<\/li>\n<li>Wenn du unter den kostenlosen Plugins nichts Passendes finden kannst, suche nach einem <a href=\"https:\/\/kinsta.com\/de\/blog\/kostenlose-vs-kostenpflichtige-wordpress-themes\/\">Premium-Plugin<\/a>. Bitte andere WordPress-Benutzer um Empfehlungen und sehe dir die Bewertungen an, bevor du dich f\u00fcr ein Plugin entscheidest.<\/li>\n<\/ol>\n<p>Welches Widget man auch immer w\u00e4hlt, man muss es testen, um zu \u00fcberpr\u00fcfen, ob es so funktioniert, wie man es sich w\u00fcnscht. Wenn du ein Premium-Plugin kaufst, empfehle ich dir, ein Plugin mit Geld-zur\u00fcck-Garantie oder eine kostenlose Testphase zu kaufen, falls es nicht das Richtige f\u00fcr dich ist.<\/p>\n<h3><strong>Wie man Widgets zur Seitenleiste und Fu\u00dfzeile in WordPress hinzuf\u00fcgt<\/strong><\/h3>\n<p>Jetzt, wo du dein Widget ausgew\u00e4hlt hast, ist es an der Zeit, es zu deiner Webseite hinzuzuf\u00fcgen.<\/p>\n<p>Du kannst Widgets zu allen aktiven Widget-Bereichen hinzuf\u00fcgen, die von deinem Theme bereitgestellt werden. Wenn dein Theme an der gew\u00fcnschten Stelle keinen Widget-Bereich hat, versuche, nach einem <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-andern\/\">alternativen Theme<\/a> zu suchen.<\/p>\n<p>Sp\u00e4ter in diesem Beitrag werde ich dir zeigen, wie du deinen eigenen Widget-Bereich programmieren kannst.<\/p>\n<p>Es gibt zwei M\u00f6glichkeiten, Widgets zu deiner Webseite hinzuzuf\u00fcgen:<\/p>\n<ul>\n<li>Mit Hilfe des <a href=\"https:\/\/kinsta.com\/de\/blog\/wie-du-dein-wordpress-theme-anpasst\/\">Customizers<\/a>. Gehe im Admin-Men\u00fc auf <strong>Darstellung &gt; Anpassen &gt; Widgets<\/strong> oder <strong>Anpassen &gt; Widgets<\/strong> aus der Admin-Leiste am oberen Bildschirmrand.<\/li>\n<li>\u00dcber den Widgets-Administrationsbildschirm. Gehe zu <strong>Darstellung &gt; Widgets<\/strong> im Admin-Men\u00fc oder klicke in der Admin-Leiste auf <strong>Anpassen &gt; Widgets<\/strong>.<\/li>\n<\/ul>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/Widgets-im-Customizer.jpg\" alt=\"Widgets im Customizer\" width=\"1500\" height=\"801\"><figcaption class=\"wp-caption-text\">Widgets im Customizer<\/figcaption><\/figure>\n<p>Ich werde euch in K\u00fcrze zeigen, wie man diese beiden Methoden anwendet, aber lasst uns zuerst einen Blick auf die Widget-Bereiche werfen und wie ihr die mit eurem Theme nutzen k\u00f6nnt.<\/p>\n<h4>Widgets sind nicht nur f\u00fcr die Sidebar<\/h4>\n<p>Je nach deinem <a href=\"https:\/\/kinsta.com\/de\/blog\/schnellsten-wordpress-theme\/\">WordPress-Theme<\/a> kannst du Widget-Bereiche an mehreren Stellen finden.<\/p>\n<p>Die meisten Themes haben Widget-Bereiche in der Seitenleiste und in der Fu\u00dfzeile. Einige haben sie aber auch an anderen Stellen, wie unter oder \u00fcber dem Inhalt oder in der Kopfzeile.<\/p>\n<p>Wenn du in der <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-admin\/\">WordPress-Administration<\/a> den Bildschirm mit den Widget-Einstellungen aufrufst, kannst du alle Widget-Bereiche in deinem Theme sehen.<\/p>\n<p>Ich verwende ein Theme mit mehreren Widget-Bereichen an vielen Stellen. Im untenstehenden Screenshot sieht man, dass es Widget-Bereiche \u00fcber und unter dem Inhalt, in der Kopfzeile, unter der Hauptfu\u00dfzeile gibt.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/widget-einstellungen-widget-bereiche.jpg\" alt=\"Widget Einstellungen, Widget Bereiche\" width=\"1500\" height=\"731\"><figcaption class=\"wp-caption-text\">Widget Einstellungen, Widget Bereiche<\/figcaption><\/figure>\n<p>Wenn man Widgets an anderen Stellen auf der Webseite hinzuf\u00fcgen m\u00f6chte, ist es sinnvoll, ein Theme zu finden, das mehrere Widget-Bereiche hat. Die beste M\u00f6glichkeit dazu ist die Verwendung eines <a href=\"https:\/\/kinsta.com\/de\/blog\/wie-du-dein-wordpress-theme-anpasst\/#using-page-builders-and-frameworks-to-customize-your-wordpress-theme\">Framework-Themes<\/a>.<\/p>\n<p>Ein gutes Beispiel f\u00fcr ein Widget an einer Stelle in dem Theme, die nicht die Seitenleiste oder die Fu\u00dfzeile ist, ist das Hinzuf\u00fcgen einer Suchleiste in der Kopfzeile, wie ich sie auf einer meiner Webseite habe.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/suchleiste-in-der-kopfzeile.jpg\" alt=\"Suchleiste in der Kopfzeile\" width=\"1500\" height=\"409\"><figcaption class=\"wp-caption-text\">Suchleiste in der Kopfzeile<\/figcaption><\/figure>\n<h4><strong>Widget Bereiche und Themes<\/strong><\/h4>\n<p>Widget-Bereiche sind in den Themevorlagendateien sowie in der Themefunktionsdatei programmiert.<\/p>\n<p>Hier sieht man den Code, den ich in meiner Themefunktionsdatei verwendet habe, um einen Widget-Bereich hinzuzuf\u00fcgen, der in den Header geht.<br \/>\nHere you can see the code I&#8217;ve used in my theme functions file to add a widget area that will go in the header.<\/p>\n<pre><code class=\"language-php\">register_sidebar( array(\n 'name' =&gt; __( 'In Header Widget Area', 'rmccollin' ),\n 'id' =&gt; 'in-header-widget-area',\n 'description' =&gt; __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),\n 'before_widget' =&gt; '&lt;div id=\"%1$s\" class=\"widget-container %2$s\"&gt;',\n 'after_widget' =&gt; '&lt;\/div&gt;',\n 'before_title' =&gt; '&lt;h3 class=\"widget-title\"&gt;',\n 'after_title' =&gt; '&lt;\/h3&gt;',\n) );<\/code><\/pre>\n<p>Und hier ist der Code in meiner Datei header.php, der diesen Widget-Bereich an der richtigen Stelle im Theme hinzuf\u00fcgt.<\/p>\n<pre><code class=\"language-php\">if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?&gt;\n\n &lt;aside class=\"in-header widget-area right\" role=\"complementary\"&gt;\n  &lt;?php dynamic_sidebar( 'in-header-widget-area' ); ?&gt;\n &lt;\/aside&gt;\n\n&lt;?php }<\/code><\/pre>\n<p>Wenn man zus\u00e4tzliche Widget-Bereiche in seinem Theme hinzuf\u00fcgen m\u00f6chte, muss man dieselbe Art von Code hinzuf\u00fcgen. Ich werde dir sp\u00e4ter in diesem Beitrag zeigen, wie man das macht.<\/p>\n<p>Vergiss nicht, dass, wenn dein Theme nicht so viele Widget-Bereiche hat, wie du gerne h\u00e4ttest, du immer eine von zwei Sachen machen kannst:<\/p>\n<ul>\n<li>Finde ein Theme, das Widget-Bereiche hat, wo du sie haben willst.<\/li>\n<li>Programmiere den neuen Widget-Bereich in dein Theme oder in das <a href=\"https:\/\/kinsta.com\/de\/blog\/child-theme-wordpress-erstellen\/\">Child-Theme<\/a><\/li>\n<\/ul>\n<p>Sobald du an allen gew\u00fcnschten Stellen in deinem Theme Widget-Bereiche hast, kannst du damit beginnen, ihnen Widgets hinzuzuf\u00fcgen.<\/p>\n<h4><strong>Wie man den Widgets Screen zum Hinzuf\u00fcgen von Widgets verwendet<\/strong><\/h4>\n<p>Es gibt zwei M\u00f6glichkeiten, Widgets zu deiner WordPress-Seite hinzuzuf\u00fcgen. Die erste M\u00f6glichkeit ist die Verwendung des Widgets-Bildschirms im WordPress-Admin.<\/p>\n<p>Klicke auf <strong>Darstellung &gt; Widgets<\/strong>. Dadurch wird der Widget Screen angezeigt.<\/p>\n<figure id=\"attachment_65267\" aria-describedby=\"caption-attachment-65267\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65267 size-full\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/Widgets-Screen.jpg\" alt=\"Widgets Screen\" width=\"1500\" height=\"594\"><figcaption id=\"caption-attachment-65267\" class=\"wp-caption-text\">Widgets Screen<\/figcaption><\/figure>\n<p>Um ein Widget hinzuzuf\u00fcgen, kannst du eines von zwei Dingen tun:<\/p>\n<ul>\n<li>Ziehe es aus der Liste der Widgets auf der linken Seite in den entsprechenden Widgetbereich.<\/li>\n<li>Klicke auf das Widget, das du hinzuf\u00fcgen m\u00f6chtest, und du siehst eine Liste, wo du es hinzuf\u00fcgen kannst. W\u00e4hle den gew\u00fcnschten Widgetbereich aus und klicke auf die Schaltfl\u00e4che <strong>Add Widget<\/strong>.<\/li>\n<\/ul>\n<figure id=\"attachment_65270\" aria-describedby=\"caption-attachment-65270\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65270 size-full\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/auswahlen-eines-widget-bereichs-und-widgets.jpg\" alt=\"Ausw\u00e4hlen eines Widget-Bereichs und Widgets\" width=\"1500\" height=\"1234\"><figcaption id=\"caption-attachment-65270\" class=\"wp-caption-text\">Ausw\u00e4hlen eines Widget-Bereichs und Widgets<\/figcaption><\/figure>\n<p>Eventuell muss dann bearbeitet werden, wo das Widget innerhalb des Widgetbereichs positioniert ist.<\/p>\n<p>Du kannst so viele Widgets zu jedem Widgetbereich hinzuf\u00fcgen, wie du willst, aber \u00fcbertreibe es nicht. Du kannst sie innerhalb des Widget-Bereichs herumziehen, um sie in die richtige Reihenfolge zu bringen. Du kannst sie auch von einem Widgetbereich in einen anderen ziehen, wenn dir ihr Aussehen nicht gef\u00e4llt.<\/p>\n<p>Du kannst auch deine Tastatur benutzen, um Widgets \u00fcber den Widgets-Bildschirm hinzuzuf\u00fcgen. Wenn du also keinen Zugang zu einer Maus hast, kannst du trotzdem Widgets hinzuf\u00fcgen.<\/p>\n<h4><strong>Hinzuf\u00fcgen und Bearbeiten von Widgets im Zug\u00e4nglichkeitsmodus<\/strong><\/h4>\n<p>Wenn man keine Maus verwenden kann, kann man den Widgets-Bildschirm mit einer Tastatur verwenden.<\/p>\n<p>Bringe zun\u00e4chst den Bildschirm in den Zug\u00e4nglichkeitsmodus, indem du auf den Link <strong>Zug\u00e4nglichkeitsmodus aktivieren<\/strong> oben rechts auf dem Bildschirm klickst (oder mit der Tabulatortaste ansprichst und ausw\u00e4hlst).<\/p>\n<figure id=\"attachment_65271\" aria-describedby=\"caption-attachment-65271\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65271 size-full\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/link-zum-zuganglichkeitsmodus.jpg\" alt=\"Link zum Zug\u00e4nglichkeitsmodus\" width=\"1500\" height=\"666\"><figcaption id=\"caption-attachment-65271\" class=\"wp-caption-text\">Link zum Zug\u00e4nglichkeitsmodus<\/figcaption><\/figure>\n<p>Der Bildschirm wird dann so ge\u00e4ndert, dass er die Tatsache widerspiegelt, dass man sich im Zug\u00e4nglichkeitsmodus befindet.<\/p>\n<figure id=\"attachment_65272\" aria-describedby=\"caption-attachment-65272\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65272 size-full\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/zuganglichkeitsmodus-widgets-screen.jpg\" alt=\"Zug\u00e4nglichkeitsmodus f\u00fcr den Widgets-Screen\" width=\"1500\" height=\"737\"><figcaption id=\"caption-attachment-65272\" class=\"wp-caption-text\">Zug\u00e4nglichkeitsmodus f\u00fcr den Widgets-Screen<\/figcaption><\/figure>\n<p>Du kannst dann mit der <strong>Tabulatortaste<\/strong> auf deiner Tastatur zwischen den Elementen des Bildschirms navigieren und mit der Eingabetaste ein Element ausw\u00e4hlen und darauf reagieren. Du kannst entweder mit der Tabulatortaste zu einem Widget gehen, <strong>Return<\/strong> auf dem Link <strong>Hinzuf\u00fcgen<\/strong> dr\u00fccken und dann ausw\u00e4hlen, wo du es hinzuf\u00fcgen m\u00f6chtest, oder mit der Tabulatortaste zum Widget-Bereich gehen und Return auf dem Link <strong>Bearbeiten<\/strong> dr\u00fccken.<\/p>\n<h4><strong>Wie man den WordPress Customizer zum Hinzuf\u00fcgen von Widgets verwendet<\/strong><\/h4>\n<p>Wenn man den Customizer zum Hinzuf\u00fcgen von Widgets anstelle des Widgets-Bildschirms verwendet, bedeutet dies, dass man die Widgets beim Hinzuf\u00fcgen sehen kann. Dies erleichtert es dir, zu sehen, wie deine Widgets aussehen werden, und sie zwischen den Widget-Bereichen zu verschieben, wenn du das m\u00f6chtest.<\/p>\n<p>Klicke im Admin-Men\u00fc auf <strong>Darstellung &gt; Anpassen<\/strong>. Alternativ dazu reicht ein Klick in der Verwaltungsleiste am oberen Bildschirmrand der Live-Site (vorausgesetzt, man ist angemeldet) auf <strong>Anpassen<\/strong>. Dadurch wird der Customizer ge\u00f6ffnet.<\/p>\n<figure id=\"attachment_65274\" aria-describedby=\"caption-attachment-65274\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65274 size-full\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/WordPress-admin-leiste.jpg\" alt=\"WordPress Admin Leiste\" width=\"1500\" height=\"377\"><figcaption id=\"caption-attachment-65274\" class=\"wp-caption-text\">WordPress Admin Leiste<\/figcaption><\/figure>\n<p>Jetzt klicke auf die Option <strong>Widgets<\/strong> und du wirst eine Liste aller Widget-Bereiche in deinem Theme sehen. Klicke auf den Widget-Bereich, zu dem du ein Widget hinzuf\u00fcgen m\u00f6chtest, und klicke auf die Schaltfl\u00e4che <strong>Add a widget<\/strong>.<\/p>\n<p>Dadurch erh\u00e4lt man eine Liste aller f\u00fcr deine Webseite verf\u00fcgbaren Widgets. Dazu geh\u00f6ren alle integrierten Widgets, die mit WordPress geliefert wurden, sowie alle Widgets, die du \u00fcber Plugins hinzugef\u00fcgt hast.<\/p>\n<figure id=\"attachment_65275\" aria-describedby=\"caption-attachment-65275\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65275 size-full\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/Add-a-widget-button.jpg\" alt=\"Add a widget button\" width=\"1500\" height=\"760\"><figcaption id=\"caption-attachment-65275\" class=\"wp-caption-text\">Add a widget Button<\/figcaption><\/figure>\n<p>W\u00e4hle das Widget aus, das du diesem Widgetbereich hinzuf\u00fcgen m\u00f6chtest, und du siehst es im Vorschaubildschirm auf der rechten Seite.<\/p>\n<p>Du kannst die Widgets <strong>neu ordnen<\/strong>, indem du sie auf der linken Seite nach oben und unten ziehst oder indem du auf den Link Neu ordnen unter der Liste der Widgets klickst und dann auf die Pfeile klickst, um sie nach oben und unten zu verschieben.<\/p>\n<figure id=\"attachment_65276\" aria-describedby=\"caption-attachment-65276\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65276 size-full\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/bearbeiten-von-widgets-im-customizer.jpg\" alt=\"Bearbeiten von Widgets im Customizer\" width=\"1500\" height=\"551\"><figcaption id=\"caption-attachment-65276\" class=\"wp-caption-text\">Bearbeiten von Widgets im Customizer<\/figcaption><\/figure>\n<p>Wenn du mit dem Hinzuf\u00fcgen von Widgets \u00fcber den Customizer fertig bist, vergiss nicht, auf die Schaltfl\u00e4che <strong>Ver\u00f6ffentlichen<\/strong> oben links zu klicken, damit deine \u00c4nderungen gespeichert werden. Wenn du den Customizer verl\u00e4sst, ohne dies zu tun, wird keine deiner \u00c4nderungen auf der Live-Site reflektiert.<\/p>\n<p>Sobald du deine Widgets hinzugef\u00fcgt hast, schau sie dir bitte an und \u00fcberpr\u00fcfe, wie sie in das Design deiner Seite passen. Wenn du zu viele Widget-Bereiche hinzugef\u00fcgt hast, k\u00f6nnte es etwas unordentlich aussehen. Du musst entweder einige von ihnen entfernen oder du kannst sie von einem Widget-Bereich in einen anderen verschieben.<\/p>\n<p>Das geht ganz einfach auf dem Bildschirm Widgets, wo man Widgets zwischen den Widget-Bereichen ziehen kann.<\/p>\n<h4><strong>Wie man Widgets zu einer Seite in WordPress hinzuf\u00fcgt<\/strong><\/h4>\n<p>Einige Themes umfassen Widget-Bereiche, die nur f\u00fcr bestimmte Seiten bestimmt sind, wie die Homepage. Aber was ist, wenn man ein Widget nur f\u00fcr eine Seite auf der eigenen Webseite hinzuf\u00fcgen m\u00f6chte?<\/p>\n<p>Du kannst dies im <a href=\"https:\/\/kinsta.com\/de\/blog\/gutenberg-wordpress-editor\/\">Gutenberg<\/a>-Post- und Seiteneditor tun.<\/p>\n<p>F\u00fcge einen neuen Block auf die \u00fcbliche Weise hinzu und w\u00e4hle dann den Blocktyp <strong>Widgets<\/strong>.<\/p>\n<figure id=\"attachment_65277\" aria-describedby=\"caption-attachment-65277\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65277 size-full\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/Widget-block-typ.jpg\" alt=\"Widget Block Typ\" width=\"1500\" height=\"1393\"><figcaption id=\"caption-attachment-65277\" class=\"wp-caption-text\">Widget Block Typ<\/figcaption><\/figure>\n<p>Du kannst dann aus vielen der Widgets, die du f\u00fcr deine Webseite aktiviert hast, ausw\u00e4hlen und sie zum Inhalt deines Beitrags oder deiner Seite hinzuf\u00fcgen. Es ist wirklich n\u00fctzlich, wenn du ein Formular-Widget, ein Aktionsaufruf-Widget oder eine Liste deiner letzten Beitr\u00e4ge hinzuf\u00fcgen m\u00f6chtest.<\/p>\n<h3><strong>Wie man Widgets bearbeitet<\/strong><\/h3>\n<p>Sobald man Widgets zu seiner Webseite hinzugef\u00fcgt hat, kann man \u00c4nderungen an ihnen vornehmen. F\u00fcr einzelne Widgets gibt es Einstellungen, auf die du entweder \u00fcber den Widgets-Bildschirm oder den Customizer zugreifen kannst (es spielt keine Rolle, welche dieser Einstellungen du zum Hinzuf\u00fcgen des Widgets verwendet hast).<\/p>\n<p>Einige Widgets enthalten keine Einstellungen, aber andere haben Einstellungen f\u00fcr den Widgettitel oder die Anzahl der angezeigten Beitr\u00e4ge. Einige sind komplizierter und erfordern, dass man das Widget auf einer separaten Einstellungsseite einrichtet. Pr\u00fcfe die Dokumentation des Entwicklers deines Plugins.<\/p>\n<p>Die Optionen, die du f\u00fcr die Bearbeitung von Widgets hast, umfassen<\/p>\n<ul>\n<li>Bearbeiten der Einstellungen f\u00fcr das Plugin.<\/li>\n<li>Verschieben des Widgets von einem Widgetbereich in einen anderen.<\/li>\n<li>Entfernen des Widgets. Dazu hast du zwei Optionen, die wir uns in K\u00fcrze ansehen werden.<\/li>\n<\/ul>\n<p>Um die Einstellungen f\u00fcr das Widget zu bearbeiten, suche das Widget im Widget-Bildschirm oder im Customizer und bearbeite einfach alle angebotenen Optionen.<\/p>\n<figure id=\"attachment_65278\" aria-describedby=\"caption-attachment-65278\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65278 size-full\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/widget-optionen-zum-bearbeiten.jpg\" alt=\"Widget Optionen zum bearbeiten\" width=\"1500\" height=\"1154\"><figcaption id=\"caption-attachment-65278\" class=\"wp-caption-text\">Widget Optionen zum bearbeiten<\/figcaption><\/figure>\n<p>Um das Widget von einem Bereich in einen anderen zu verschieben, \u00f6ffne den Widget-Bildschirm und ziehe es von einem Widget-Bereich in einen anderen. Navigiere im Zug\u00e4nglichkeitsmodus zum Pfeil rechts neben dem Widget und w\u00e4hle aus den Optionen aus.<\/p>\n<h4><strong>L\u00f6schen von Widgets<\/strong><\/h4>\n<p>Um ein Widget auf dem Bildschirm Widgets zu l\u00f6schen, suche dieses Widget und klicke auf den L\u00f6sch-Link unten links im Feld Widget-Einstellungen.<\/p>\n<figure id=\"attachment_65280\" aria-describedby=\"caption-attachment-65280\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65280 size-full\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/widget-im-widget-bildschirm-loschen.jpg\" alt=\"Ein Widget im Widget Bildschirm l\u00f6schen\" width=\"1500\" height=\"810\"><figcaption id=\"caption-attachment-65280\" class=\"wp-caption-text\">Ein Widget im Widget Bildschirm l\u00f6schen<\/figcaption><\/figure>\n<p>Um ein Widget im Customizer zu l\u00f6schen, suche das Widget in seinem Widget-Bereich. Klicke auf den Pfeil rechts neben dem Namen des Widgets und dann auf den Link <strong>Entfernen<\/strong> links unten in den Widget-Einstellungen.<\/p>\n<figure id=\"attachment_65281\" aria-describedby=\"caption-attachment-65281\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65281 size-full\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/entfernen-eines-widgets-im-customizer.jpg\" alt=\"Entfernen eines Widgets im Customizer\" width=\"1500\" height=\"1093\"><figcaption id=\"caption-attachment-65281\" class=\"wp-caption-text\">Entfernen eines Widgets im Customizer<\/figcaption><\/figure>\n<p>Du kannst auch ein Widget aus einem Widgetbereich entfernen, es aber trotzdem f\u00fcr eine sp\u00e4tere Verwendung \u00fcber den Widgetbildschirm verf\u00fcgbar machen.<\/p>\n<p>Scrolle zum Bereich <strong>Inaktive Widgets<\/strong> am unteren Bildschirmrand. Ziehe die Widgets in diesen Bereich, um sie aus dem Widget-Bereich zu entfernen, aber mit ihren aktuellen Einstellungen als Entw\u00fcrfe zu behalten. Du kannst sie dann jederzeit wieder in einen Widget-Bereich ziehen, wenn du das in Zukunft m\u00f6chtest.<\/p>\n<p>Wenn du <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-andern\/\">das Theme wechselst<\/a> und dein neues Theme andere Widget-Bereiche hat, werden alle Widgets, die nicht in die Widget-Bereiche des neuen Themes passen, von WordPress automatisch in die Liste der inaktiven Widgets verschoben.<\/p>\n<h2><strong>Wie man einen neuen Widget Bereich zu seinem Theme hinzuf\u00fcgt<\/strong><\/h2>\n<p>Wenn dein Theme keine Widget-Bereiche hat, wo du sie haben willst, kannst du jederzeit deine eigenen hinzuf\u00fcgen. Dazu muss man zwei Teile des Codes hinzuf\u00fcgen.<\/p>\n<p>F\u00fcgen wir einen Widget-Bereich unterhalb des Inhalts hinzu.<\/p>\n<h3>Erstellen des Widget-Bereichs in deiner Themefunktionsdatei<\/h3>\n<p>Der erste Schritt ist das Einrichten des Widget-Bereichs mit der Funktion <code>register_widget()<\/code>.<\/p>\n<p>Wenn du ein WordPress-Theme eines Drittanbieters verwendest (hier ist <a href=\"https:\/\/kinsta.com\/de\/blog\/schnellsten-wordpress-theme\/\">eine Auswahl der besten<\/a>), musst du daf\u00fcr ein Child-Theme erstellen. Der Grund daf\u00fcr ist, dass alle deine \u00c4nderungen verloren gehen, wenn du das <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-aktualisiert\/\">Theme in der Zukunft aktualisierst<\/a>.<\/p>\n<p>Wenn du mit deinem eigenen Theme arbeitest, kannst du das Theme einfach bearbeiten.<\/p>\n<p>Beginne damit, die Datei <strong>functions.php<\/strong> deines Themes zu \u00f6ffnen. F\u00fcge am Ende der Datei diesen Code hinzu.<\/p>\n<pre><code class=\"language-php\">function kinsta_register_widgets() {\n \n register_sidebar( array(\n\u00a0 'name' =&gt; __( 'After Content Widget Area', 'kinsta' ),\n  'id' =&gt; 'after-content-widget-area',\n  'description' =&gt; __( 'Widget area after the content', 'kinsta' ),\n  'before_widget' =&gt; '&lt;div id=\"%1$s\" class=\"widget-container %2$s\"&gt;',\n  'after_widget' =&gt; '&lt;\/div&gt;',\n  'before_title' =&gt; '&lt;h3 class=\"widget-title\"&gt;',\n  'after_title' =&gt; '&lt;\/h3&gt;',\n\n ) );\n\n}\n\nadd_action( 'widgets_init', 'kinsta_register_widgets' );<\/code><\/pre>\n<p>Speichere jetzt deine functions.php-Datei. Wenn du zu deinem Widgets-Bildschirm oder dem Customizer gehst, findest du den neuen Widget-Bereich, der dir zum Hinzuf\u00fcgen von Widgets zur Verf\u00fcgung steht.<\/p>\n<p>Aber wenn man das tut, werden sie nicht wirklich auf der Seite angezeigt. Das liegt daran, dass du etwas Code zu deiner Themevorlagendatei hinzuf\u00fcgen musst.<\/p>\n<p><strong>Das Widget zu einer Themevorlagendatei hinzuf\u00fcgen<\/strong><\/p>\n<p>Als erstes muss herausgefunden werden, welche Themevorlagendatei du verwenden musst.<\/p>\n<ul>\n<li>Wenn du eine zus\u00e4tzliche Seitenleiste hinzuf\u00fcgst, dann musst du diesen Code zu deiner Datei <strong>php<\/strong> hinzuf\u00fcgen.<\/li>\n<li>Wenn du deinen Widget-Bereich vor oder nach dem Inhalt hinzuf\u00fcgst, musst du ihn zu den Themevorlagendateien hinzuf\u00fcgen, die den Inhalt ausgeben.<\/li>\n<li>Wenn du einen Widget-Bereich zu deinem Header hinzuf\u00fcgst, musst du den Code zu deiner header.php-Datei hinzuf\u00fcgen.<\/li>\n<li>Wenn dein neuer Widget-Bereich nur f\u00fcr eine Seite deiner Webseite oder f\u00fcr eine Art von Inhalt bestimmt ist, musst du die <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/template-hierarchy\/\">WordPress-Template-Hierarchie<\/a> verwenden, um genau herauszufinden, welche Template-Datei du entweder verwenden\/erstellen und dann bearbeiten musst. Wenn du zum Beispiel Widget-Bereiche zu deiner Homepage hinzuf\u00fcgen m\u00f6chtest, musst du eine Datei namens <strong>front-page.php<\/strong> erstellen und dort deinen Widget-Bereich hinzuf\u00fcgen.<\/li>\n<\/ul>\n<p>Wenn du herausgefunden hast, welche Vorlagendatei du bearbeiten musst und wo genau du den Code f\u00fcr den Widgetbereich haben musst, f\u00fcge den folgenden Code hinzu. Im Falle eines Widget-Bereichs nach dem Inhalt f\u00fcgen wir ihn der Datei <strong>post.php<\/strong> und <strong>page.php<\/strong> in unserem Theme hinzu:<\/p>\n<pre><code class=\"language-php\">if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?&gt;\n\n aside class=\"after-content widget-area full-width\" role=\"complementary\"&gt;\n  &lt;?php dynamic_sidebar( 'after-content-widget-area' ); ?&gt;\n &lt;\/aside&gt;\n\n&lt;?php }<\/code><\/pre>\n<p>Speicher nun deine Vorlagendatei(en).<\/p>\n<p>Beachte, dass sich dein Code von meinem unterscheidet, je nachdem, wie du deinen Widgetbereich genannt hast und welche Elemente du darin platzieren m\u00f6chtest. Ich benutze im Allgemeinen ein <strong>Neben<\/strong>element, weil sie meiner Meinung nach f\u00fcr Seitenleisten und Widget-Bereiche konzipiert sind.<\/p>\n<p>Ninja-Tipp: Wenn man das Ende des Containerelements f\u00fcr den Inhalt an den Anfang der Seitenleiste und\/oder der Fu\u00dfzeile verschiebt, dann kann man es dort einf\u00fcgen und muss es nur einmal hinzuf\u00fcgen.<\/p>\n<p>Wenn du dir jetzt deine Webseite anschaust, wirst du feststellen, dass alle Widgets, die du zu deinen Widget-Bereichen hinzugef\u00fcgt hast, an der richtigen Stelle erscheinen. Wenn sie nicht ganz an der richtigen Stelle sind, gehe zur\u00fcck und bearbeite deine Vorlagendateien und stelle sicher, dass sich der Code an der Stelle befindet, wo du ihn haben willst. M\u00f6glicherweise musst du auch <a href=\"https:\/\/kinsta.com\/de\/blog\/bearbeitest-wordpress-code\/\">dein CSS bearbeiten<\/a>, damit es so aussieht, wie du es haben willst.<\/p>\n<figure id=\"attachment_65282\" aria-describedby=\"caption-attachment-65282\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65282 size-full\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/widget-auf-der-live-seite.jpg\" alt=\"Widget auf der Live Seite\" width=\"1500\" height=\"449\"><figcaption id=\"caption-attachment-65282\" class=\"wp-caption-text\">Widget auf der Live Seite<\/figcaption><\/figure>\n<h2><strong>Wie man Widgets mit der Widgets-API programmiert.<\/strong><\/h2>\n<p>Jetzt wei\u00dft du also, wie du Widgets f\u00fcr deine Webseite ausw\u00e4hlst, wie du sie zu deiner Webseite hinzuf\u00fcgst und wie du neue Seitenleisten oder Widget-Bereiche erstellst. Im n\u00e4chsten Schritt zeige ich dir wie man eine WordPress Widget erstellt.<\/p>\n<p>Manchmal stellt man vielleicht fest, dass es kein Plugin gibt, mit dem man genau das Widget erstellen kann, das man auf seiner Webseite haben m\u00f6chte. Das bedeutet, dass du es selbst programmieren musst.<\/p>\n<p>In diesem Beispiel werde ich dir zeigen, wie man ein wirklich einfaches Call-To-Action-Widget programmiert.<\/p>\n<p><strong>\u00dcberblick \u00fcber die Widgets-API<\/strong><\/p>\n<p>Die <a href=\"https:\/\/developer.wordpress.org\/themes\/functionality\/widgets\/\">Widgets-API<\/a> in WordPress enth\u00e4lt den gesamten Code, den man f\u00fcr die Registrierung, Erstellung und Programmierung von Widgets ben\u00f6tigt. Die Widgets-API enth\u00e4lt:<\/p>\n<ul>\n<li>Klassen zum Erstellen neuer Widgets.<\/li>\n<li>Funktionen zum Registrieren von Widgets und zum Vereinfachen der Widgets auf der Webseite.<\/li>\n<li>Funktionen zum Aufheben der Registrierung von Widgets, z.B. von einem Parent Theme.<\/li>\n<\/ul>\n<p>Hier werden wir eine Klasse verwenden, um ein Widget zu erstellen. Der erste Schritt besteht darin, ein Plugin zu erstellen, das das Widget aufnimmt.<\/p>\n<h3><strong>Erstelle ein Plugin f\u00fcr dein WordPress Widget<\/strong><\/h3>\n<p>Um dein eigenes Widget zu erstellen, musst du ein <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-plugin-verzeichnis-veroeffentlicht\/\">Plugin programmieren<\/a>. F\u00fcge den Code f\u00fcr ein neues Widget nicht zu deinem Theme hinzu, denn bei Widgets geht es um Funktionalit\u00e4t und nicht um die Anzeige. Wenn du in Zukunft <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-theme-andern\/\">dein Theme \u00e4nderst<\/a>, m\u00f6chtest du immer noch auf dieses Widget zugreifen k\u00f6nnen.<\/p>\n<p>Beginne damit, ein leeres Plugin zu erstellen. Erstelle einen Plugin-Ordner in deinem <code>wp-content\/plugins<\/code> Verzeichnis und f\u00fcge eine leere Datei hinzu. Gib ihr einen geeigneten Namen. \u00d6ffne diese Datei und f\u00fcge diesen Code hinzu.<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n\u00a0* Plugin Name: Kinsta Call to Action Widget\n * Plugin URI: https:\/\/rachelmccollin.com\n\u00a0* Description: A simple call to action widget.\n\u00a0* Version: 1.0\n\u00a0* Author: Rachel McCollin\n\u00a0* Author URI: https:\/\/rachelmccollin.co.uk\n\u00a0*\/<\/code><\/pre>\n<p>Du musst die Autoren-URL und die Plugin-URL auf deine eigene bearbeiten. Dadurch wird ein Plugin f\u00fcr dich erstellt, das du \u00fcber den Plugin-Bildschirm aktivieren kannst.<\/p>\n<figure id=\"attachment_65286\" aria-describedby=\"caption-attachment-65286\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65286 size-full\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/widget-plugin-im-plugin-bildschirm.jpg\" alt=\"Widget-Plugin im Plugin-Bildschirm\" width=\"1500\" height=\"306\"><figcaption id=\"caption-attachment-65286\" class=\"wp-caption-text\">Widget-Plugin im Plugin-Bildschirm<\/figcaption><\/figure>\n<p>Aber wenn du sie aktivierst, wird nichts passieren. Du wirst etwas Code zu deinem Plugin hinzuf\u00fcgen m\u00fcssen.<\/p>\n<h3><strong>Erstelle eine Klasse f\u00fcr das Widget<\/strong><\/h3>\n<p>Der Code f\u00fcr das Widget wird innerhalb einer Klasse abgelegt. Also f\u00fcge das als n\u00e4chstes hinzu.<\/p>\n<pre><code class=\"language-php\">class kinsta_Cta_Widget extends WP_Widget {\n\n}<\/code><\/pre>\n<h4><strong>Erstellen der Konstruktor-Funktion<\/strong><\/h4>\n<p>Das erste, was innerhalb der Klasse gemacht werden muss, ist die Konstruktorfunktion zum Erstellen des Widgets. F\u00fcge diese innerhalb der Klammern der Klasse hinzu.<\/p>\n<pre><code class=\"language-php\">\/\/widget constructor function\n\nfunction __construct() {\n\n $widget_options = array (\n  'classname' =&gt; 'kinsta_cta_widget',\n  'description' =&gt; 'Add a call to action box with your own text and link.'\n );\n\n parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );\n\n}<\/code><\/pre>\n<p>Dies beginnt mit dem Aufbau des Widgets.<\/p>\n<h4><strong>Erstelle das Formular zur Ausgabe des Widgets<\/strong><\/h4>\n<p>Als n\u00e4chstes ben\u00f6tigen wir ein Formular, das vom Widgets-Bildschirm und dem Customizer zur Erstellung des Widgets verwendet wird. F\u00fcge dies noch innerhalb der Klammern hinzu.<\/p>\n<pre><code class=\"language-php\">\/\/function to output the widget form\n\nfunction form( $instance ) {\n\n $title = ! empty( $instance['title'] ) ? $instance['title'] : '';\n $link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';\n $text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';\n?&gt;\n\n&lt;p&gt;\n &lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'title'); ?&gt;\"&gt;Title:&lt;\/label&gt;\n &lt;input class=\"widefat\" type=\"text\" id=\"&lt;?php echo $this-&gt;get_field_id( 'title' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'title' ); ?&gt;\" value=\"&lt;?php echo esc_attr( $title ); ?&gt;\" \/&gt;&lt;\/p&gt;\n\n&lt;p&gt;\n &lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'text'); ?&gt;\"&gt;Text in the call to action box:&lt;\/label&gt;\n &lt;input class=\"widefat\" type=\"text\" id=\"&lt;?php echo $this-&gt;get_field_id( 'text' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'text' ); ?&gt;\" value=\"&lt;?php echo esc_attr( $text ); ?&gt;\" \/&gt;&lt;\/p&gt;\n\n&lt;p&gt;\n &lt;label for=\"&lt;?php echo $this-&gt;get_field_id( 'link'); ?&gt;\"&gt;Your link:&lt;\/label&gt;\n &lt;input class=\"widefat\" type=\"text\" id=\"&lt;?php echo $this-&gt;get_field_id( 'link' ); ?&gt;\" name=\"&lt;?php echo $this-&gt;get_field_name( 'link' ); ?&gt;\" value=\"&lt;?php echo esc_attr( $link ); ?&gt;\" \/&gt;&lt;\/p&gt;\n\n&lt;?php }<\/code><\/pre>\n<p>Dadurch erhalten die Benutzer ein Formular, mit dem sie Text und einen Link zum Call to Action hinzuf\u00fcgen k\u00f6nnen.<\/p>\n<h4><strong>Erstelle die Funktion um das Widget zu speichern<\/strong><\/h4>\n<p>Jetzt musst du alles speichern, was in diesem Formular eingegeben wird. F\u00fcge dies hinzu.<\/p>\n<pre><code class=\"language-php\">\/\/function to define the data saved by the widget\n\nfunction update( $new_instance, $old_instance ) {\n $instance = $old_instance;\n $instance['title'] = strip_tags( $new_instance['title'] );\n $instance['text'] = strip_tags( $new_instance['text'] );\n $instance['link'] = strip_tags( $new_instance['link'] );\n return $instance;\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \n\n}<\/code><\/pre>\n<p>Dadurch werden die von den Benutzern eingegebenen Daten in den Widget-Einstellungen gespeichert.<\/p>\n<h4><strong>Erstelle die Funktion zur Ausgabe des Widgets<\/strong><\/h4>\n<p>Jetzt muss der Code hinzugef\u00fcgt werden, der das Widget auf der Webseite anzeigt. F\u00fcge diesen wiederum innerhalb der Klammern hinzu:<\/p>\n<pre><code class=\"language-php\">\/\/function to display the widget in the site\n\nfunction widget( $args, $instance ) {\n \/\/define variables\n $title = apply_filters( 'widget_title', $instance['title'] );\n $text = $instance['text'];\n $link = $instance['link'];\n\n \/\/output code\n echo $args['before_widget'];\n ?&gt;\n\n &lt;div class=\"cta\"&gt;\n  &lt;?php if ( ! empty( $title ) ) {\n   echo $args['before_title'] . $title . $args['after_title'];\n  };\n  echo '&lt;a href=\"' . $link . '\"&gt;' . $text . '&lt;\/a&gt;';\n  ?&gt;\n &lt;\/div&gt;\n\n &lt;?php\n echo $args['after_widget'];\n\n}<\/code><\/pre>\n<h3><strong>Registriere das Widget<\/strong><\/h3>\n<p>Jetzt, wo du deine Klasse geschrieben hast, ist es an der Zeit, das WordPress Widget zu registrieren, damit es funktioniert. F\u00fcge diesen Code au\u00dferhalb der Klasse hinzu.<\/p>\n<pre><code class=\"language-php\">\/\/function to register the widget\nfunction kinsta_register_cta_widget() {\n\n register_widget( 'kinsta_Cta_Widget' );\n\u00a0\u00a0\n}\nadd_action( 'widgets_init', 'kinsta_register_cta_widget' );<\/code><\/pre>\n<p>Speicher nun deine Plugin-Datei. Gehe auf den Widgets-Bildschirm und du siehst das Widget zur Verwendung.<\/p>\n<figure id=\"attachment_65287\" aria-describedby=\"caption-attachment-65287\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65287 size-full\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/neues-widget-in-dem-widget-bereich.jpg\" alt=\"Neues Widget in dem Widget Bereich\" width=\"1500\" height=\"838\"><figcaption id=\"caption-attachment-65287\" class=\"wp-caption-text\">Neues Widget in dem Widget Bereich<\/figcaption><\/figure>\n<p>Wenn du es in einen Widget-Bereich einf\u00fcgst und Text und einen Link dazu hinzuf\u00fcgst, wird es auf der Live-Seite ausgegeben.<\/p>\n<figure id=\"attachment_65288\" aria-describedby=\"caption-attachment-65288\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65288 size-full\" src=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/02\/Neues-widget-auf-der-live-seite.jpg\" alt=\"Neues Widget auf der Live Seite\" width=\"1500\" height=\"761\"><figcaption id=\"caption-attachment-65288\" class=\"wp-caption-text\">Neues Widget auf der Live Seite<\/figcaption><\/figure>\n<p>Es sieht im Moment vielleicht nicht so gut aus. Du musst etwas CSS hinzuf\u00fcgen, um es zu stylen.<\/p>\n<h3><strong>CSS zum Widget hinzuf\u00fcgen<\/strong><\/h3>\n<p>Um CSS zu deinem Plugin hinzuzuf\u00fcgen, musst du ein Stylesheet erstellen und es in deinem Plugin einreihen. F\u00fcge dieses vor der Klasse zu deiner Plugin-Datei hinzu.<\/p>\n<pre><code class=\"language-php\">function kinsta_widget_enqueue_styles() {\n\n wp_register_style( 'widget_cta_css', plugins_url( 'css\/style.css', __FILE__ ) );\n wp_enqueue_style( 'widget_cta_css' );\n\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_widget_enqueue_styles' );<\/code><\/pre>\n<p>Jetzt musst du eine <strong>style.css<\/strong>-Datei im Ordner des Plugins hinzuf\u00fcgen und ein beliebiges Styling hinzuf\u00fcgen. Das \u00fcberlasse ich dir!<\/p>\n<p>Jetzt hast du einen einfachen <a href=\"https:\/\/kinsta.com\/de\/blog\/tipps-zur-optimierung-der-conversion-rate\/#2-strategic-ctas-button-popups-pricing-tables\">Call to Action-Button<\/a>, den du jedem Widget-Bereich auf deiner Webseite hinzuf\u00fcgen kannst. Wenn du ihn z.B. in deine Seitenleiste einf\u00fcgst, k\u00f6nnen die Leute ihn benutzen, um von \u00fcberall auf der Webseite zu deiner Anmeldeseite zu gelangen.<\/p>\n<p>Du kannst komplexere Widgets mit zus\u00e4tzlichen Einstellungen und Optionen erstellen, aber das gibt dir eine Vorstellung davon, wie du mit der Erstellung deines eigenen Widgets beginnen kannst.<\/p>\n<p>Wenn du meinen Code f\u00fcr dieses Plugin sehen willst, einschlie\u00dflich des Stylings, kannst du ihn auf <a href=\"https:\/\/github.com\/rachelmccollin\/kinsta-cta-widget-plugin\">Github<\/a> finden. Wenn du mit Code beginnst, gibt es hier eine ausf\u00fchrliche Anleitung zu <a href=\"https:\/\/kinsta.com\/de\/blog\/git-vs-github\/\">Git vs. GitHub<\/a> und wie man mit beiden anf\u00e4ngt.<\/p>\n\n<h2><strong>Zusammenfassung<\/strong><\/h2>\n<p>Widgets sind eine meiner Lieblingsfunktionen von <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-wordpress\/\">WordPress<\/a>. Sie k\u00f6nnen deine Webseite zum Leben erwecken und dir helfen, mehr Anmeldungen zu erhalten oder <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-ab-testwerkzeuge\/\">mehr Besucher in Kunden zu verwandeln<\/a>. Du kannst WordPress-Widgets zu jedem bestehenden Widget-Bereich in Deinem Theme hinzuf\u00fcgen, oder Du kannst zus\u00e4tzliche Widget-Bereiche hinzuf\u00fcgen, so dass Du mehr Widgets an mehr Stellen hinzuf\u00fcgen kannst.<\/p>\n<p>Es gibt auch viele Orte, an denen man Widgets finden kann. WordPress wird mit einer Reihe von Widgets vorinstalliert geliefert, und man kann <a href=\"https:\/\/kinsta.com\/de\/thema\/wordpress-plugins\/\">\u00fcber Plugins<\/a> auch weitere Widgets installieren. Aber das ist noch nicht alles, wenn du dich wohl f\u00fchlst, kannst du auch deine eigenen Widgets \u00fcber die Widgets-API programmieren.<\/p>\n<p>Jetzt bist du an der Reihe: Wie nutzt du die WordPress Widgets auf deiner Webseite? Wie viele verwendest du?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress-Widgets sind unglaublich n\u00fctzlich. Sie erm\u00f6glichen es dir, alle Arten von zus\u00e4tzlichen Inhalten zu deiner Webseite au\u00dferhalb des Beitrags oder der Seite selbst hinzuzuf\u00fcgen und die &#8230;<\/p>\n","protected":false},"author":105,"featured_media":32780,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[75,29],"topic":[999],"class_list":["post-32778","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webdesign","tag-wordpress","topic-wordpress-entwicklung"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Der vollst\u00e4ndige Leitfaden zu WordPress Widgets<\/title>\n<meta name=\"description\" content=\"Nutze WordPress-Widgets, um deine Seite zu verbessern: F\u00fcge einen Login in der Seitenleiste, eine CTA-Schaltfl\u00e4che oder eine Galerie hinzu. Lerne, wie du WordPress-Widgets hinzuf\u00fcgst, verwendest und von Grund auf programmierst.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Der vollst\u00e4ndige Leitfaden zu WordPress Widgets: Wie man sie verwendet, hinzuf\u00fcgt und implementiert, um deine Webseite anzupassen\" \/>\n<meta property=\"og:description\" content=\"Nutze WordPress-Widgets, um deine Seite zu verbessern: F\u00fcge einen Login in der Seitenleiste, eine CTA-Schaltfl\u00e4che oder eine Galerie hinzu. Lerne, wie du WordPress-Widgets hinzuf\u00fcgst, verwendest und von Grund auf programmierst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-05T09:56:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-31T14:51:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/wordpress-widgets.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rachel McCollin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Nutze WordPress-Widgets, um deine Seite zu verbessern: F\u00fcge einen Login in der Seitenleiste, eine CTA-Schaltfl\u00e4che oder eine Galerie hinzu. Lerne, wie du WordPress-Widgets hinzuf\u00fcgst, verwendest und von Grund auf programmierst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/wordpress-widgets.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rachel McCollin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"34\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/\"},\"author\":{\"name\":\"Rachel McCollin\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/52eb266d622b565d3206e355caac172e\"},\"headline\":\"Der vollst\u00e4ndige Leitfaden zu WordPress Widgets: Wie man sie verwendet, hinzuf\u00fcgt und implementiert, um deine Webseite anzupassen\",\"datePublished\":\"2020-03-05T09:56:16+00:00\",\"dateModified\":\"2023-08-31T14:51:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/\"},\"wordCount\":6073,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/wordpress-widgets.jpg\",\"keywords\":[\"webdesign\",\"WordPress\"],\"articleSection\":[\"WordPress Entwicklung\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/\",\"name\":\"Der vollst\u00e4ndige Leitfaden zu WordPress Widgets\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/wordpress-widgets.jpg\",\"datePublished\":\"2020-03-05T09:56:16+00:00\",\"dateModified\":\"2023-08-31T14:51:25+00:00\",\"description\":\"Nutze WordPress-Widgets, um deine Seite zu verbessern: F\u00fcge einen Login in der Seitenleiste, eine CTA-Schaltfl\u00e4che oder eine Galerie hinzu. Lerne, wie du WordPress-Widgets hinzuf\u00fcgst, verwendest und von Grund auf programmierst.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/wordpress-widgets.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/wordpress-widgets.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Der vollst\u00e4ndige Leitfaden zu WordPress Widgets\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Entwicklung\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/wordpress-entwicklung\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Der vollst\u00e4ndige Leitfaden zu WordPress Widgets: Wie man sie verwendet, hinzuf\u00fcgt und implementiert, um deine Webseite anzupassen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/52eb266d622b565d3206e355caac172e\",\"name\":\"Rachel McCollin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g\",\"caption\":\"Rachel McCollin\"},\"description\":\"Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/rachelmccollin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Der vollst\u00e4ndige Leitfaden zu WordPress Widgets","description":"Nutze WordPress-Widgets, um deine Seite zu verbessern: F\u00fcge einen Login in der Seitenleiste, eine CTA-Schaltfl\u00e4che oder eine Galerie hinzu. Lerne, wie du WordPress-Widgets hinzuf\u00fcgst, verwendest und von Grund auf programmierst.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/","og_locale":"de_DE","og_type":"article","og_title":"Der vollst\u00e4ndige Leitfaden zu WordPress Widgets: Wie man sie verwendet, hinzuf\u00fcgt und implementiert, um deine Webseite anzupassen","og_description":"Nutze WordPress-Widgets, um deine Seite zu verbessern: F\u00fcge einen Login in der Seitenleiste, eine CTA-Schaltfl\u00e4che oder eine Galerie hinzu. Lerne, wie du WordPress-Widgets hinzuf\u00fcgst, verwendest und von Grund auf programmierst.","og_url":"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2020-03-05T09:56:16+00:00","article_modified_time":"2023-08-31T14:51:25+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/wordpress-widgets.jpg","type":"image\/jpeg"}],"author":"Rachel McCollin","twitter_card":"summary_large_image","twitter_description":"Nutze WordPress-Widgets, um deine Seite zu verbessern: F\u00fcge einen Login in der Seitenleiste, eine CTA-Schaltfl\u00e4che oder eine Galerie hinzu. Lerne, wie du WordPress-Widgets hinzuf\u00fcgst, verwendest und von Grund auf programmierst.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/wordpress-widgets.jpg","twitter_creator":"@Kinsta_DE","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Rachel McCollin","Gesch\u00e4tzte Lesezeit":"34\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/"},"author":{"name":"Rachel McCollin","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/52eb266d622b565d3206e355caac172e"},"headline":"Der vollst\u00e4ndige Leitfaden zu WordPress Widgets: Wie man sie verwendet, hinzuf\u00fcgt und implementiert, um deine Webseite anzupassen","datePublished":"2020-03-05T09:56:16+00:00","dateModified":"2023-08-31T14:51:25+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/"},"wordCount":6073,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/wordpress-widgets.jpg","keywords":["webdesign","WordPress"],"articleSection":["WordPress Entwicklung"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/","url":"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/","name":"Der vollst\u00e4ndige Leitfaden zu WordPress Widgets","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/wordpress-widgets.jpg","datePublished":"2020-03-05T09:56:16+00:00","dateModified":"2023-08-31T14:51:25+00:00","description":"Nutze WordPress-Widgets, um deine Seite zu verbessern: F\u00fcge einen Login in der Seitenleiste, eine CTA-Schaltfl\u00e4che oder eine Galerie hinzu. Lerne, wie du WordPress-Widgets hinzuf\u00fcgst, verwendest und von Grund auf programmierst.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/wordpress-widgets.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/wordpress-widgets.jpg","width":1460,"height":730,"caption":"Der vollst\u00e4ndige Leitfaden zu WordPress Widgets"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-widgets\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress Entwicklung","item":"https:\/\/kinsta.com\/de\/thema\/wordpress-entwicklung\/"},{"@type":"ListItem","position":3,"name":"Der vollst\u00e4ndige Leitfaden zu WordPress Widgets: Wie man sie verwendet, hinzuf\u00fcgt und implementiert, um deine Webseite anzupassen"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/52eb266d622b565d3206e355caac172e","name":"Rachel McCollin","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g","caption":"Rachel McCollin"},"description":"Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.","url":"https:\/\/kinsta.com\/de\/blog\/author\/rachelmccollin\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/32778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/105"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=32778"}],"version-history":[{"count":3,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/32778\/revisions"}],"predecessor-version":[{"id":34820,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/32778\/revisions\/34820"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32778\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32778\/translations\/fr"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32778\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32778\/translations\/pt"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32778\/translations\/it"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32778\/translations\/nl"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32778\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32778\/translations\/jp"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32778\/translations\/dk"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32778\/translations\/se"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/32778\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/32780"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=32778"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=32778"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=32778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}