Der Website-Editor von WordPress 6.2 im Browse-Modus

Twenty Twenty-Three: Den Website-Editor kennenlernen

Geschrieben

in

| 2 Kommentare

Veröffentlicht am

|

Aktualisiert am

In Teil 2 der Video-Reihe zum Anpassen von Twenty Twenty-Three lernen Sie den Website-Editor von WordPress 6.2 und die Block-Struktur des Templates zur Darstellung von statischen Seiten kennen.

Inhaltsverzeichnis

Das Video zum Beitrag

Im folgenden Video lernen Sie in sechs Minuten den Website-Editor und die Block-Struktur des Templates »Seite« kennen.

Klicken Sie auf diesen Platzhalter, um das Video von YouTube anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von YouTube.

Twenty Twenty-Three anpassen: 02. Den Website-Editor kennenlernen

Den Website-Editor starten

Mit einem aktivierten Block-Theme gibt es in WordPress zwei Editoren, die sich auf den ersten Blick recht ähnlich sehen:

  • Block-Editor für den Inhaltsbereich der Seiten und Beiträge
  • Website-Editor im Menü Design zur Anpassung des Themes 

In dieser Video-Reihe geht es um den Website-Editor zur Anpassung von Block-Themes.

Der Website-Editor startet im Browse-Modus

In WordPress 6.2 ist der Website-Editor nach dem Öffnen im sogenannten Browse-Modus, in dem man sich in aller Ruhe umschauen kann.

Der Website-Editor von WordPress 6.2 startet in einem Browse-Modus
Der Website-Editor startet im Browse-Modus
  1. Links sieht man eine schwarze Seitenleiste:
    • Oben ein Website-Icon bzw. WordPress-Logo und Titel der Website 
    • Die Überschrift Design 
    • Templates und Template-Teile zum Ausklappen
  2. Rechts sieht man eine Webseite in einem eigenen Frame:
    • Sie sehen das Template zur Darstellung der Startseite im Frontend. 
    • Das ist also nicht die Startseite, sondern das Template dafür.

Templates sind Vorlagen für die verschiedenen Arten von Seiten, die es in WordPress gibt, und die Sie noch genauer kennenlernen. 

Template-Teile sind kleine Module, die in mehreren Templates verwendet werden können. Besonders wichtig sind hier Header und Footer

In den Bearbeiten-Modus wechseln

Zum Ändern oder Untersuchen von Dingen muss man zunächst vom Browse-Modus in den Bearbeiten-Modus wechseln, und am einfachsten geht das mit einem Klick irgendwo auf die Webseite rechts im Frame. 

Danach erscheint der Website-Editor, der auf den ersten Blick wie gesagt fast genauso aussieht wie der Block-Editor für die Inhalte von Seiten und Beiträgen.

Der Website-Editor von WordPress 6.2 im Bearbeiten-Modus
Der Website-Editor mit dem Template Seite
  1. Links oben in der oberen Editorleiste finden Sie wie gehabt das Website-Icon oder WordPress-Symbol, den Block-Inserter und die Listenansicht.
  2. Neu ist in der Mitte die Anzeige des Templates, das gerade bearbeitet wird. In der Abbildung heißt es Seite, und ein Klick auf den Pfeil rechts daneben zeigt eine kurze Erklärung: Zeigt alle statischen Seiten an …  Das Template Seite wird für alle im Menü Seiten erstellten statischen Seiten verwendet, in diesem Falle also auch für die Startseite. 
  3. Rechts gibt es die Seitenleiste Einstellungen mit den Registern Template und Block
  4. Daneben sieht man noch das schwarz-weiße Symbol für Stile, die Sie noch ausführliche kennenlernen werden. 

Mit dem Website-Icon bzw. dem WordPress-Symbol links oben kommt man wie gesagt wieder zurück in den Browse-Modus, mit einem Klick auf die Webseite wieder zurück in den Bearbeiten-Modus. 

Templates für Block-Themes bestehen nur aus Blöcken

Templates von klassischen Themes bestehen aus Quelltext in Sprachen wie PHP, HTML und CSS, den man nur als Entwickler wirklich versteht.

Templates für Block-Themes hingegen bestehen komplett aus Blöcken, die Sie auch ohne Programmierkenntnisse direkt im Website-Editor bearbeiten können. 

Die Block-Struktur des Templates für statische Seiten

Zum Kennenlernen des Website-Editors möchte ich Ihnen die Block-Struktur des Templates Seite kurz vorstellen. In der Listenansicht sieht man drei große Bereiche: 

  1. einen Header 
  2. einen Gruppe-Block mit den Blöcken für den Inhaltsbereich 
  3. einen Footer 
Website-Editor mit dem Template Seite und der Block-Struktur in der Listenansicht
Die Block-Struktur des Templates Seite

Diese drei Bereiche haben folgende Block-Struktur:

  • Im Header gibt es einen Gruppe-Block, der einen Zeilen-Block mit den Blöcken Website-Titel und Navigation enthält. 
  • Der Gruppe-Block zwischen Header und Footer enthält einen Gruppe-Block mit den Blöcken Beitragsbild und Beitragstitel, den Block Beitragsinhalt und ein Template-Teil namens Kommentare.
    • Beitragsbild und Kommentare werden im Frontend nur sichtbar, wenn die entsprechenden Optionen genutzt werden. 
    • Der Block Beitragsinhalt zeigt den im Block-Editor erstellten Inhalt.
  • Der Footer enthält genau wie der Header einen Gruppe-Block, der einen Zeilen-Block mit den Blöcken Website-Titel und einen Absatz enthält. 

Header und Footer sind sogenannte Template-Teile und werden im Website-Editor in Lila dargestellt. Template-Teile sind spezielle Bereiche, die in mehreren Templates verwendet werden können.

Soweit zur Block-Struktur des Templates für manuell erstellte Seiten.


Bei vielen WordPress-Websites ist die Anpassung der Navigation nach dem Erstellen von Seiten und Beiträgen eine der ersten Aktionen. Wie das geht, sehen Sie im nächsten Beitrag Eine Navigation erstellen und anpassen


Beiträge zu Twenty Twenty-Three

Übersicht: Die Video-Reihe »TT3 anpassen«

Die Reihe besteht aus folgenden Beiträgen:

  1. Einführung und Übungswebsite
  2. Den Website-Editor kennenlernen
  3. Die Navigation bearbeiten
  4. Stile – die Website gestalten
  5. Das Farbschema ändern
  6. Templates kennenlernen
  7. Die Beitragsseite ändern
  8. Block-Theme erstellen

Die Beiträge enthalten jeweils ein Video und eine ausführliche Beschreibung.

Am besten Beitrag lesen und Video anschauen, denn die beiden sind nicht immer identisch.

Avatar von Peter Müller

Kommentare

2 Antworten zu „Twenty Twenty-Three: Den Website-Editor kennenlernen“

  1. Hallo Peter,
    bin mir nicht sicher, ob ich hier eine Frage stellen kann. Ich habe anhand deines Buches Einstieg in WordPress 6 meinen WP-Blog von tt-1 auf tt-3. Im Ergebnis sind auf den Beitragsseiten vor dem Kommentar die Links „Vorherige“ und „Nächste“ nicht mehr enthalten. Ich habe auf die Schnelle weder im Buch noch hier im Online-Tutorial eine Lösung hierzu gefunden. Kannst du mir mir bitte einen Tipp geben.
    Mit besten Grüßen
    Volker Mustin

    1. Hallo Volker,

      klar kannst du hier eine Frage stellen. Dazu gibt es die Kommentare ja 😉

      Die Beitragsnavigation mit den Links »Vorherige« und »Nächste« ist in TT3 standardmäßig nicht drin, die Links stehen aber als Blöcke zur Verfügung, die du im Template für die Darstellung eines einzelnen Beitrags einbauen kannst.

      Wenn du die Beitragsnavigation gerne hättest:

      1. Template »Einzelne Beiträge« im Website-Editor öffnen
      2. Gewünschte Stelle in der Block-Struktur suchen (Listenansicht hilft dabei)
      3. Zeile-Block mit darin den Blöcken »Vorheriger Beitrag« und »Nächster Beitrag« einfügen
      4. Gewünschte Breite für den Zeile-Block einstellen (z. B. Weite Breite)
      5. Block-Werkzeugleiste des Zeile-Blocks > Ausrichtung > Abstand zwischen Elementen

      Durch die Ausrichtung des Zeile-Blocks mit »Abstand zwischen den Elementen« werden die Links darin automatisch links- und rechtsbündig ausgerichtet.

      Viel Erfolg dabei!

Schreibe einen Kommentar

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