Theme anpassen und einrichten

Lektion Fortschritt:

Sie haben ein passendes Theme für Ihre Website installiert und aktiviert. Jetzt muss dieses noch angepasst und eingestellt werden. Wir möchten hier allerdings nur die wichtigen Grundeinstellungen ansprechen, da der Funktionsumfang von Theme zu Theme unterschiedlich ist. Alle Einstellungsmöglichkeiten finden Sie immer in der Theme-Dokumentation, die in der Regel jedem gekauften, aber leider nicht immer jedem kostenlosen Theme beiliegt.

Je mehr Sie sich allerdings mit WordPress und der Handhabung befassen, umso sicherer werden Sie im Umgang mit den jeweiligen Einstellungen werden, da vieles selbsterklärend ist und intuitiv von der Hand geht.

Um Änderungen oder erste Einstellungen an Ihrem Theme vorzunehmen, finden Sie im linken Menüpunkt ‚Design‘ die dazugehörigen Einstellungsmöglichkeiten unter ‚Anpassen‘:

WP-Theme anpassen

Daraufhin öffnet sich Ihre Website mit einem Einstellbereich auf der linken Seite: dem so genannten Theme-Customizer. Hier am Beispiel mit dem Standard-Theme TwentySixteen:

WordPress Customizer in TwentySixteen
Der WordPress Theme-Customizer, oft auch nur „Customizer“ genannt.

zu 1) Schließen

Mit einem Klick auf das X kommen Sie zurück zum WordPress-Dashboard. Alle Ihre Änderungen gehen dabei verloren. Natürlich nur, wenn Sie welche vorgenommen haben.

zu 2) Veröffentlichen

Der Button links oben ändert seine Beschriftung je nach Aktion. Wenn Sie nichts geändert haben, steht dort – ausgegraut –  „Veröffentlicht“. Wenn Sie Änderungen vorgenommen haben, ändert er sich in „Veröffentlichen“. Ein Zahnrad zeigt dann an, dass es weitere Optionen gibt, die ich in folgendem Video erklären möchte. Zum einen handelt es sich um die Funktion des Zwischenspeicherns und zum anderen um das Planen von Änderungen am Layout

https://vimeo.com/268355841/settings

zu 3) Theme wechseln

Über den Button „Wechseln“ lässt sich direkt über den Customizer das Theme wechseln:

Theme im Customizer umstellen

zu 4) Responsiveness testen

Sie haben ja bereits gelernt, was „Responsive“ bedeutet. Nämlich, dass sich eine Website bzw. das Theme an die Umgebung anpassen kann. Sprich: Egal auf welchem Gerät Sie sie betrachten, sie wird immer gut aussehen. WordPress bietet Ihnen die Möglichkeit, die Responsiveness zu testen. Und zwar in drei verschiedenen Größen bzw. Geräteklassen. Von links nach rechts:

  • Desktop
    = großer Bildschirm
  • Tablet
  • Mobil/Handy

Klicken Sie auf eines der Icons und Sie werden sehen, wie WordPress versucht, den so genannten sichtbaren Bereich zu vergrößern bzw. zu verkleinern.

zu 5) Einstellungen anpassen

Wie oben beschrieben ist dieser Bereich davon abhängig, welches Theme Sie installiert haben. Wir möchten einige Einstellungen anhand des Standard-Themes „TwentySixteen“ erklären.

zu 5.1) Website-Informationen

Website Informationen im WordPress Customizer
  • Logo
    Mit dem Button „Logo auswählen“ laden Sie die WordPress-Mediathek. Dort können Sie ein Logo auswählen oder aber ein eigenes hochladen.
  • Titel der Website
    Der globale Name der Website. Dies kann z.B. Ihr Firmenname sein.
  • Untertitel
    Ein sekundärer Titel. Zum Beispiel eine Zeile, die beschreibt, was Sie anbieten.
  • Titel und Untertitel der Website anzeigen
    Bestimmen Sie, ob der Titel und der Untertitel angezeigt werden soll. Dies zu deaktivieren ist vor allem dann sinnvoll, wenn Sie nur Ihr Logo an der Stelle des Titels sehen wollen.
  • Website Icon
    Wie Sie der Beschreibung schon entnehmen können ist das Website-Icon das Bild, welches in manchen Browser-Tabs erscheint. Auf Mobiltelefonen wird es ebenfalls dann benutzt, wenn es auf dem Home-Bildschirm als eigenständiges Applikations-Icon abgelegt wird. Hier ein Beispiel, wie es auf einem iPhone aussieht, wenn Sie unsere Seite als Favorit auf dem Startbildschirm hinterlegen:
iPhone 6 Website Icon aus WordPress
Oben rechts sehen Sie unser Website-Icon

zu 5.2) Farben

Zum Thema Farben müssen wir sicherlich nicht all zu viel erklären. Das meiste dürfte selbsterklärend sein:

Farbwähler im WordPress Customizer

zu 5.3) Headerbild

Ein Header ist zu deutsch der Kopf(bereich). Hierbei handelt es sich also um ein Bild im Kopfbereich der Seite. Das TwentySixteen Theme erlaubt das Verändern des Headerbildes.

Headerbildformular im WordPress Customizer

Klicken Sie auf den Button „Neues Bild hinzufügen“. Daraufhin öffnet sich die Mediathek. Wählen Sie ein Bild oder laden Sie ein neues hoch. Falls die Abmessungen noch nicht passen, wird Sie WordPress auffordern, das Bild vorher zuzuschneiden:

Zuschneiden eines Bildes in der WordPress Mediathek
Durch Klicken & Ziehen können Sie einen bestimmten Bildausschnitt auswählen

Nachdem das Bild zugeschnitten wurde, wird die Vorschau dynamisch aktualisiert und Sie sehen das Headerbild im Kopfbereich der Website. Nun ist es möglich, mehrere Headerbilder hinzuzufügen. Mit einem Klick auf den Button „Bilder zufällig anordnen“ können Sie einstellen, dass aus der Auswahl jeweils ein Bild zufällig gewählt werden soll. Das heißt: Mit jedem Seitenaufruf auf Ihrer Website wird ein anderes Headerbild zufällig angezeigt.

WordPress Customizer mit Headerbild-Vorschau

zu 5.4) Hintergrundbild

Man sieht sie nicht mehr oft: die Hintergrundbilder. Als Stilelement sind sie im Moment aus dem Webdesign verschwunden. Nichtsdestotrotz ist es im TwentySixteen Theme nach wie vor möglich, ein eigenes festzulegen. Und das geht – Sie erraten es sicherlich – wieder über den Button „Bild auswählen“, der Sie erneut in die WordPress-Mediathek führt:

Formular zum Hinzufügen eines Hintergrundbildes im WordPress Customizer
Erweiterte Einstellungen zum Hintergrundbild im WordPress Customizer

Nach dem Hochladen erhalten Sie noch mehr Optionen, die wir Ihnen unten erläutern möchten:

  • Hintergrundbild entfernen
  • Bild wechseln
  • Wiederholung des Hintergrunds
    • Keine Wiederholung
      Das Bild wird nur einmalig angezeigt.
    • Wiederholen
      Das Bild wird aneinandergereiht und füllt den gesamten Bereich.
    • Horizontal Wiederholen
      Das Bild wird nur horizontal wiederholt und aneinandergereiht.
    • Vertikal Wiederholen
      Das Bild wird nur vertikal wiederholt und aneinandergereiht.
  • Position des Hintergrunds
    Ist wohl selbsterklärend. Die Möglichkeiten sind:
    • Links
    • Zentriert
    • Rechts
  • Scroll-Verhalten des Hintergrunds
    • Mitscrollend
      Das Bild scrollt mit, wenn Sie der Seite weiter nach „unten“ folgen.
    • Fixiert
      Das Hintergrundbild bleibt stehen, während Sie scrollen. Das erzeugt einen etwas futuristischen Eindruck.

Nicht immer macht jede Option Sinn. Im TwentySixteen Theme kann man nämlich nur den kleinen schwarzen Rahmen rund herum mit einem Hintergrundbild belegen. Würde man „Keine Wiederholung“ und „Zentriert“ wählen, würde man keine Veränderung wahrnehmen.

Eingefügter Hintergrund im Theme Customizer mit Vorschau
Wir müssen näher heranzoomen, um genau zu sehen, wie sich der Hintergrund verändert hat

zu 5.5) Menüs

Die meisten Themes bieten ein oder mehrere Plätze für individuelle Menüs. Wir erklären Ihnen später – im Kapitel Erstellung eines individuellen Menüs – noch genauer, wie man Menüs anlegt und bearbeitet. Denn es gibt in WordPress einen eigenen Menüpunkt dafür. Im Moment genügt es, wenn wir Ihnen aufzeigen, dass das Erstellen sowie Bearbeiten eines Menüs auch im Customizer funktioniert.

Liste aller Menüs

In dieser Ansicht wird Ihnen normalerweise eine Liste aller Menüs angezeigt. In unserem Fall existiert allerdings noch keines. Deswegen erscheint lediglich der Punkt „Menü-Positionen“. Beachten Sie in diesem Zuge auch das Einstellrad oben rechts. Klicken Sie darauf um sich erweiterte Optionen anzeigen zu lassen.

Übersicht über Menüs im WordPress Customizer
Durch das Einstellrad rechts oben können Sie weitere Optionen einblenden

Menü Positionen

Klicken Sie auf den Punkt „Menü Positionen“. Nun erhalten Sie folgende Übersicht:

Auflistung der Menü-Positionen im WordPress Customizer

Da unser aktuelles Theme (TwentySixteen) zwei Menü-Positionen unterstützt, werden diese hier aufgelistet. Die primäre und die Social-Links-Position. Über das Auswahlmenü können Sie dann zuweisen, welches Menü zu welcher Position hinzugefügt werden soll.

Menü bearbeiten

Natürlich ist es auch möglich, Menüs direkt über den Customizer zu bearbeiten. Wir möchten allerdings das Kapitel Erstellung eines individuellen Menüs nicht komplett überspringen, sondern werden an anderer Stelle noch einmal auf den Menü-Customizer eingehen.

zu 5.6) Widgets

Die meisten Themes unterstützen so genannte Seitenleisten. Diese Seitenleisten müssen sich aber – wie der Name vielleicht andeuten mag – nicht immer an der Seite (z.B. links oder rechts) befinden. Sie können auch im Fußbereich oder gar im Kopfbereich zur Verfügung stehen. In jedem Fall werden solche Bereiche auch oft mit dem Oberbegriff „Widgetbereich“ zusammengefasst.

Widgets – wie Sie später noch lernen werden – sind eine Art „kleine Helferlein“. Ein Standard-Widget in WordPress ist zum Beispiel ein Suchfeld. Somit können Sie in eine Seitenleiste (oder einem Widgetbereich) das Widget „Suchfeld“ hinzufügen. Und es erscheint dann genau an dieser Stelle. Klingt kompliziert? Das macht nichts. Wir erklären Ihnen das im Kapitel Widgets und Widget-Bereiche noch im Detail.

Ähnlich wie bei den Menüs möchten wir aber vorwegnehmen, dass auch Widgets und Widget-Bereiche über den Theme-Customizer konfiguriert werden können. Meist mit einer Live-Vorschau. So dass Sie sofort sehen können, wo und was sich auf Ihrer Seite verändert.

Klicken Sie zunächst auf den Menüpunkt „Widgets“, um zum nächsten Inhalt zu kommen:

WordPress Customizer zeigt Liste mit Seitenleisten
Liste von Seitenleisten

WordPress wird Ihnen dann eine Liste von Seitenleisten zeigen. Da das Standard-Theme „TwentySixteen“ nur eine Seitenleiste hat, wird nur eine angezeigt. Und diese trägt auch noch den Namen „Seitenleiste“. Klicken Sie darauf:

WordPress Customizer zeigt Widgetbereiche mit Live-Vorschau
Widgets werden an speziell dafür vorgesehenen Plätzen eingefügt

Wie Sie sehen, können Sie Widgets hinzufügen, entfernen, einstellen und umsortieren. Im Bild oben erkennen Sie, dass die Suche, die letzten Beiträge, die letzten Kommentare und so weiter eingefügt wurden. Sie werden live auf Ihrer Website angezeigt. Und zwar in der vom Theme festgelegten Seitenleiste.

Weitere Informationen zum Thema Widgets finden Sie im Kapitel: Widgets und Widgetbereiche