WordPress Widgets erstellen: Schritt für Schritt Anleitung

Du hast Dich schon immer gefragt, wie Du eigene WordPress Widgets erstellen kannst? Das ist ganz einfach! Hervorzuheben ist aber in erster Linie, dass WordPress von Anfang an dafür entwickelt wurde, dass sozusagen jeder eigene Funktionen oder ähnliches hinzufügen kann. Widgets werden zum Beispiel in der Seitenleiste eingebunden, jedoch können sie genauso auch im Footer untergebracht werden. In vielen Themes findet sich auch ein Bereich im Header.

Die Widget-Bereiche bieten sich zum Beispiel dafür an, um Werbung darzustellen oder den Besuchern eine Möglichkeit zu bieten, um sich in einen kostenlosen Newsletter einzutragen. Es sind hierbei keine Grenzen gesetzt. Genauso aber kann auch ein Text dargestellt werden, um die Besucher darüber zu informieren, was es im Unternehmen Neues gibt.

Wordpress Widget Beispiel
Rechts neben dem Beitrag befindet sich die Sidebar. Die Vorstellung des Autors (von mir) ist in dem Fall ein Widget.

Neue Individuelle Widget-Bereiche im Theme hinzufügen

Es ist so, dass natürlich nicht jedes Theme genau die eigenen individuellen Anforderungen entspricht. Ein weiterer Widget-Bereich wäre gar nicht schlecht denkst Du Dir? Kein Problem! Die Anpassbarkeit von WordPress erlaubt Dir, dass Du genau diese Bereiche hinzufügst. Dafür musst Du Dich in die functions.php des Themes begeben.

Diese Datei kannst Du in der Regel auch über das Dashboard (Editor) öffnen. Wichtig ist jedoch, dass aus dem eigenen Theme ein sogenanntes Child-Theme erstellt wird. Sonst würde der Code wieder überschrieben werden, wenn Du das Theme aktualisierst. Das ist natürlich nicht Sinn der Sache.

Damit ein weiterer Widget-Bereich definiert werden kann, sollte folgender Code in der besagten Datei hinzugefügt werden:

[code]
function yourthemename_widgets_init() {
register_sidebar( array(
’name‘ => __( ‚Custom Widget Area Header‘, ‚yourthemename‘ ),
‚id‘ => ’sidebar-custom-header‘,
‚description‘ => __( ‚Custom widget area for the header of my theme‘, ‚yourthemename‘ ),
‚before_widget‘ => ‚<aside id="%1$s" class="widget %2$s">‘,
‚after_widget‘ => ‚</aside>‘,
‚before_title‘ => ‚<h3 class="widget-title">‘,
‚after_title‘ => ‚</h3>‘,
) );
}
add_action( ‚widgets_init‘, ‚yourthemename_widgets_init‘ );
[/code]

Somit ist dieser Prozess auch nicht kompliziert. Ich empfehle jedoch, dass dies zuerst innerhalb einer Testumgebung ausprobiert wird und selbstverständlich nicht in der Live-Variante. Dies gilt auch, wenn weitere Bereiche ergänzt werden sollen. In diesem Falle würdest Du eine eigene ID oder einen Namen vergeben müssen, denn sonst weiß der Code nicht, welches Element angesteuert wird.

[code]
function yourthemename_widgets_init() {
register_sidebar( array(
’name‘ => __( ‚Custom Widget Area Header‘, ‚yourthemename‘ ),
‚id‘ => ’sidebar-custom-header‘,
‚description‘ => __( ‚Custom widget area for the header of my theme‘, ‚yourthemename‘ ),
‚before_widget‘ => ‚<aside id="%1$s" class="widget %2$s">‘,
‚after_widget‘ => ‚</aside>‘,
‚before_title‘ => ‚<h3 class="widget-title">‘,
‚after_title‘ => ‚</h3>‘,
) );
register_sidebar( array(
’name‘ => __( ‚Custom Widget Area Footer‘, ‚yourthemename‘ ),
‚id‘ => ’sidebar-custom-footer‘,
‚description‘ => __( ‚Custom widget area for the footer of my theme‘, ‚yourthemename‘ ),
‚before_widget‘ => ‚<aside id="%1$s" class="widget %2$s">‘,
‚after_widget‘ => ‚</aside>‘,
‚before_title‘ => ‚<h3 class="widget-title">‘,
‚after_title‘ => ‚</h3>‘,
) );
}
add_action( ‚widgets_init‘, ‚yourthemename_widgets_init‘ );
[/code]

Sobald diese Änderungen gespeichert worden sind, kannst Du direkt die neuen Widget-Bereiche im Dashboard ansehen. Rufe hierfür den Punkt „Design“ und „Widgets“ auf. In der rechten Spalte sind nun die neuen Widgets ersichtlich. Texte, Kategorien, Bilder, Videos und vieles weitere kann nun hinzugefügt werden.

 

Wordpress Widget erstellen
In der linken Spalte von WordPress findest Du unter “Design” -> “Widgets” die passende Einstellung.

 

Wordpress Widgets hinzufügen
Hier kannst Du nun ganz einfach per Drag & Drop WordPress Widgets erstellen und hinzufügen indem Du sie einfach in die “Default Widget Area” ziehst. Je nach WordPress Theme sieht diese Einstellung etwas anders aus.

Wichtig: Auch bereits vorher solltest Du unter Design -> Widgets aufrufen und schauen, was Du bereits an Funktionen freigeschaltet hast. Diese Funktionen bestimmten meist das Theme, welches Du auf Deiner WordPress Website installiert hast.

WordPress Widgets erstellen: Widget-Bereiche definieren

Jetzt muss aber noch definiert werden, an welcher Stelle die Widget-Bereiche angezeigt werden sollen. Hierzu muss ein entsprechender Code in der footer.php oder header.php hinterlegt werden. Wichtig dabei ist, dass die Widgets dynamisch reagieren. Was bedeutet, dass die Widgets nur angezeigt werden, wenn auch ein Widget in diesem Bereich hinterlegt wurde.

Die Funktion nennt sich dynamic_sidebar und findet sich auch im WordPress Codex. Die Funktion kann auch in der Header.php genutzt werden:

[code]
<?php if ( is_active_sidebar( ’sidebar-custom-header‘ ) ) : ?>
<div id="sidebar-header">
<?php dynamic_sidebar( ’sidebar-custom-header‘ ); ?>
</div>
<?php endif; ?>
[/code]

Sofern dieser Code in der gewünschten Datei hinterlegt wurde, wird erst dann das Widget angezeigt, wenn auch tatsächlich ein Inhalt hinterlegt wurde. Bitte daran denken, dass hierfür ein Child-Theme verwendet werden muss. Dieses kannst Du durch verschiedene Generatoren erzeugen. Viele Theme-Hersteller bieten in kostenpflichtigen Varianten aber bereits ein Child-Theme ergänzend zum sog. „Eltern-Theme” an.

Widgets auf Seiten anzeigen lassen

Sofern WordPress als CMS genutzt werden soll, kann es sich auch anbieten, dass auf Seiten etwas dargestellt werden soll. Somit würde es nicht nur im Header, Sidebar und Footer Widgets geben, sondern auch im Content.

Damit dieses WordPress Widget erstellt werden kann, sollte ein Plugin wie „Widgets on Pages“ installiert werden. So können jeweilige Bereiche direkt dargestellt werden — es ist dabei egal, wie viele Du haben möchtest.

Ein solches Vorhaben bietet sich an, wenn Werbung angezeigt werden soll. Genauso aber auch, wenn der Nutzer die Möglichkeit erhalten soll, sich in einem Newsletter eintragen zu können oder ähnliches. Hierbei muss aber gesagt werden, dass dies über ein Newsletter-Plugin genauso möglich wäre.

Möglichkeit über den Gutenberg-Editor

Seit einiger Zeit gibt es den Gutenberg-Editor als Standard. Sofern auf das Plus-Symbol geklickt wird, können Widgets als Block hinzugefügt werden. Es ist damit problemlos möglich, das jeweilige Widget anzeigen zu lassen — ein weiteres Plugin ist dadurch nicht nötig.

WordPress Footer Widget richtig nutzen

Mit Abstand am häufigsten werden Footer Widgets eingesetzt, denn hier lassen sich Seiten wie Impressum oder Datenschutz ideal verstecken und alles, was den Nutzer ablenken könnte, wird hierunter auch verborgen. Wie ein solcher Widget-Bereich hinzugefügt werden kann, wurde im letzten Absatz behandelt.

Nun geht es darum, dass Du diesen Widget-Bereich im Footer auch ideal nutzen kannst. In erster Linie ist dabei die Darstellung wichtig. Dies funktioniert im Child-Theme mit CSS, welche in der style.css zu finden ist. Die Spalte hat im folgenden Code einen Abstand von 25 Prozent zur nächsten Spalte. Mit dem Befehl float können die Spalten horizontal oder nebeneinander dargestellt werden:

.site-footer {
clear: both;
}

.footer-widgets {
margin-right: -2em;
}

.footer-widget-column {
float: left;
width: 25%;
padding-right: 2em;
box-sizing: border-box;
}

Häufig findet sich ein ähnlicher Code aber bereits in der style.css, dies sollte entsprechend geprüft werden. Es könnte auch sein, dass der Footer dunkler angezeigt wird, als die Sidebar — dies ist aber beabsichtigt. Mit einer dunklen Hintergrundfarbe kann der Footer von der Seite optisch abgegrenzt werden.

Wordpress Widget Footer dunkel
Mein Footer ist beispielsweise auch dunkler eingestellt, sodass man diesen auch noch wahr nimmt.

Übersicht: Widgets hinzufügen und bearbeiten

Jetzt wäre geklärt, wie Widget-Bereiche hinzugefügt werden können und wie optische Ergänzungen erledigt werden können. In den ersten Absätzen bin ich auch nochmal darauf eingegangen, wo die Einstellungen für Widgets zu finden sind (Design > Widgets).

Nun stellt sich die Frage: Wie WordPress Widgets hinzufügen?

Das ist ganz einfach! Via Drag-and-Drop können Elemente wie Texte, Bilder, Videos und Funktionen wie die Ansicht der letzten Artikel oder Kommentare in die jeweilige Spalte gezogen werden. Sobald die Einstellung gespeichert wird, werden die Widgets auch sofort angezeigt.

Allerdings sind die Bearbeitungsmöglichkeiten eher gering. Die WordPress eigenen Widgets lassen sich im Titel anpassen und eventuell in Kleinigkeiten (Menge an Artikeln oder Kommentaren). Sofern weitere Ergänzungen erledigt werden müssen, muss dies programmiert werden.

Allerdings besteht weiterhin auch die Möglichkeit, dass solche Widgets über Plugins hinzugefügt werden. Wie bereits oben gesagt, liegen häufig solche Plugins auch einem gekauften WordPress Theme bei, damit das Design im gesamten stimmig erscheint.

Übrigens: WordPress Widgets bearbeiten wäre an und für sich über die Dateien möglich, aber leider werden diese Änderungen bei jedem WordPress Update überschrieben. Daher im Idealfall auf eigene Codes zurückgreifen oder auf aktuelle Plugins.

Was sind überhaupt WordPress Widgets?

WordPress Widgets sind Inhaltsausschnitte, welche separat veröffentlicht werden können. Diese Widgets enthalten zum Beispiel eine Navigation, damit sich der Besucher direkt die nötigen Informationen beschaffen kann.

Insbesondere lokale Unternehmen haben Widgets für sich entdeckt, um Öffnungszeiten anzuzeigen oder den genauen Standort. Google Maps sollte in der EU aber nicht unbedingt eingebunden werden aufgrund der aktuellen DSGVO.

Wann sollten WordPress Widgets verwendet werden?

Widgets eignen sich immer dann, wenn auf einer oder mehreren Seiten bestimmte — ergänzende — Inhalte angezeigt werden sollen. Bei Blogs ist es empfehlenswert, wenn das Archiv angezeigt wird oder die letzten Beiträge. So kann auch die Verweildauer auf der Webseite verlängert werden, dies ist ein Faktor für die Suchmaschinenoptimierung.

Bei einem Onlineshop könnte eine Sidebar auch die Conversion-Rate erhöhen. Der Warenkorb kann nämlich hier dargestellt werden mit einem Gutschein oder die zuletzt angesehenen Produkte werden nochmal hervorgehoben. Wenn ein Besucher überlegen sollte, wird er nochmals mit den Produkten konfrontiert — die Verkaufschancen erhöhen sich.

Es sollte sich aber immer überlegt werden, wo welches Widget platziert werden soll und welche Funktion womöglich deutlich effektiver sein wird. Dafür bietet sich gegebenenfalls auch ein A/B-Testing an.

Selbstverständlich darf nicht außer Acht gelassen werden, dass ein Call to Action Button ebenfalls von Vorteil sein könnte. Diese Platzierung macht bei jedem Unternehmen einen Unterschied — womöglich werden dadurch mehr Interessenten zu einem Kunden und gleichzeitig sorgt das dafür, dass man die Conversion Rate optimieren kann.

Weiterhin empfehlenswert ist auch die Darstellung von Social-Media-Plattformen über Icons, worüber die User dann beispielsweise Deine Facebook Fanseite erreichen können oder andere Social Media Pages. Genauso kann aber auch ein Begrüßungsvideo dargestellt werden. Das sind Kleinigkeiten, welche am Ende des Tages aber einen Unterschied machen könnten. Vorausgesetzt ist aber natürlich entsprechender Website-Traffic.

Wie können weitere Widgets hinzugefügt werden?

Weitere WordPress Widgets sollen hinzugefügt werden? Kein Problem! Allerdings sollte hiermit nicht übertrieben werden, denn umso mehr Widgets sich auf der Webseite finden lassen, umso unsichtbarer werden die anderen Widgets. Es gilt hier: Weniger ist mehr!

Gewisse Widgets sollten generell nur im Footer angezeigt werden. Wiederum andere passen eventuell auch gar nicht zum Vorhaben, weshalb die Auswahl schon hier dezimiert ist. Doch wie können weitere Widgets hinzugefügt werden?

Es gibt dafür drei Optionen:

  • Premium-Plugins mit weiteren individuellen Widgets.
  • Widgets durch das WordPress Plugin-Verzeichnis installieren.
  • Widgets, welche bereits der Installation beilagen.

Welche Widgets werden von WordPress mitgeliefert?

Es werden einige Widgets bereits mitgeliefert:

Archiv: Beiträge werden sortiert in Monate; heutzutage ist die Verwendung unüblich.

Kalender: Beiträge werden in einem Kalender dargestellt; bietet sich vor allem bei Nachrichtenseiten an. Verwendung ist auch hier heutzutage eher unüblich.

  • HTML: Ein HTML-Code kann hier eingefügt werden. Wird häufig für Google Formulare verwendet.
  • Bild: Ein Bild / eine Galerie aus der Medienbibliothek kann hier hierdurch angezeigt werden.
  • Schlagwörter-Wolke: Eine Liste der Schlagwörter (Tags), welche am häufigsten verwendet wurden.
  • Navigationsmenü: Ein erstelltes Menü kann hierdurch angezeigt werden. Das Menü muss zuvor im Dashboard erstellt werden.
  • Letzte Kommentare: Eine Liste mit den letzten Kommentaren kann hierdurch angezeigt werden.
  • Video: Ein Video aus einem Streaming-Dienst wie YouTube kann angezeigt werden; DSGVO muss aber beachtet werden.
  • Audio: Eignet sich vor allem für Podcasts im Sinne einer Vorschau der neusten Folge.
  • Kategorien: Eine Liste aller Kategorien kann dargestellt werden, dient der Benutzerfreundlichkeit.
  • Seiten: Gewisse Seiten (können nach IDs) angezeigt werden.
  • Meta: Dies beinhaltet Links zum Login und zu den RSS-Feeds.
  • Suche: Ein einfaches Suchfeld wird dargestellt.
  • Neuste Beiträge: Die letzten Beiträge werden als Links angezeigt.
  • Text: Jede Art von Text in jeder Formatierung kann angezeigt werden.

Was beinhaltet der Zugänglichkeitsmodus?

Wenn über ein Tablet gearbeitet wird, dann gibt es keine Maus für die Drag-and-Drop-Funktion. Insofern kann der Zugänglichkeitsmodus aktiviert werden und dies bedeutet, dass rechts vom Widget ein „Hinzufügen“ angezeigt wird. Aktiviert kann der Modus über die Tabulator-Taste oder über die Funktion oben rechts unter der Begrüßung des Nutzers.

Können Widgets auch wieder gelöscht werden?

Widgets können jederzeit auch wieder gelöscht werden. Dafür muss sich ebenfalls wieder zur Übersicht begeben werden. Das jeweilige Element muss einmal angeklickt werden und schon öffnet sich auch die Möglichkeit, um das jeweilige Element zu löschen.

Wordpress Widget löschen
Um ein WordPress Widget zu löschen musst Du lediglich auf den Pfeil rechts klicken und dann auf “Löschen” und schon ist dieses Widget entfernt.

Genauso lässt sich die Löschung aber auch durch den Customizer vornehmen. Hierbei muss ebenfalls auf den Pfeil geklickt werden — unten Links taucht entsprechend der Punkt „Entfernen“ in Rot auf.

Wenn ein Widget entfernt wird, dann taucht dieses in der Liste „inaktive Widgets“ auf. Ein Widget kann mit seinen Einstellungen in Zukunft wieder angezeigt werden. Widgets können auch deaktiviert werden, wenn das Theme gewechselt wird.

WordPress Widgets erstellen: Fazit und Zusammenfassung

WordPress kann durch die Widgets sinnvoll ergänzt werden. Es kann die gesamte Webseite aufwerten, wenn solche Funktionen integriert werden. In einigen Fällen kann auch die Conversion-Rate erhöht werden — die kleinen Funktionen können daher auch den Umsatz steigern.

In diesem Beitrag hast Du einen Einblick darüber erhalten, wie neue Widgets hinzugefügt werden können, wie die Gestaltung über CSS erfolgen kann und welche Funktionen WordPress hiermit bietet.

Allerdings bedarf es je nach Wunsch eventuell auch einen WordPress-Experten und in diesem Falle würde ich Dir zur Verfügung stehen! Stelle hierzu gerne eine Kontaktanfrage.

Über David Hahn

Ich bin Inhaber der Online-Marketing Agentur SEO Galaxy und ich helfe Experten, Speakern, Beratern sowie Unternehmern, durch Suchmaschinenoptimierung, im Internet nachhaltige Kundenbeziehungen aufzubauen, gleichzeitig mehr Geld zu verdienen und zusätzliche Freiheit zu gewinnen. Als ich vor einigen Jahren in das Thema Online-Marketing / SEO eingestiegen bin, war es für mich extrem schwer Besucher auf meine Webseiten zu bekommen. Nach Analysen von mehreren hundert Webseiten, Tests auf eigenen Webseiten und über 100 betreuten Kundenprojekten , habe ich mein eigenes System entwickelt, wie meine Webseiten, und die meiner Kunden, mehr Besucher erhalten, Kundenanfragen generieren und diese Webseiten ENDLICH Geld verdienen.

Die 7 Gründe warum 98,7 % aller Webseiten kein Geld (im Internet) verdienen

WARUM Deine Webseite zu wenig Besucher hat, nicht unter den Top 3 bei Google rankt und wie Du das in kurzer Zeit mit unserem Ratgeber sehr einfach ändern kannst...