Einleitung
In dieser Lektion lernst du den Website-Editor genauer kennen. Mit ihm kannst du alles auf deiner Website gestalten, vom Header zum Footer und alles dazwischen. Gehe zu „Design“ und klicke dann auf „Editor“. Dadurch wird der Website-Editor geöffnet. Auf der linken Seite befindet sich die Seitenleiste. Mit diesem praktischen Werkzeug kannst du dich mit den wichtigsten Teilen deiner Website befassen, darunter Navigation, Stile, Seiten, Templates und Vorlagen. In dieser Lektion wird dir ein tiefgreifendes Verständnis dieser Elemente vermittelt.
Navigation
Beginnen wir mit der Navigation. Hier kannst du alle deine Menüs schnell anzeigen und anpassen. Es ist deine Kommandozentrale für die Menüverwaltung. Hier kannst du beispielsweise eine andere Anordnung vornehmen. Wenn du auf die drei vertikalen Punkte neben dem Namen des Menüs klickst, kannst du den Menüpunkt nach Bedarf umbenennen, duplizieren oder löschen. Wenn du den Bearbeitungsmodus öffnest, kannst du bestimmte Änderungen ohne Ablenkungen vornehmen. Aktualisierungen werden auf deiner gesamten Website synchronisiert. Du kannst neue Seiten oder andere Menüelemente hinzufügen, indem du auf das Plus-Symbol klickst. Du wirst feststellen, dass der Navigationsblock in diesem Bereich gesperrt ist. Wenn du das Design des Menüs gestalten möchtest, musst du das entsprechende Template oder Template-Teil öffnen.
Stile
Als Nächstes befassen wir uns mit Stilen. Wenn du auf „Stile“ klickst, kannst du eine Vielzahl verschiedener Stilkombinationen durchsuchen, die zu deinem Theme gehören. Wenn du auf „Stile durchstöbern“ klickst, kannst du deine Stile von hier aus durchsuchen und dann Typografie, Farben und Layout deiner Website ändern.
In der aktuellen Version (6.9) ist es so: Wenn du auf „Stile“ klickst und dann auf “Stile durchstöbern”, kannst du eine Vielzahl verschiedener Stilkombinationen durchsuchen, die zu deinem Theme gehören. Unterhalb von “Stile durchstöbern” kannst du “Typografie”, “Farben” usw. anklicken, um diese zu bearbeiten. Wenn du auf die Vorschau klickst, vergrössert sie sich und die Anpassungsmöglichkeiten befindet sich nun rechts.
Schauen wir uns zunächst die Typografie-Einstellungen an. Wenn du auf „Typografie“ klickst, kannst du die Typografie-Einstellungen für Text, Links, Überschriften, Bildunterschriften und Schaltflächen verwalten. Eine wunderbare neue Funktion ist, dass du nun auch Zugriff auf eine Schriftarten-Bibliothek hast. Unter „Schriftarten“ sehen wir die Schriftarten, die zu unserem Theme hinzugefügt wurden. Wenn du jedoch auf das Symbol rechts daneben (Schriftarten verwalten) und dann auf “Schriften installieren” klickst, kannst du lokale und Google-Schriftarten für deine Website mit jedem Block-Theme installieren, entfernen und aktivieren. Wenn du auf „Schriftarten installieren“ klickst, kannst du jede beliebige Google-Schriftart auf deiner Website installieren und auf „Hochladen“ klicken, wenn du eine Schriftart von deinem Computer hochladen möchtest. Stelle sicher, dass du das Recht hast, die von dir hochgeladenen Schriftarten zu verwenden. Der nächste Punkt sind die Farbeinstellungen. Wenn du auf “Farben” klickst, kannst du die Farben für verschiedene globale Elemente auf deiner Website ändern. Wenn wir weiter zu „Layout“ gehen, werden wir feststellen, dass du sogar Elemente wie Abstände und Blockabstände steuern kannst.
Stilbuch
Auch im Bereich “Stile” kannst du weiter unten auf “Blöcke” klicken und dann das Erscheinungsbild bestimmter Blöcke für deine gesamte Website anpassen. Um zu sehen, wie sich diese Blöcke ändern, wenn du sie bearbeitest, gehst du zum Stilbuch deiner Website. Neben der Überschrift “Stile” siehst du ein Symbol mit einem Auge. Wenn du dort drauf klickst, öffnet sich das Stilbuch. Es ermöglicht einem Benutzer, eine Vorschau aller Blöcke anzuzeigen, die in deine Website eingefügt werden können. Es gibt dir einen Überblick darüber, wie sich globale Stile auf alle angezeigten Blöcke auswirken, ohne dass der Benutzer diese Blöcke in eine Vorlage einfügt. Beachte auch, dass das Design eines Blocks im Stilbuch angepasst werden kann. Aktualisiere beispielsweise den Block „Buttons“, indem du die Hintergrundfarbe änderst und die Groß-/Kleinschreibung auf Großbuchstaben umstellst. Wenn dir das Ergebnis gefällt, kannst du auf „Speichern“ klicken. Beachte bitte auch, dass die Änderung eines einzelnen Blocks in deinem Stilbuch Vorrang vor den von dir festgelegten globalen Stilen hat.
Stil-Revisionen
An dieser Stelle sollten wir auch über Stil-Revisionen sprechen. Klicke dazu in der Seitenleiste auf der rechten Seite auf das Uhr-Symbol (Revisionen) neben „dem Auge-Symbol (Stilbuch). Stil-Revisionen werden angezeigt, wenn du ein Template im Stilbuch bearbeitet hast. Mit der Funktion Revisionen kannst du frühere Änderungen an deinen Stilen im Laufe der Zeit visuell durchsuchen und ganz einfach zu einer früheren Version zurückkehren, wenn dir ein Stil besser gefällt oder du eine frühere Version wiederherstellen möchtest. Du musst lediglich die Version auswählen und dann auf „Übernehmen“ klicken. In diesem Beispiel bearbeite ich ein Template und werde denselben Vorgang ausführen. Ich öffne “Revisionen”, wähle einen früheren Stil aus und klicke dann auf „Anwenden“. Wenn du auf die drei vertikalen Punkte neben Auge und Uhr klickst, kannst du Stile zurücksetzen und zusätzliches CSS hinzufügen.
Seiten
Unterhalb von „Stile“ können wir zu „Seiten“ gehen, um Seiten zu erstellen und zu veröffentlichen. Um eine neue Seite hinzuzufügen, klickst du auf das Plus-Symbol neben „Seiten“ und erstellst einen Entwurf. Du kannst natürlich auch eine neue Seite erstellen, wenn du dich in deinem Dashboard oder WP Admin befindest.
In der aktuellen Version von WordPress (6.9) hat sich die Oberfläche visuell verändert. Die Funktionalität ist jedoch gleich.
Als Nächstes öffnen wir eine unserer bestehenden Seiten, meine „About Page“. Wenn du eine Seite öffnest, ist es wichtig, daran zu denken, Inhalte zum Inhaltsblock hinzuzufügen. Mit anderen Worten: Der Inhaltsblock ist der Platz für alle deine Inhalte. Als Zweites solltest du beachten, dass du deine Kopf- und Fußzeile beim Bearbeiten einer Seite nicht anpassen kannst. Das gehört alles zur Bearbeitung von Templates. Wenn du auf die Kopfzeile klickst, erhältst du die Meldung „Bearbeiten Sie Ihr Template, um diesen Block zu bearbeiten“. Wenn du das dieser Seite zugewiesene Template ändern möchtest, kannst du auf „Template bearbeiten“ klicken. In diesem Beispiel gelangst du dann zu deinem Seitentemplate. Hier kannst du deine Kopf- und Fußzeile ändern. Du kannst jedoch keine Inhalte zu einer Vorlage hinzufügen. Inhalte werden natürlich zu Beiträgen und Seiten hinzugefügt.
Templates
Das bringt uns zu unserem nächsten Thema, nämlich den Templates. Diese legen die Struktur fest, in der deine Inhalte angezeigt werden. Wenn du auf “Templates” klickst, werden dir eine Reihe von Templates angezeigt, die zu deinem Theme gehören, sogenannte integrierte Templates. Dazu gehören beispielsweise das Seitentemplate, das eine einzelne Seite anzeigt, das Indextemplate, das als Fallback-Template dient, oder das Template “Einzelne Beiträge”, das das Layout einzelner Beiträge anzeigt. Ganz unten sehen wir alle benutzerdefinierten Templates. Wenn du auf das Plus-Symbol neben den Vorlagen klickst (in der aktuellen Version der Button “Template hinzufügen”), kannst du eine Vielzahl neuer Templates hinzufügen, sogar ein benutzerdefiniertes Template, das auf jeden Beitrag oder jede Seite angewendet werden kann. Öffnen wir das Seitentemplate, um besser zu verstehen, wie ein Template funktioniert. Ein Template sorgt für Struktur. Es enthält in der Regel eine Kopf- und eine Fußzeile.
Der Block „Beitragsinhalt“ (zwischen Kopfzeile und Fußzeile) ruft den Inhalt der Seite oder des Beitrags ab, die bzw. der dem Template zugewiesen ist. Ein Template wird also nur verwendet, um das Layout oder Design der Seite zu ändern, d. h. die Kopfzeile, die Fußzeile und sogar die Seitenleiste. Der Editor unterscheidet daher klar zwischen der Bearbeitung des Templates und der Bearbeitung der Seite. Du kannst deine Kopf- und Fußzeile innerhalb des Templates ändern. Eine der Optionen, die dir zur Verfügung stehen, ist, auf die drei vertikalen Punkte zu klicken und „Kopfzeile ersetzen“ auszuwählen. Dann kannst du deine aktuelle Kopfzeile durch eins deiner vorhandenen Kopfzeilen-Templateteile oder Kopfzeilen-Vorlagen ersetzen, die mit deinem Theme geliefert werden. Eine weitere Option besteht darin, deine Kopfzeile auszuwählen und dann auf „Bearbeiten“ zu klicken. Auf diese Weise kannst du deine Kopf- oder Fußzeile im Template-Bearbeitungsmodus ohne weitere Ablenkungen ändern.
Ein Template zuweisen
Um einer Seite oder einem Beitrag eine neue Vorlage zuzuweisen, öffne diese bzw. diesen und öffne dann die Seitenleiste auf der rechten Seite. Klicke neben „Template“ auf den Namen des Templates, wähle „Template ändern“ und wähle dann eine benutzerdefinierte Vorlage aus, die du deiner Seite oder deinem Beitrag zuweisen möchtest.
Templates verwalten
Es ist auch wichtig, dass du, wenn du unter „Alle Templates” auf das Symbol “Layout” klickst, deine Templates über die Tabellen- oder Rasteransicht durchsuchen und filtern kannst. Wenn du daneben auf das Rad klickst, stehen dir weitere Filteroptionen zur Verfügung. Bitte beachte, dass du Seiten und Template-Teile auf genau die gleiche Weise durchsuchen und filtern kannst.
Vorlagen
Zum Schluss gehen wir noch zu den Vorlagen. Du kannst dir alle verfügbaren Vorlagen anzeigen lassen. Oder du wählst „Meine Vorlagen“ aus, dann kannst du deine eigenen synchronisierten und nicht-synchronisierten Vorlagen erstellen und verwalten. Unter „Meine Vorlagen“ können wir alle unsere benutzerdefinierten Vorlagen und die mit unserem Theme gelieferten Vorlagen in den entsprechenden Kategorien anzeigen. Unter “Template-Teile” können wir außerdem unsere Kopf- und Fußzeilen sowie allgemeine Template-Teile erstellen und verwalten. Template-Teile sind im Wesentlichen Vorlagen. Es handelt sich um synchronisierte, wiederverwendbare Komponenten, die auf deiner gesamten Website verwendet werden können.
Individuelle Vorlagen
Beginnen wir mit „Meine Vorlagen”. Um deine eigene Vorlage zu erstellen, klicke auf „Vorlage hinzufügen“ und dann nochmals auf “Vorlage hinzufügen”. Jetzt kannst du sie benennen und der entsprechenden Kategorie hinzufügen. Dann entscheidest du, ob du deine Vorlage synchronisieren möchtest oder nicht. Eine synchronisierte Vorlage wird auf deiner gesamten Website synchronisiert, d. h., wenn du deine Vorlage an einer Stelle änderst, wird sie überall dort aktualisiert, wo sie verwendet wird. Du kannst diese Option auch deaktivieren, wenn du eine nicht synchronisierte Vorlage bevorzugst. Nicht synchronisierte Vorlagen sind normale Vorlagen, die unabhängig voneinander bearbeitet werden können. Wenn du zu deinem Bereich für benutzerdefinierte Vorlagen zurückkehrst, wirst du feststellen, dass synchronisierte Vorlagen ein lila Symbol haben und nicht-synchronisierte Vorlagen nicht. Als Nächstes wirst du feststellen, dass die mit deinem Theme gelieferten Vorlagen gesperrt sind und du sie nicht bearbeiten kannst. Wenn du jedoch auf die drei vertikalen Punkte unter einer Vorlage klickst, kannst du sie duplizieren. Danach sind sie unter “Meine Vorlagen“ zu finden.
Template-Teile
Unten können wir unsere Kopf- und Fußzeilen sowie allgemeine Template-Teile erstellen und verwalten. Hier hast du zwei Möglichkeiten. Du kannst benutzerdefinierte Kopf- und Fußzeilen erstellen oder die mit deinem Theme gelieferten Vorlagen für Template-Teile anpassen. Um dein eigenes Template-Teil zu erstellen, klicke oben neben „Vorlagen“ auf das Plus-Symbol und wähle „Template-Teil hinzufügen“. Wenn du eine neues Template-Teil hinzufügst, kannst du zwischen allgemeinen Template-Teilen für Kopf- und Fußzeilen wählen. Allgemeine Template-Teile sind nicht an einen bestimmten Bereich gebunden, daher solltest du ihnen einen aussagekräftigen Namen geben. Wenn du ein Template-Teil von hier aus öffnest, kannst du dein Template-Teil im Template-Bearbeitungsmodus ohne Ablenkungen ändern und bearbeiten. Du kannst auch das entsprechende Template öffnen, in diesem Fall mein benutzerdefiniertes Template, und dann deinen Kopf- oder Fußzeilenvorlagenteil innerhalb der Vorlage ändern. Wie bereits gezeigt, kannst du eine deiner Kopf- oder Fußzeilen ganz einfach durch eine Vorlage oder ein vorhandenes Template-Teil aus den Vorlagen ersetzen.
Befehle und Einstellungen suchen
Abschließend möchte ich noch eine äußerst hilfreiche Funktion namens Befehlspalette hervorheben, mit der du viel Zeit sparst und dich effektiver im Website-Editor bewegen kannst. Mit der Befehlspalette kannst du Aufgaben schnell erledigen und im Website-Editor navigieren. Du kannst beispielsweise „Neu“ eingeben, um eine Seite oder ein Template zu erstellen, oder einfach den Namen des Bereichs, zu dem du gelangen möchtest. Zum Beispiel „Vorlage“, um alle meine Vorlagen zu verwalten. Du kannst die Befehlspalette über die Tastenkombination Befehl+k auf dem Mac oder Strg+k unter Windows aufrufen. Du findest sie auch in der linken Seitenleiste, indem du oben auf das Suchsymbol klickst. Oder du klickst einfach auf die Titelleiste.
Fazit
Du hast nun einen kurzen Überblick darüber bekommen, was du mit dem Website-Editor alles tun kannst.
Aufgaben
Gehe zu WordPress Playground und führe die folgenden Aufgaben aus, um dein Wissen zu testen.
- Wähle eine andere Stilkombination, die mit deinem Theme geliefert wird.
- Füge unter „Typografie“ deiner Bibliothek eine Google-Schriftart hinzu.
- Weise der Beispielseite ein benutzerdefiniertes Template zu, z. B. „Seite mit Seitenleiste“. Du kannst dies tun, wenn du eine Seite über das Dashboard oder den Website-Editor öffnest.