Eine Eigenschaft des Content-Management-Systems WordPress ist die Möglichkeit, Widgets in die Sidebar eines Themes einbauen zu können. Widgets sind Blöcke mit festgelegten Inhalten, beispielsweise ein Kalender, eine Beitragsliste, eine Kategorienliste, eine Schlagwort-Wolke oder ein Suchformular. Damit bieten Sie den Besuchern Ihrer Website hilfreiche Informationen oder komfortable Navigationsmöglichkeiten. Wir erklären Ihnen, wie Sie Widgets in ein gewähltes Theme einbinden und stellen fünf Widgets vor.
Tipp: Keine Lust zu lesen? Dann starten Sie doch einfach kostenlos unser Online-Wordpress-Tutorial.

Wordpress Widgets

Bild: “WordPress logo in LEGO – ze inst4gr4m sh0t” von Linus Bohman. Lizenz: CC BY 2.0


Wie werden Widgets installiert?

Widgets sind bereits seit der Version 2.3.  Bestandteil von WordPress und mit vielen Themes nutzbar. Viele Widgets sind in der Basisversion noch nicht vorhanden, sondern werden zusammen mit Plugins installiert. Im Administrationsbereich können Sie einstellen, welche Widgets auf Ihrer Website oder in Ihrem Blog erscheinen sollen und welche Eigenschaften diese haben sollen. Dazu klicken Sie im Hauptmenü auf „Designs“ und „Widgets“. Im sich öffnenden Fenster sehen Sie auf der linken Seite alle verfügbaren Widgets und auf der rechten Seite die Bereiche, in die diese eingefügt werden können. Die Bereiche variieren je nach Theme. Im Theme „Twenty-Fourteen“ zum Beispiel können Sie der primären Seitenleiste, einer Inhalts-Seitenleiste und dem Footer Widgets hinzufügen. Im Theme „Twenty-Thirteen“ stehen nur zwei Widget-Bereiche zur Verfügung.

Um einem Bereich ein Widget hinzuzufügen, ziehen Sie dieses von der linken Seite bei gedrückter linker Maustaste auf die entsprechende Bereichs-Schaltfläche.

Bild-01Alternativ können Sie auf den Namen des Widgets klicken und im Popup-Fenster den Bereich auswählen. Anschließend klicken Sie auf „Widget hinzufügen“.

Bild-02

Mit Klick auf den Bereichstitel öffnet sich eine Liste der hinzugefügten Widgets. Für diese können Sie an dieser Stelle genauere Einstellungen vornehmen, beispielsweise die Sichtbarkeit des Widgets einstellen und einen Titel vergeben.

Bild-03Wenn Sie die Sichtbarkeitsoptionen unverändert lassen, wird das Widget auf allen Seiten angezeigt.

Bild-04Falls Ihr bevorzugtes Theme keine Widgets unterstützt, können Sie dieses durch Hinzufügen einer sidebar.php widgetfähig machen. Eine konkrete Anleitung dazu finden Sie in den FAQ von WordPress Deutschland unter http://faq.wpde.org/wie-kann-ich-mein-theme-widget-faehig-machen/.

Das Plugin „Page Builder by SiteOrigin“ zum Einfügen von Widget-Bereichen in ein Theme

Wenn Sie selbst keine sidebar.php programmieren möchten, ist das Plugin „Page Builder by SiteOrigin“ eine hilfreiche Erweiterung. Hiermit können Sie neue Seitenlayouts mit frei platzierbaren Widget-Bereichen erstellen.

Nach der Installation des Plugins finden Sie beim Erstellen einer neuen Seite den Tab „Page Builder“ im Editor. Wenn Sie auf diesen klicken, öffnet sich der Layout-Bereich mit zwei neuen Schaltflächen. Generelle Einstellungen können Sie zuvor über „Einstellungen“ und „Page Builder“ vornehmen.

Bild-05Mit Klick auf das „Row“-Symbol fügen Sie dem Seitenlayout neue Reihen mit einer frei festlegbaren Spaltenanzahl hinzu. Wenn Sie auf den Button „+“ klicken, integrieren Sie ein Widget aus einer Aufklappliste in eine aktivierte Zeile oder Spalte.

Bild-06Wenn Sie ein Layout erstellt haben, können Sie dieses für weitere Verwendungen als Muster-Layout speichern.

Bild-07Bild-08Volle Kontrolle über Widgets mit dem Plugin „Dynamic Widgets“

Mit Hilfe des Plugins „Dynamic Widget“ kontrollieren Sie, auf welchen Seiten ausgewählte Widgets angezeigt werden sollen. Mit nur wenigen Mausklicks können Sie ohne PHP-Kenntnisse Widgets ein- und ausblenden sowie Regeln für unterschiedliche Browser oder mobile Geräte festlegen.

Nach der Installation des Plugins klicken Sie auf „Design“ und „Dynamic Widgets“. Im nächsten Schritt werden Ihnen die Widget-Bereiche und die aktivierten Widgets angezeigt. Um eines von diesen zu bearbeiten, klicken Sie den Widget-Titel an. Im sich daraufhin öffnenden Optionsfenster legen Sie Ihre individuellen Einstellungen fest.

Bild-09Die Anzeige von individuellen Widgets auf mobilen Geräte mit dem Plugin „Responsive Widgets“

Wenn Sie individuelle Texte auf ausgewählten mobilen Geräten anzeigen lassen möchten, installieren Sie das Plugin „Responsive Widgets“. Nach erfolgreicher Installation werden dem Widgetbereich durch das Plugin eine Reihe neuer Widgets hinzufügt, beispielsweise „iPad (landscape)“, „Nexus Tablets“ und „Samsung Tablets“.

Um für ein Gerät eine Meldung hinzuzufügen, ziehen Sie das entsprechende Widget in einen Widgetbereich und schreiben Ihren individuellen Text in das Feld unter „Text/HTML“. HTML gibt Ihnen die Möglichkeit, einen formatierten Text zu verwenden.

Eigene Widgets mit dem Plugin „Widget Builder“ entwerfen

Um eigene Textbereiche, Formulare oder Dateien in einem Widgetbereich anzeigen zu lassen, ist das Plugin „Widget Builder“ hilfreich“. Wenn Sie dieses installiert haben, finden im Administrationsbereich im Hauptmenü unter „Design“ die neue Schaltfläche „Widget Builder“. Mit Klick auf diese öffnet sich ein neues Fenster mit einer Übersicht Ihrer bereits selbst geschriebenen Widgets, sofern schon welche vorhanden sind. Um ein neues Widget zu erstellen, klicken Sie auf „Add New Widget“.

Bild-10Im nächsten Schritt öffnet sich ein Editorfenster. Hier geben Sie einen Titel für Ihr Widget ein und schreiben einen Text oder HTML in das Textfeld, verknüpfen ein Bild oder fügen ein Kontaktformular hinzu. Anschließend geben Sie eine Beschreibung in das Feld unter „Widget Admin Details“ ein und legen durch Aktivieren oder Deaktivieren der Checkboxen vor „Available As Dashboard Widget“ oder „Disable Sidebar Widget“ fest, wo Ihr Widget erscheinen soll. Zum Schluss klicken Sie auf „Update“, um Ihr Widget zu speichern.

Bild-11Klicken Sie danach auf „Design“ und „Widget“, um Ihr persönliches Widget einem Widget-Bereich hinzuzufügen. Sie finden dieses in der Widget-Übersicht auf der linken Seite. Durch Anklicken des Widget-Titels können Sie im aufklappenden Popup-Fenster auswählen, in welchem Bereich das Widget angezeigt werden soll. Dann klicken Sie auf „Widget hinzufügen“.Bild-12

Das Widget wird daraufhin im ausgewählten Bereich im Frontend anzeigt.Bild-13

Mit dem Plugin „Widget Importer & Exporter“ Widgets in eine andere WordPress-Installation verschieben

Bild-14Wenn Sie mehrere Blogs oder Websites mit WordPress betreiben, ist es hilfreich, nicht jede Einstellung und jedes Widget neu erstellen zu müssen. Um Widgets in eine andere WordPress-Installation verschieben oder aus dieser importieren zu können, unterstützt Sie das Plugin „Widget Importer & Exporter“.

Nachdem Sie das Plugin installiert haben, klicken Sie im Hauptmenü auf „Werkzeuge“ und dann auf „Widget Importer & Exporter“. Im sich öffnenden Dialogfenster betätigen Sie die Schaltfläche „Export Widgets“, um alle aktiven Widgets an einem Speicherort Ihrer Wahl abzulegen. Das Plugin speichert die Widgets im Format „.wie“.

Bild-15Um die Widgets in eine andere WordPress-Präsenz zu integrieren, müssen Sie das Plugin „Widget Importer & Exporter“ auch in dieser installieren. Anschließend öffnen Sie dort den Werkzeug-Bereich und klicken auf „Durchsuchen“. Wählen Sie die gespeicherte „.wie“-Datei aus und starten Sie den Import durch Mausklick auf „Import Widgets“. Das Plugin zeigt Ihnen anschließend eine Import-Übersicht an. Sofern die Plugins bereits vorhanden waren, erhalten Sie darüber eine Meldung.

 

Mehr Tipps und Tricks zum Thema WordPress finden Sie in unserem Kurs WordPress Tutorial für Einsteiger.

Sie haben einen Bildungsgutschein?
Mit dem Bildungsgutschein zum Projektmanager!
(PRINCE2®, ITIL®, Six Sigma)
Jetzt mehr erfahren & Beratung anfordern!
Nein, danke!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

10 Gedanken zu „WordPress Widgets – Ohne diese fünf Helfer sind Sie verloren

  • Stefan

    Hallo!
    Ja, tolle Infos mit den Widget… Woran ich noch bastel und momentan noch keine Lösung habe, ist die Nutzung von Blocks in Sidebars.
    So gibt es z.B. einen Ansprechpartner für verschiede Bereiche. Diesen Ansprechpartner möchte ich entsprechend in einer Sidebar auf den passenden Seiten anzeigen. Idealerweise muss ich die Kontaktdaten nur einmal eingeben, und referenziere in der Sidebar lediglich auf diesen Textblock. Wie kann man das denn wohl realisieren?
    Ich hoffe, ich habe mein Anliegen halbwegs verständlich beschrieben 😉

    Liebe Grüße,
    Stefan

    1. Till Vennemann

      Hi Stefan,

      wir haben unterschiedliche Sidebars je nach Kategorie. Jede Sidebar lässt sich dann mit anderen Widgets bestücken bspw. in deinem Fall mit unterschiedlichen Kontaktinformationen.

      Das kann man selber coden oder man nutzt dafür ein Plugin z.B. https://wordpress.org/plugins/custom-sidebars/. Wir haben das selbst gecoded, daher weiß ich nicht wie gut das Plugin ist, aber die Bewertungen sehen gut aus. Probier es es doch einfach mal aus. Ich hoffe ich konnte dir helfen.

      Beste Grüße

      Till von Lecturio.

  • Jonas

    Hallo,

    kann man in Widgets irgendwie Bilder einfügen?

    Schöne Grüße,

    Jonas

    1. Till Vennemann

      Hallo Jonas,

      danke für deine Frage.

      Da Widgets nur „Platzhalter“ sind kannst du diese mit verschiedensten Inhalten befüllen – natürlich auch mit Bildern. Am einfachsten ist es, wenn du dafür das sogenannte Text-Widget benutzt. Dieses ist standardmäßig bei WordPress mit an Bord und ist extrem flexibel. Wir benutzen es bspw. um in der Sidebar die Vorschaubilder für unsere Videokurse einzubinden.

      Um ein Bild einzufügen, musst du im Text-Widget nur folgenden HTML-Code einbauen: < img src="BILD-URL" >. Die Bild-URL findest du in der Medienübersicht deiner Bilder. Zusätzlich kannst du natürlich auch noch das Bild stylen, damit es das richtige Format hat. Weitere Informationen zum Styling von -tags findest du hier .

      Ich hoffe ich, ich konnte dir helfen und wenn du weitere Fragen hast, dann stell sie einfach. 🙂

      Beste Grüße

      Till von Lecturio

  • Reemona

    Hallo Frau Samson,

    super Tools, danke! Nur wie kann man den Platz ohne Widget besser zu nutzen? Meine Widgets sollen nur auf der Startseite angezeigt werden, auf den übrigen nicht. Die anderen Seiten sollen also durch die „fehlenden“ Widgets den Platz nutzen können. Haben Sie einen Tipp für mich?
    Freundliche Grüße
    reemona

  • Hr. Walia

    Die Widgets lassen sich im Admin-Modus weder verschieben noch öffnen. Ich verwende die Version 4.1. Im Internet recherchiert und eine Anpassung im Config vorgenommen (Anpassung war für Version 3.5). Aber es funktioniert nicht.

    Haben Sie eine Idee, was man da machen könnte?
    Vielen Dank für Ihr Feedback.

    Freundliche Grüsse
    Walia

    1. Maria Jaehne

      Hallo Hr. Walia,

      vielen Dank für Ihre Anfrage. Leider können wir Ihnen hier tatsächlich nicht weiterhelfen, verweisen aber gern auf das deutsche WordPress Forum, in dem Ihnen sicherlich die Profis eine Antwort geben können: http://forum.wpde.org/

      Ich hoffe, das hilft Ihnen weiter und grüße Sie herzlich: Maria Jähne.

  • Rosemarie Samson

    Seit 3 Tagen ist bei meinem WP-Blog die primäre Seitenleiste nicht mehr sichtbar, obwohl sie im Dashbord eingerichtet ist. Die Widgets befinden sich jetzt unten vor dem Footer – Bereich.

    Dies ist nur im Google Crome und im Morzilla , im Internet-Explorer wird die Seitenleiste normal angezeigt ( leider erscheinen dort die Sozial-Media Button wie Texteingabefelder eines Formulares ? )Die falsche Anzeige ist auch bei Partnern von mir , liegt also wohl nicht an meinem PC, scheinbar ja auch nicht an WP, da die Anzeige im Internet-Explorer ( fast ) korrekt ist.
    Die Versionen von Crome und Morzilla sind alle aktualisiert, ich benutze Windows XP. Bis vor 3 Tage war auch noch alles in Ordnung und ich habe wissentlich nichts verändert.

    Kann mir dabei jemend helfen ?

    1. Francis Markert

      Hallo Frau Samson,
      wenn ich das richtig sehe, müssen Sie für den Inhaltsbereich Ihrer Seite und die Sidebar die Breite ändern. Für eine responsive Darstellung empfehle ich die Angabe in Prozent-Werten. Außerdem müssen Sie sicherstellen, dass das Floating für beide DIVs richtig vergeben ist. Weitere Informationen zu Ihrem Problem finden Sie im Video-Vortrag „CSS Grundprinzip von float“ (http://www.lecturio.de/software/css-float.vortrag).
      Viel Erfolg bei der Problembekämpfung und ein erholsames Wochenende