WordPress Theme anpassen Teil 1: Theme Optionen & Theme Customizer

WordPress Theme anpassen Teil 1: Theme Optionen & Theme Customizer
5 (100%) 1 vote

WordPress ist wie eine Droge! Diesen Satz habe ich vor Kurzem in einem Blogbeitrag gelesen und kann dem Autor auf jeden Fall zustimmen. Die Software hat durchaus ein gewisses Suchtpotential. Mal eben schnell eine einfache Vereins- oder Hochzeits-Website erstellen und ehe man sich versieht, steckt man mitten drin in der Theme Anpassung und erstellt sogar eigene WordPress Themes, weil die übrigen 100.000 Themes, die es bereits gibt, niemals den eigenen Vorstellungen entsprechen können ;-). So in etwa lässt sich auch mein Start in das WordPress Leben kurz zusammenfassen.

(*) = Affiliate Links

Die folgende Artikelreihe wird hoffentlich auch dich in den WordPress Bann ziehen. Denn du wirst sehen, wie einfach es ist, ein bestehendes WordPress Theme an die individuellen Bedürfnisse anzupassen.

Die Artikelserie „WordPress Theme anpassen wie ein Profi“ wird aus folgenden Artikeln bestehen:

  • Teil 1 – Theme Optionen & Theme Customizer
  • Teil 2 – Browser Entwickler Tools und zusätzliches CSS
  • Teil 3 – Eigene Shortcodes erstellen und einfach wiederverwenden
  • Teil 4 – WordPress Child Theme anlegen
  • Teil 5 – Custom Page Templates erstellen

Die Serie startet mit der einfachsten Möglichkeit, ein Theme anzupassen, nämlich nur über die vom Theme Entwickler zur Verfügung gestellten Optionen. Die Theme Optionen findest du entweder auf einer Unterseite im Adminbereich (old fashion way) oder im Theme Customizer, wie es bei modernen und neueren Themes der Fall ist.

WordPress Theme Anpassung über Theme Optionen im Adminbereich

Da es jedem Entwickler frei steht, wo er die Theme Optionen platziert, sind diese teilweise gar nicht so einfach zu finden. Man aktiviert ein Theme und muss dann erst mal überprüfen, welche Menü-Punkte bzw. Untermenü-Punkte im Adminbereich neu dazugekommen sind.

Historisch bedingt ist es leider immer noch gängige Praxis, dass die Theme-Optionen im Adminbereich zu finden sind. Selbst beim beliebtesten WordPress Theme Divi (*) befinden sich die Einstellungen im Adminbereich. Da es Divi schon lange vor der Theme Customizer Funktion gab, gehe ich davon aus, dass die Entwickler die schön gestylten Theme Optionen nicht nachträglich umswitchen wollten.

Divi Theme anpassen mit Theme Optionen - leider immer noch im Adminbereich

Divi Theme anpassen mit Theme Optionen – leider immer noch im Adminbereich

Als Ersatz für die Anpassung im Customizer bekam Divi einen komfortablen Page Builder, der eine einfache Handhabung mit Live-Vorschau bietet.

WPC Tipp:

Ich lehne mich jetzt mal aus dem Fenster und sage: Falls du ein neues/junges Theme verwendest, welches die Theme Optionen anstatt im Customizer im Adminbereich hat, rate ich dir ein anderes Theme zu wählen. Da ich selbst schon WordPress Themes erstellt habe, weiß ich, dass die Entwicklung / Programmierung für den Customizer nicht ganz einfach ist. Ein Entwickler, der diese Hürden scheut, wird sehr wahrscheinlich auch an anderen Stellen im Code den Weg des geringsten Widerstands gehen und möglicherweise eine Code-Qualität produzieren, die nicht „state of the art“ ist.

WordPress Theme Anpassung über Theme Customizer

Der größte Vorteil des Theme Customizers gegenüber der Anpassung im Adminbereich ist die Live-Vorschau. Übrigens den Begriff Live-Vorschau darfst du ruhig wörtlich nehmen. Wenn du deine Seite erst aktualisieren musst, damit die Änderungen sichtbar werden, ist es keine Live-Vorschau. Das darf man gerne auch als Quailtätsmerkmal eines Themes bezeichnen, wenn jede Anpassung sofort sichtbar wird.

Zu dem Customizer gelangst du im Adminbereich über Design > Customizer oder indem du in der Adminbar auf Customizer klickst. Hier am Beispiel des WordPress Themes Twenty Seventeen.

WordPress Theme anpassen mit dem Theme Customizer

WordPress Theme anpassen mit dem Theme Customizer an Beispiel von Twenty Seventeen

Seit WordPress Version 4.9 ist es möglich, die Customizer Einstellungen zu speichern, ohne diese gleich zu veröffentlichen (Punkt 1 im oberen Screenshot). Praktisch ist auch, dass die gespeicherten Design-Optionen per Link an Mitarbeiter, Kunden oder Lieferanten verschickt werden können. Außerdem lassen sich die Änderungen planen und zu einem späteren Zeitpunkt veröffentlichen.

Darüber hinaus gibt es bestimmte Sektionen, die standardmäßig bei jedem Theme enthalten sind (Punkt 2 bis 7 sowie Punkt 9 im oberen Screenshot). Im Großen und Ganzen können hier die gleichen Anpassungen vorgenommen werden, wie im Adminbereich . Das sind z. B. Titel und Beschreibung der Seite ändern (2), ein allgemeines Farbschema auswählen (3), Header-Bild hochladen (4), Menüs erstellen (5), Widgetbereiche mit Widgets befüllen (6) oder Startseite festlegen (7). Standard bedeutet jedoch nicht, dass diese Optionen auch automatisch in deinem Theme zu finden sind. Der Theme Entwickler kann nämlich bestimmte Default-Optionen auch entfernen.

Die Theme Optionen wurden beim Theme Twenty Seventeen unter einer eigenen Sektion zusammengefasst.

Zusätzliches CSS (9) ist wiederum eine Funktion, die standardmäßig enthalten ist. Wir werden uns im 2. Teil dieser Artikelreihe näher mit dieser Option befassen.

Sehr nützlich sind auch die 3 Icons am unteren Rand des Customizers (10), mit denen man überprüfen kann, wie gut die eigene Website für mobile Geräte optimiert ist.

Es gibt WordPress Themes, wie z. B. das tolle OceanWP (*), die durch die zahlreichen Theme Optionen im Customizer die Theme Anpassung selbst für WordPress Einsteiger erheblich vereinfachen.

WordPress Theme Anpassung über die Theme Optionen im Customizer beim besten kostenlosen Theme OceanWP

WordPress Theme Anpassung über die Theme Optionen im Customizer beim besten kostenlosen Theme OceanWP

Die Optionen (Settings) wurden übersichtlich einzelnen Sektionen zugeordnet, die wiederum in Panels zusammengefasst wurden. Selbst bei der kostenlosen Version des Themes ist die Anzahl der Theme Optionen sehr beeindruckend.

Export/Import Funktion für den Customizer

Zum Abschluss des ersten Teils möchte ich dir noch ein wirklich tolles Plugin vorstellen: Customizer Export/Import. Damit kannst du alle deine Einstellungen im Customizer exportieren und auf einer anderen WordPress Seite wieder importieren. Das Tolle an dem Plugin ist, dass nicht nur die Standard-Einstellungen exportiert werden, sondern alle theme-spezifischen Optionen, die sich im Customizer befinden.

Vermisst du bestimmte Optionen bei deinem WordPress Theme?

Viele WordPress Einsteiger kommen irgendwann an den Punkt, an dem die individuellen Änderungswünsche über die verfügbaren Theme Optionen hinausgehen. Dann wird es Zeit für den zweiten Teil unserer Artikelserie „WordPress Theme anpassen wie ein Profi“ mit dem Browser Entwickler Tools und zusätzlichem CSS.

Du kannst noch Einfluss auf die Artikelreihe nehmen. Sollen in den folgenden Artikeln bestimmte Themen bzgl. Theme Anpassung behandelt werden? Hast du Schwierigkeiten dein WordPress Theme anzupassen? Hinterlasse einfach unten einen Kommentar.

WordPress Theme anpassen Teil 1: Theme Optionen & Theme Customizer
5 (100%) 1 vote
d

Danijel

Hi, mein Name ist Danijel Rose, ich bin der Gründer von WebGeckos, WordPress Trainer und Berater aus Bad Tölz, südlich von München. Über meine WordPress Erfahrungen blogge ich hier auf WPC. Mit WordPress erstelle ich vor allem gerne hochwertige Firmenwebsites, Mitgliederseiten und WordPress Multisites.

Das könnte Dich auch interessieren...

2 Antworten

  1. R
    Ralf Niemietz sagt:

    Der neue Customizer ist wirklich klasse. Leider habe ich es bis jetzt nicht geschafft Shortcode dort unterzubringen (von Polylang). ICh habe die Funktion wp_filter_nohtml_kses ausgeblendet, in der Hoffnung, wenn HTML funktioniert nimmt der Customier auch Shortcode. Tut er leider nicht. Gibt es einen Trick?

    Viele Grüße
    Ralf

    • D
      Danijel sagt:

      Hallo Ralf,
      ich weiß nicht, ob ich deine Frage richtig verstehe. Wo hast du denn versucht den Shortcode im Customizer einzugeben? Die einzige mir bekannte Möglichkeit im Standard Customizer Shortcodes zu verwenden, ist das Text Widget. Seltsamerweise akzeptiert nicht einmal das neue HTML Widget Shortcodes. Aber wenigstens kann man seit der Version 4.9 in das Text Widget Shortcodes eingeben, ohne zusätzlichen Code in die functions.php Datei einzutragen.
      Übrigens im nächsten Teil unserer Artikelserie wird es genau um das Thema Shortcodes gehen 🙂
      Viele Grüße, Danijel

Schreibe einen Kommentar

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