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.
Neue Individuelle Widget-Bereiche im Theme hinzufügen
Inhaltsverzeichnis
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.
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.
Ü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.
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.
