Beim Design der eigenen Website hat man mit einem guten Theme schon viel erreicht. Doch was tun, wenn man das eine oder andere Detail noch ändern bzw. umstellen möchte? Dabei hilft eventuell bereits der Theme Customizer in WordPress.
Über den Theme Customizer oder Designmodifikator kann man in WordPress einige Einstellungen verändern, die Das Theme und Grundeinstellungen für die Website betreffen.
Was der Theme Customizer in WordPress wirklich kann und wovon eigentlich abhängt, welche Einstellungen dort zur Verfügung stehen, das erkläre ich im Folgenden im Detail.
Was ist der Theme Customizer in WordPress?
Der WordPress Theme Customizer ist im Wesentlichen ein Menü mit Einstellungen, welche die Darstellung der Website bzw. auf sonst eine Art und Weise das aktive WordPress Theme betreffen.
Der Titel der Website lässt sich hier genauso verändern, wie ein Logo, Farben oder die Homepage der Website. Doch wer einmal zwischendurch bereits das Theme gewechselt oder bereits mehrere ausprobiert hat, der hat vielleicht gesehen, dass sich die Punkte, die im Customizer gelistet sind, von Theme zu Theme verändert haben.
Woran liegt das? Und sind solcherart verschwundene Einstellungsmöglichkeiten und die dort getroffenen Einstellungen dann für immer verloren? All das sind interessante und berechtigte Fragen, denn WordPress ist grundsätzlich ja flexibel, was den Theme-Wechsel oder die Auswahl des Themes angeht. Zunächst möchte ich aber eine recht wichtige Frage stellen:
Moment mal: Das gewählte WordPress-Theme soll verändert werden?
Diese Frage ist berechtigt, denn ich habe in meinen beiden Artikeln Der ultimative Leitfaden zum richtigen WordPress Theme und WordPress Plugins einfach erklärt (und vielleicht auch noch anderswo, denn dieser Punkt ist wirklicht wichtig) bereits angesprochen, dass man das Design nach Möglichkeit vollständig dem Theme überlassen sollte.
In der Praxis heißt das dann, dass jegliche Funktionalität aus Plugins kommen darf, aber dass man versuchen sollte, Plugins zu vermeiden, die Gestaltungselemente (z.B. eine hübsche Bildergalerie) zur Verfügung stellen. Stattdessen sollte man darauf achten, dass alle benötigten Gestaltungselemente so weit es geht bereits vom WordPress Theme zur Verfügung gestellt werden.
Und nun stelle ich die Frage noch einmal, etwas anders:
Warum sollte ich an meinem gewählten WordPress-Theme etwas verändern wollen?
Einerseits kann ein WordPress Theme durchaus Veränderungen zulassen. In dieser Hinsicht sind die Themes zum Teil sehr verschieden. Bei manchen Themes kann man kaum etwas verändern. Bei anderen dagegen sehr viel. Mein bevorzugtes Theme, Divi von Elegant Themes, ist in dieser Hinsicht hyperflexibel und erlaubt zahlreiche Änderungen.
Aber die Intention von Divi ist auch eher die, dem Website-Betreiber oder Designer möglichst viel Gestaltungsmöglichkeiten auf einer soliden Grundstruktur zu geben. Aber ich schweife ab. Einerseits also tatsächliche Auswahl innerhalb des mehr oder weniger streng vorgegebenen Themes bzw. Designs.
Andererseits könnte es sein, dass das Theme z.B. auf einer besonderen, bereits fertig designten Homepage einige Gestaltungselemente zu konfigurieren hat. Das bedeutet, die zweite Art von Änderungen am Theme sollte man vielleicht besser als Einstellungen oder Konfigurationen bezeichnen.
Wenn es dabei um ein Portfolio oder um diverse Banners auf der Homepage geht, kann das allerdings schon auch das Aussehen und das Design gewaltig mitbestimmen oder verändern. Kurz gesagt, lässt sich also mit dem Theme Customizer alles das einstellen, was die Theme-Autoren noch nicht komplett festlegen bzw. dem Website-Betreiber überlassen wollten.
Wie kann ich den Theme Customizer in WordPress öffnen?
Den WordPress Theme Customizer öffnet man auf zwei verschiedene Arten, je nachdem, ob man sich gerade im WordPress-Dashboard oder in der Ansicht der Website befindet:
- Im WordPress Dashboard navigiert man im linken Seitenmenü zu Design und klickt auf den dortigen Unterpunkt Customizer.
- In der Ansicht der Website navigiert man im oberen Menü des WordPress Dashboards, das auch hier normalerweise noch sichtbar ist (außer, man hat diese Anzeige deaktiviert), auf den Titel der Website, der links oben angezeigt wird und klickt im sich darunter öffnenden Menü auf Customizer oder Designmodifikator.
Die Menüpunkte im linken Seitenmenü des WordPress Dashboards (erste Möglichkeit) sehen dabei so aus:
Das ausklappende Menü aus dem oberen Menü in der Ansicht der Website sieht folgendermaßen aus:
Durch einen Klick auf den jeweiligen Menüpunkt öffnet sich der Theme Customizer am linken Rand des Browserfensters.
Wie sehe ich eine Vorschau der Änderungen, die ich im WordPress Theme Customizer vornehme?
Wenn sich der WordPress Customizer an der linken Seite des Browserfensters öffnet, dann wird die Website rechts davon im verbleibenden Bereich des Browserfensters in einer live-Vorschau angezeigt. Das bedeutet, dass man alle Änderungen, die man im Customizer macht, bereits in der live-Vorschau sehen kann.
Dabei ist zu beachten, dass (per Voreinstellung) beim Öffnen des Theme Customizers aus dem WordPress-Dashboard heraus die Homepage der Website als Vorschau geöffnet wird. Wenn man eine andere Seite als die Homepage als Vorschau haben möchte, muss man folgendes tun:
Zunächst geht man vom WordPress Dashboard aus auf die Website, indem man den Namen der Website links oben im oberen Menü des WordPress Dashboards anklickt. Dort angekommen navigiert man auf jene Seite oder jenen Beitrag der Website, die oder den man als Grundlage für die Vorschau im Customizer benutzen will. Dann öffnet man den Theme Customizer über das obere Menü, wie oben beschrieben.
Kann ich in der Vorschau der Website im WordPress Theme Customizer ganz normal auf meiner Website navigieren?
Ja, die Website funktioniert auch in der Vorschau der Website im Theme Customizer ganz normal, zumindest was das Klicken durch die einzelnen Seiten bzw. die Benutzung der Menüs betrifft.
Das bedeutet unter anderem, dass es eigentlich keine Rolle spielt, auf welcher Seite man den Theme Customizer öffnet. Das gilt allerdings nur unter einer Einschränkung, nämlich solange man zu jener Seite auf der Website, die man in der Vorschau eigentlich sehen will, durch Klicken über die Menüs oder Links auf der Homepage auch tatsächlich gelangen kann.
Wenn das nicht möglich ist, muss man den Theme Customizer eben wieder verlassen, über das Dashboard zur entsprechenden Seite der Website gelangen, diese ansehen und dann den Theme Customizer so öffnen, wie oben in Variante zwei beschrieben.
Jetzt werden Sie vielleicht sagen: Aber man kommt doch immer von der Homepage einer Website überallhin auf dieser Website, oder? Ja, das sollte grundsätzlich so sein, aber dafür gibt es ein paar Ausnahmen. Die, die mir schnell einfallen, sind:
- Es gibt einen versteckten Bereich der Website, den man normalerweise nur über eine Anmeldung oder einen Link in z.B. einer Email erreichen kann
- Die Website befindet sich gerade im Aufbau und die Homepage enthält noch kein Menü oder irgendwelche Links auf die erst später zu publizierenden Inhalte
- Man hat bisher übersehen, Links im Menü oder sonst irgendwo auf der Homepage zu jener Seite anzubringen, die man in der Vorschau haben will. In diesem Fall sollte man das schleunigst korrigieren. Einzelne Seiten, auf die es innerhalb einer Website keinerlei Links gibt, sind problematisch, insbesondere was die Suchmaschinen-Optimierung betrifft
Wie speichert oder verwirft man Änderungen, die im WordPress Theme Customizer vorgenommen wurden?
Änderungen, die man in den Einstellungen im WordPress Theme Customizer tätigt, werden zwar rechts in der Vorschau angezeigt (manchmal zwar nicht ganz fehlerfrei, aber im Prinzip schon), gespeichert werden diese Änderungen aber erst, wenn man ganz oben im Customizer den Button Veröffentlichen klickt.
Im hier gezeigten Screenshot sieht man den Button allerdings mit der Aufschrift Veröffentlicht und etwas matt dargestellt. Das liegt daran, dass es in jenem Screenshot noch keine Änderungen an den Einstellungen gab, die ich hätte speichern bzw. veröffentlichen können. Sobald man allerdings irgendetwas verändert hat, ändert sich auch dieser Button und die Änderungen können veröffentlicht werden.
Das kann übrigens auch verwirrend sein, und zwar dann, wenn man etwas verändert hat, dann aber die Änderungen selbst durch zurückstellen der entsprechenden Einstellung wieder rückgängig gemacht hat. Auch dann wird, obwohl sich de facto nichts geändert hat, die Möglichkeit zum Veröffentlichen angezeigt. Man muss also im Kopf behalten, ob man eigentlich etwas geändert hat oder nicht.
Insbesondere dann, wenn man trotz (vermeintlich) vorhandener Änderungen den Customizer über das X ganz links oben verlassen möchte, kann man noch ins Schwitzen kommen, denn der Customizer fragt nach: Wollen Sie die gemachten Änderungen wirklich verwerfen? Dann müssen Sie zwar nur auf OK klicken ohne mit der Wimper zu zucken, aber das ist manchmal leichter gesagt als getan.
Navigieren im WordPress Theme Customizer
Bevor ich auf die einzelnen Punkte im Theme Customizer eingehe, möchte ich kurz etwas zur Navigation im Customizer sagen. Diese kann auf mehreren Ebenen stattfinden und funktioniert durch Klicken auf die einzelnen Punkte oder die Navigationspfeile daneben.
Als Beispiel sehen Sie im gerade gezeigten Screenshot einige Menüpunkte im Customizer und daneben jeweils einen Pfeil, der nach rechts zeigt. Das bedeutet, dass es zum jeweiligen Menüpunkt entweder Einstellungen oder weitere Menü-Unterpunkte gibt. Durch einen Klick auf den Begriff oder den Pfeil nach rechts gelangt man also auf eine untergeordnete Ebene.
Befindet man sich auf einer untergeordneten Ebene, dann kann man mit einem Klick auf einen Pfeil, der nach links zeigt, wieder auf die nächst höhere Ebene zurück gelangen. Sie werden so einen Pfeil gleich im Folgenden sehen, wenn ich die einzelnen Punkte im Standard-Umfang des Theme Customizers durchgehe.
Welche Einstellungen kann ich im WordPress Theme Customizer vornehmen?
Die Einstellungen, die man im WordPress Theme Customizer vornehmen kann, betreffen ein paar Standard-Einstellungsgruppen in WordPress selbst, sowie mehr oder weniger viele Design-Optionen.
Die Grundeinstellungen in WordPress hat man normalerweise alle über das linke Seitenmenü (Menüpunkt Einstellungen) zur Verfügung, einige wenige gibt es aber auch hier. Konkret geht es dabei um Seitentitel und Tagline, sowie das Logo, das auch im Browser als Favicon verwendet wird, sowie die Startseite. Hier sieht man diese Einstellungen bis auf die Startseite:
Die Einstellungen für die Startseite sehen so aus:
Dazu kommen noch Menüs und Widgets, beides mit der Möglichkeit einer live-Vorschau. Ich verwende zwar für WordPress-Menüs und WordPress-Widgets lieber die entsprechenden Funktionen dazu im WordPress-Dashboard (mehr Informationen finden Sie über die beiden Links zu anderen Artikeln hier auf WebsiteBerater.com), man kann diese aber eben auch über den Theme Customizer bearbeiten.
Unter dem Menüpunkt Menüs im Theme Customizer verbirgt sich übrigens folgende Ansicht
und bei den Widgets bekommt man folgendes zu sehen:
In beiden Fällen öffnen sich Einstellungen, die man analog zu dem benutzen kann, was ich wie bereits erwähnt an anderer Stelle hier bereits beschrieben habe.
Zusätzliche CSS Befehle im WordPress Theme Customizer
Ebenfalls immer hat man die Möglichkeit, im Theme Customizer in WordPress zusätzliche eigene CSS Befehle einzutippen, live an der Vorschau rechts zu testen und zu Speichern, wenn diese Befehle den gewünschten Zweck erfüllen.
Der Menüpunkt Zusätzliches CSS findet sich im Theme Customizer ganz unten, wie man auch im ersten Screenshot weiter oben sehen kann. Die Ansicht, die sich öffnet, wenn man darauf klickt, sieht auf den ersten Blick umfangreich aus, ist aber letztlich nur durch eine echte Eingabe-Fläche gekennzeichnet, wo die CSS Befehle hinein gehören.
Wodurch ist festgelegt, welche Einstellungen ich im WordPress Theme Customizer für mein Theme vornehmen kann?
Einige der Punkte, die man im WordPress Theme Customizer bearbeiten kann, sind universell. Diese habe ich hier bereits in den bisherigen Abschnitten beschrieben. Dazu kommen aber noch weitere Punkte und Eistellungen. Welche Das sind, ist durch das WordPress Theme bzw. durch Plugins festgelegt, die diese Einstellungen ebenfalls erweitern oder modifizieren können.
Nehmen wir als Beispiel das Theme Twenty Nineteen in WordPress. Dieses Theme ist als Standard mit der WordPress-Version 5.0 am Ende des Jahres 2018 zur Verfügung gestellt worden. Auch der allererste Screenshot des Theme Customizers und seiner Einstellungen in diesem Artikel stammt aus einer WordPress Installation, in der Twenty Nineteen aktiv ist. Hier ist er noch einmal.
Inzwischen wissen wir, dass die Punkte Website-Informationen, Menüs, Widgets, Startseiten-Einstellungen und Zusätzliches CSS universell sind. Damit bleiben für Twenty Nineteen nicht mehr viele Einstellungen übrig, die dieses Theme für sich oder sein Aussehen zur Verfügung stellt.
Ganz konkret gibt es sogar nur einen einzigen Menüpunkt, der hier für dieses Theme speziell etwas verändert, und zwar der Punkt Farben. Dazu gleich noch etwas mehr.
Ansonsten kann man aber offenbar am Theme selbst nichts ändern. Moment, das stimmt nicht ganz. Man kann sich natürlich (und das geht immer) des letzten Menüpunkts bedienen und zusätzliche CSS Befehle definieren, die das Aussehen der Website verändern.
Hier gilt allerdings das generelle Problem, das man bei einem Wechsel des Themes oder beim Einsatz von Plugins für diverse Elemente oder die Gestaltung einzelner Passagen auf der Website hätte: Was man an CSS Befehlen zusätzlich anlegt, das bezieht sich eventuell auf CSS-Klassen oder IDs, die nur durch das derzeit aktive Theme erzeugt werden.
Das bedeutet, dass auch solche zusätzlichen CSS Befehle einen Theme-Wechsel nicht unbeschadet überstehen würden, wenn die verwendeten CSS-Klassen dabei im HTML-Code der Seiten und Beiträge verloren gehen. Deshalb ist es am allerbesten, einfachsten und stabilsten, Modifikationen am Theme so weit als möglich zu vermeiden. Aber damit wiederhole ich mich (schon wieder).
Die Ansicht der Vorschau für Desktop-PC, Tablet und Smartphone im WordPress Theme Customizer
Wer ganz genau auf den unteren Rand mancher der hier gezeigten Screenshots geschaut hat, dem wird nicht entgangen sein, dass es dort drei Buttons gibt, die Symbole für Desktop PC, Tablet und Smartphone enthalten. Und diese Buttons machen auch genau das, wonach sie den Anschein erwecken.
Hier sind zunächst einmal die Buttons: Beachten Sie dabei, dass die jeweils gerade angewählte Option unterstrichen ist:
Um also zu sehen, wie z.B. die Homepage von WebsiteBerater.com auf verschiedenen Bildschirmgrößen aussieht, nehmen wir jetzt diese Buttons zur Hilfe. Zunächst hier die Vorschau im Theme Customizer mit der (Standard-) Einstellung auf Desktop-PC:
Dabei wird die volle Breite der Vorschau ausgenützt bzw. das, was von der Breite des Browserfensters bei Abzug der Breite des Theme Customizers noch übrig ist. Auf dem Tablet würde die Seite etwas anders dargestellt. Dort sieht man auch in der hier gezeigten Vorschau, dass an den Seitenrändern etwas Platz gelassen wird:
Dabei fällt auch auf, dass sich aufgrund des responsiven Designs der Seite aus der zweispaltigen Ansicht des Blogs bereits auf dem Tablet eine einspaltige Ansicht des Blogs geworden ist. Außerdem hat sich die Darstellung des Menüs verändert, das jetzt durch die auf mobilen Geräten typischen drei horizontalen Striche gekennzeichnet ist.
Wenn Sie sich für das Thema responsive Webdesign interessieren oder davon hier zum ersten Mal hören, dann lesen Sie bitte unbedingt meinen Artikel, den ich zu diesem Thema geschrieben habe. Sie finden ihn unter dem Titel Wie erreiche ich responsive Webdesign?. Außerdem habe ich responsive Webdesign in meinem Artikel 21 unverzichtbare Funktionen einer modernen Website an ganz prominenter Stelle erwähnt.
Auf dem Smartphone schließlich ist der Darstellungsbereich noch kleiner geworden, und er wird sogar auf allen vier Seiten der Vorschau beschnitten.
Ansonsten ist hier aber alles einfach etwas mehr zusammen gerückt. Alle diese Vorschau-Ansichten sind übrigens scrollbar, sodass man auch in den Ansichten der mobilen Geräte weiter unten nachsehen kann, ob jene Elemente, die man erst durch Scrollen nach unten erreichen würde, ebenfalls korrekt dargestellt werden.
Die Theme-Farbe im WordPress Theme Twenty Nineteen anpassen
Im Theme Customizer in Twenty Nineteen kann man unter dem Menüpunkt Farben die Hauptfarbe, die im Theme verwendet wird, ändern. Zusätzlich kann man mit dieser Farbe auch einen Filter über die Beitragsbilder (auf Englisch featured images) legen lassen, sodass ein etwas kohärenteres Design entsteht.
Das sieht konkret so aus:
Die hier gewählte Farbe sollte man definitiv nicht zu schrill wählen, sondern so, dass ein möglichst stimmiger Gesamteindruck der Website entsteht. Hat man z.B. ein farbiges Logo, das man auch auf der Website einsetzen möchte, so sollte die Farbe auf jeden Fall zu den Farben des Logos passen.
Der WordPress Customizer in komplexen Themes am Beispiel Divi
Damit Sie einen Eindruck davon bekommen, wie der Theme Customizer aussieht, wenn man ein Theme mit vielen Einstellungen benutzt, möchte ich Ihnen ein paar Punkte anhand meines bevorzugten Themes, Divi von Elegant Themes, demonstrieren.
In diesem Screenshot sehen Sie zunächst eigentlich nur neue Bezeichnungen. Die Standard-Punkte, die wir auch schon beim Beispiel Twenty Nineteen gesehen haben, habe ich unten weggeschnitten, um das Bild überschaubar zu halten. Aber nicht alles ist weggeschnitten, denn z.B. die Website-Informationen, die wir vorher gesehen haben, heißen hier Website-Identität und verstecken sich eine Ebene tiefer unter dem Überbegriff Allgemeine Einstellungen.
Es hätte keinen Sinn, hier jetzt alle Punkte im Detail zu diskutieren, aber ich möchte Ihnen schon einen Eindruck vom Umfang der Einstellungen geben. Daher schreibe ich Ihnen hier die Hierarchie der Einstellungen, die man in Divi über den Theme Customizer machen kann, als verschachtelte Liste auf, so wie Sie sie im Theme Customizer finden würden.
Dabei verzichte ich allerdings auf die tatsächlichen Einstellungen, die sich unter den jeweiligen Menüpunkten befinden, d.h. alles, was Sie in dieser Liste finden, sind erst die Punkte in Menüs und Untermenüs des Theme Customizers und noch keine Einstellungen an sich. Also dann, los geht’s:
- Allgemeine Einstellungen
- Website Identität
- Layout Einstellungen
- Typografie
- Hintergrund
- Header & Navigation
- Headerformat
- Primäre Menüleiste
- Sekundäre Menüleiste
- Festgelegte Navigationseinstellungen
- Headerelemente
- Footer
- Layout
- Widgets
- Footerelemente
- Fußzeilenmenü
- Untere Leiste
- Schaltflächen
- Schaltflächenstil
- Schaltflächenstil beim Herüberfahren
- Blog
- Post
- Mobile Designs
- Tablet
- Handy
- Menü für mobile Geräte
- Farbschemata
Jeder dieser Punkte bietet meist mehrere bis einige Dinge und Parameter, die man einstellen kann.
Wichtige Punkte im Umgang mit dem WordPress Theme Customizer
Hier möchte ich, gewissermaßen zum Abschluss des Themas WordPress Theme Customizer, noch ein paar wichtige Punkte im Umgang mit diesem Werkzeug auf der eigenen WordPress Website zusammenfassen:
- Verwenden Sie den Theme Customizer immer mit jener Seite oder jenem Beitrag als Vorschau, dessen Elemente oder Eigenschaften Sie gerade verändern.
- Wenn Sie den Theme Customizer aus dem Dashboard heraus öffnen, wird die Homepage als Vorschau angezeigt.
- Merken Sie sich, ob und wenn ja welche Änderungen Sie im Theme Customizer vorgenommen haben. Wenn Sie den Customizer verlassen ohne zu speichern (veröffentlichen), bekommen Sie auch bei selbst vollständig rückgängig gemachten Änderungen eine Warnung angezeigt, dass es ungespeicherte Änderungen gibt.
- Speichern Sie in so einem Fall, wenn Sie nicht sicher sind, ob Sie nicht doch irgend etwas Wichtiges verändert haben.
- Verwerfen Sie in so einem Fall, wenn Sie glauben, alles rückgängig gemacht zu haben, oder, wenn Sie nicht sicher sind, ob Sie alles rückgängig gemacht haben und eigentlich nichts ändern wollten.
- Sie können durch vorher geplantes abschließendes Verwerfen aller Änderungen auch einfach zwischendurch einige verrückte Dinge und Designs ausprobieren, die Ihre Website völlig verunstalten. Trennen Sie aber solche Experimente unbedingt von gewollten Änderungen und verwerfen Sie zunächst Ihr Experiment durch Schließen des Theme Customizers. Öffnen Sie den Theme Customizer dann erneut, um sinnvolle und gewollte Änderungen kontrolliert vorzunehmen.
- Achtung: Beim vertikalen Scrollen innerhalb der Menüs im Theme Customizer wird irgendwann der obere Rand mit dem X für Verwerfen und dem Veröffentlichen-Button ausgeblendet. Wenn Sie sich in einem Untermenü im Customizer befinden und auf die nächsthöhere Ebene des Menüs mit einem Klick auf den Pfeil nach links zurück wechseln wollen, kann es beim vertikalen Scrollen passieren, dass einem der X-Button unter den Mauszeiger rutscht.
Was tun, wenn der WordPress Customzier nicht (mehr) funktioniert?
Wenn der WordPress Customizer auf Ihrer Website nicht (mehr) funktioniert, dann lesen Sie gleich bei meinem Artikel genau zu diesem Fall weiter: Lösungen für: WordPress Customizer funktioniert nicht!
Ihr Feedback zu diesem Artikel
Hier eine kleine Umfrage in eigener Sache. Wie fanden Sie die Informationen in diesem Artikel? Die Teilnahme an dieser Umfrage ist natürlich freiwillig und völlig anonym. Mit Ihrer Teilnahme stimmen Sie unserer Datenschutzerklärung zu. Vielen Dank!
Mehr Informationen zu WordPress Websites
Hier auf WebsiteBerater.com drehen sich die Themen einiger Artikel rund um das Thema WordPress. Wenn Sie gerade intensiv an Ihrer eigenen WordPress Website arbeiten oder in naher Zukunft eine Erstellen wollen, dann empfehle ich Ihnen unbedingt meine komplette Anleitung zur vollständigen Erstellung einer WordPress Website.
Diese Anleitung ist sehr umfangreich und umfasst mehrere Artikel zu den einzelnen Schritten beim Website-Erstellen. Ich habe deshalb einen Überblicks-Artikel geschrieben, auf dem Sie sich gut orientieren können. Sie finden diesen Überblick unter dem Titel 19 Schritte zur fertigen WordPress-Website: Alle Details.
Ich wünsche Ihnen viel Vergnügen beim Lesen, Schmökern und viel Erfolg mit Ihrem Website-Projekt!
