WordPress für Einsteiger: individuelle Inhalte mit Widgets

WordPress für Einsteiger: individuelle Inhalte mit Widgets

Wie kleine Bausteine gestalten Widgets in Deinem WordPress-Theme die Bereiche um Deine eigentlichen Blogbeiträge herum. Der Workshop zeigt, welche Möglichkeiten Widgets bieten und wie Du sie ganz einfach in Dein WordPress-Blog einfügst.

Ein besonderer Teil in jedem WordPress-Theme sind die Widget-Bereiche. Das sind Standard-Bereiche im Layout, die in der Regel auf jeder Seite des Blogs angezeigt werden. Beispiele hierfür sind ein oder zwei Randspalten oder Kästen unterhalb von Beiträgen. Kurz gesagt: alles, was Du auf dem Blog neben den Beiträgen noch findest.

Innerhalb eines Widget-Bereichs kannst Du mehrere einzelne Widgets platzieren. Die sind nichts anderes als kleine Elemente mit definierbarem Inhalt. Ein Widget zeigt beispielweise die drei aktuellsten Kommentare, zufällig ausgewählte Fotos, ein einfaches Such-Formular oder einen Kalender zum Auffinden älterer Beiträge. Fertige Widgets sind entweder bereits in Deinem Theme enthalten oder Du kannst sie per Plugin zusätzlich installieren.

Die Widget-Bereiche machen einen wesentlichen Teil der optischen Gestaltung des Themes aus und unterscheiden sich stark von Theme zu Theme.

Manche Themes haben nur einen einzigen Widget-Bereich (links), andere bieten mehrere, bis hin zu einer fast unüberschaubaren Vielfalt (rechts).
Manche Themes haben nur einen einzigen Widget-Bereich (links), andere bieten mehrere, bis hin zu einer fast unüberschaubaren Vielfalt (rechts).

In den folgenden zwei Beispielen sind die Widget-Bereiche des jeweiligen Themes mit einem roten Rahmen markiert. Die Beispiele zeigen, wie unterschiedlich Widgets das Layout eines Blog-Themes bestimmen können:

Beispiel-Theme mit drei gruppierten Widget-Bereichen rechts von den Blog-Beiträgen.
Beispiel-Theme mit drei gruppierten Widget-Bereichen rechts von den Blog-Beiträgen.
Beispiel-Theme mit Widget-Bereichen auf der Homepage
Beispiel-Theme mit Widget-Bereichen auf der Homepage

Nach der Installation eines Themes musst Du also auch diese Widget-Bereiche nach Deinen Wünschen einrichten, sprich: Die Bereiche mit Inhalt füllen. Der Einfachheit halber arbeiten wir im Beispiel mit einem Theme, das nur einen Widget-Bereich hat, der als Randspalte links neben den Blogbeiträgen auftaucht.

Beispiel für ein Widget, wie es der Besucher Deines Blogs sieht.
Beispiel für ein Widget, wie es der Besucher Deines Blogs sieht.

Nach dem gleichen Prinzip befüllst Du aber auch mehrere Widget-Bereiche: Widget auswählen, per Drag-and-Drop in den entsprechenden Widget-Bereich hineinziehen und dort gegebenenfalls noch konfigurieren.

Konfiguration eines Widgets, in diesem Beispiel mit Titel („Meine Kategorien“) und drei möglichen Optionen.
Konfiguration eines Widgets, in diesem Beispiel mit Titel („Meine Kategorien“) und drei möglichen Optionen.

Widgets einem Widget-Bereiche zuordnen

Um Widgets einzurichten, gehst Du im Menü Design auf den Unterpunkt Widgets. Dort siehst Du in einer zweigeteilten Ansicht links verfügbaren Widget-Typen und rechts die Bereiche, in denen Du Widgets platzieren kannst.

Mit der Maus kannst Du nun per Drag-and-Drop ein Widget nach dem anderen in den Widget-Bereich ziehen und dort ablegen.

Widget-Bereiche: einfach per Drag-and-Drop zusammenstellen
Widget-Bereiche: einfach per Drag-and-Drop zusammenstellen

Ab diesem Moment ist das Widget – in unserem Beispiel eine Liste der Beitrags-Kategorien – sofort für Deine Blogleser sichtbar. Probiere die vorhandenen Widgets einfach aus um herauszufinden, was sie genau leisten und welche Du davon verwenden willst.

Das im Beispiel eingerichtete Kategorien-Widget taucht sofort in der Randspalte des Blog auf.
Das im Beispiel eingerichtete Kategorien-Widget taucht sofort in der Randspalte des Blog auf.

So einfach, wie Du Widgets in WordPress einrichtest, kannst Du sie übrigens auch wieder entfernen: Falls das jeweilige Widget nicht in aufgeklapptem Zustand angezeigt wird, klickst Du zunächst auf den kleinen Pfeil rechts, dann auf Löschen. Oder Du ziehst das Widget per Drag-and-Drop aus dem Widget-Bereich heraus und lässt es außerhalb los.

Widgets einrichten

Die meisten Widgets musst Du jetzt noch konfigurieren, beispielsweise eine Überschrift festlegen, wie im Kategorien-Widget-Beispiel. Viele Widgets haben auch Optionen, die Du mit einem Häkchen aktivieren oder deaktivieren kannst, oder bei denen Du einen bestimmten Wert eintragen musst. Bei einem Widget zum Anzeigen der aktuellsten Kommentare zum Beispiel wäre das  die Anzahl der maximal anzuzeigenden Kommentare. Mit Klick auf Speichern schließt Du die Konfiguration ab.

Das „Text“-Widget ist in jedem Theme vorhanden. Seine Besonderheit: Es hat keine spezielle Funktion, sondern besteht nur aus Überschrift und Textbereich. So kannst Du einen beliebigen Text in einem Widget-Bereich anzeigen lassen. Innerhalb des Textes ist auch HTML-Code erlaubt, sodass Du den Inhalt individuell formatieren kannst.

Beispiel für ein Text-Widget: links im Widget-Editor von WordPress, rechts wie es auf Deinem Blog aussieht.
Beispiel für ein Text-Widget: links im Widget-Editor von WordPress, rechts wie es auf Deinem Blog aussieht.

Reihenfolge ändern, Widgets verschieben oder deaktivieren

Die Reihenfolge der Widgets in einem Bereich änderst Du einfach per Drag-and-Drop. Genau so verschiebst Du auch ein Widget von einem in einen anderen Bereich.

Inaktive Widgets: Lagerplatz für vorübergehend nicht benutzte Widgets
Inaktive Widgets: Lagerplatz für vorübergehend nicht benutzte Widgets

Und wenn Du ein Widget einmal vorübergehend nicht verwenden möchtest, aber den Inhalt oder die Konfiguration nicht gleich komplett löschen willst, verschiebst Du das Widget nach links unten in den Bereich Inaktive Widgets. Dort kannst Du die Widgets dann jederzeit wieder reaktivieren, ohne Einstellungen und Inhalte neu erstellen zu müssen.

Schlagworte: ,

Teilen

  1. Ina sagte am

    Hallo Liebes Blogger Team
    Ich bin nun dank euch einige Schritte weiter und habe die soweit layout und co festgelet. Leider bin ich noch nicht dahinter gestiegen wie ich einfach normale Texte verfasse also keine Blog-Beiträge, wie kann ich die Blogger funktion deaktivieren, da ich es als reine Homepage nutze?

    Freue mich auf Eure Antwort
    Liebe Grüße Ina

    Antworten
  2. Franz Neumeier sagte am

    Hallo Steffen,

    manche Themes erlauben es, Header-Bild und Logo unabhängig voneinander hochzuladen. Wenn ich es richtig sehe, verwendest Du Twentysixteen, bei dem es diese Möglichkeit nicht gibt. Insofern ist Dein Ansatz ganz richtig: Logo in das Header-Bild integrieren und dann neu hochladen.

    Ansonsten müsstest Du direkt in das Theme-Design eingreifen bzw. ein Child-Theme anlegen und dort entsprechende Veränderungen im HTML-Code vornehmen und das wäre dann doch ein wenig mit Kanonen auf Spatzen geschossen …

    Herzliche Grüße
    Franz

    Antworten
  3. Steffen Göllnitz sagte am

    Euer Blog ist sehr gut gelungen. Nun aber zu meinem Problem. Ich habe problemlos ein neues Bild in meinen Header eingefügt, möchte aber nun ein eigenes Logo zusätzlich einbauen. Muss ich dazu mein Headerbild bearbeiten oder kann ich das Logo noch zusätzlich einbauen?

    Danke für Eure Mühe.

    Der Steffen

    Antworten

Sie können erst kommentieren, wenn Sie unseren Datenschutzbestimmungen und den Cookies zugestimmt haben. Aus Datenschutzrechtlichen Gründen dürfen wir andernfalls keine personenbezogenen Daten von Ihnen aufzeichnen.

Klicken Sie dazu einfach unten im Browser Fenster auf den blauen Button Akzeptieren. Nach dem Neuladen der Seite können Sie Ihr Kommentar schreiben.

 

Diese Webseite verwendet Cookies, um die Nutzung der Seite zu verbessern, den Erfolg von Werbemaßnahmen zu messen und interessengerechte Werbung anzuzeigen. Durch die Nutzung dieser Seite erklären Sie sich damit einverstanden. Informationen