Seiten

1. Wofuer ist diese Funktion

Die Seiten-Verwaltung ermoeglicht das Erstellen, Bearbeiten und Verwalten von WordPress-Seiten direkt innerhalb der Octoserv-Oberflaeche. Sie integriert die WordPress-Seitenverwaltung (edit.php?post_type=page) per iFrame und passt die Darstellung visuell an das Octoserv-Design an.

Die Seite ist ueber den Navigationspunkt "Seiten" in der Sidebar erreichbar. Sie besteht aus einer einzelnen Ansicht, die die vollstaendige WordPress-Seitenliste anzeigt -- inklusive aller Standard-WordPress-Funktionen wie Erstellen, Bearbeiten, Loeschen, Statusfilter und Massenaktionen.

Im Unterschied zum Formulareditor oder Videohub, die Drittanbieter-Plugins (Fluent Forms bzw. Presto Player) einbetten, integriert die Seiten-Verwaltung eine WordPress-Kernfunktion. Dies ermoeglicht die Verwaltung aller statischen Inhalte der Website (Startseite, Ueber-uns-Seite, Impressum, Datenschutzerklaerung etc.) ohne Wechsel in das WordPress-Backend.

2. Ziel und Vorteil

• Einheitliche Verwaltung: Seiten koennen direkt innerhalb der Octoserv-Oberflaeche verwaltet werden. Der Benutzer muss nicht in das WordPress-Backend wechseln.
• Vollstaendiger Zugriff auf den Block-Editor: Beim Erstellen oder Bearbeiten einer Seite oeffnet sich der vollstaendige WordPress-Block-Editor (Gutenberg) innerhalb des iFrames. Alle Bloecke, Vorlagen und Seiteneinstellungen stehen zur Verfuegung.
• Angepasster Zurueck-Button: Im Block-Editor wird der Standard-Zurueck-Button durch einen Octoserv-konformen Button ersetzt (orange Hintergrund mit weissem Pfeil-Icon), der den Benutzer zurueck zur Seitenliste fuehrt.
• Konsistentes Design: Die WordPress-Seitentabelle wird visuell an das Octoserv-Design angepasst (Tabellenstile, Buttons, Farben, Hover-Effekte).
• Automatische Ladeanzeige: Waehrend die iFrame-Inhalte geladen werden, zeigt ein animierter Ladeindikator den Ladezustand an. Bei Fehlern wird eine verstaendliche Fehlermeldung angezeigt.
• Kontextbezogene Hilfe: Ein Hilfe-Button auf der Seite oeffnet die zugehoerige Dokumentation.

3. Detaillierte Funktionsbeschreibung

3.1 Technische Architektur

Die Seiten-Verwaltung folgt dem gleichen technischen Muster wie die anderen iFrame-basierten Module:

1. Template-Datei: templates/pages/list.php
2. iFrame-Einbettung: Die WordPress-Seitenliste (edit.php?post_type=page) wird per iFrame geladen.
3. CSS-Injection: Nach dem Laden des iFrames wird per JavaScript umfangreiches CSS in das iFrame-Dokument injiziert.
4. Ladeanzeige: Eine Ladeanimation (Spinner) wird angezeigt, bis der iFrame vollstaendig geladen ist.
5. Fehlerbehandlung: Falls der iFrame nicht geladen werden kann, wird eine Fehlermeldung angezeigt.

3.2 Seitenliste

Navigationspunkt: "Seiten"
Seitentitel: "Seiten"
iFrame-Quelle: edit.php?post_type=page (WordPress-Seitenverwaltung)
Hilfe-Schluessel: seiten

Die Seitenliste zeigt alle vorhandenen WordPress-Seiten in einer Tabelle. Die Standard-WordPress-Spalten werden angezeigt:

3.3 Verfuegbare Aktionen

Die WordPress-Seitenliste bietet folgende Aktionen, die alle innerhalb des iFrames funktionieren:

Pro Seite (Hover-Aktionen):

• Bearbeiten: Oeffnet den Block-Editor fuer die ausgewaehlte Seite.
• Schnellbearbeitung: Erlaubt das Aendern von Titel, Slug, Datum, Status und Seitenattributen direkt in der Liste.
• Papierkorb: Verschiebt die Seite in den Papierkorb.
• Anzeigen: Oeffnet die Seitenvorschau.

Massenaktionen:

• Mehrere Seiten ueber Checkboxen auswaehlen.
• Ueber das Massenaktionen-Dropdown gemeinsam bearbeiten oder in den Papierkorb verschieben.

Filter und Suche:

• Nach Status filtern (Alle, Veroeffentlicht, Entwurf, Papierkorb).
• Die Suchfunktion nutzen, um Seiten nach Titel zu finden.

3.4 Block-Editor-Integration

Wenn eine Seite zum Bearbeiten geoeffnet wird, laedt der WordPress-Block-Editor (Gutenberg) innerhalb des iFrames. Hierfuer wird eine spezielle CSS-Anpassung vorgenommen:

Der Standard-Zurueck-Button des Block-Editors (der normalerweise das WordPress-Logo oder ein Site-Icon zeigt) wird durch ein angepasstes Element ersetzt:

• Hintergrund: Orange (#e09000), bei Hover dunkleres Orange (#c77d00).
• Icon: Ein weisser Zurueck-Pfeil (als SVG-Data-URI eingebettet).
• Groesse: 60px breit.
• Das Original-Icon wird ausgeblendet und durch das Pfeil-Icon per CSS-::before-Pseudo-Element ersetzt.

Dies stellt sicher, dass der Benutzer visuell erkennt, dass er sich noch in Octoserv befindet, und mit einem Klick zurueck zur Seitenliste navigieren kann.

3.5 CSS-Injection und Design-Anpassung

Die CSS-Injection fuer die Seiten-Verwaltung ist umfangreich und passt die gesamte WordPress-Seitentabelle an das Octoserv-Design an:

Ausgeblendete Elemente:

Angepasste Elemente:

3.6 Ladeverhalten

1. Die Seite wird geoeffnet. Ein Spinner mit dem Text "Einen Moment bitte. Die Ansicht wird geladen." wird angezeigt.
2. Der iFrame beginnt im Hintergrund zu laden (initial mit display: none).
3. Sobald das load-Event des iFrames ausgeloest wird, wird das CSS injiziert.
4. Der Spinner wird mit einer sanften Ueberblendung (200ms Fadeout) ausgeblendet.
5. Der iFrame wird mit einer sanften Ueberblendung (200ms Fadein) eingeblendet.
6. Falls der iFrame nicht geladen werden kann, wird die Fehlermeldung "Fehler beim Laden der Seiten. Bitte laden Sie die Seite neu." angezeigt.

4. Benutzerdokumentation / Anwendung

4.1 Seitenuebersicht aufrufen

1. In der Sidebar auf "Seiten" klicken.
2. Die WordPress-Seitenliste wird innerhalb der Octoserv-Oberflaeche geladen.
3. Alle vorhandenen Seiten werden in einer Tabelle mit Titel, Autor und Datum angezeigt.

4.2 Neue Seite erstellen

1. Unter "Seiten" auf den orangefarbenen "Erstellen"-Button (oben rechts in der Seitenliste) klicken.
2. Der WordPress-Block-Editor oeffnet sich innerhalb des iFrames.
3. Einen Seitentitel eingeben.
4. Inhalte ueber Bloecke hinzufuegen (Absaetze, Ueberschriften, Bilder, Spalten etc.).
5. Die Seite veroeffentlichen oder als Entwurf speichern.
6. Ueber den orangen Zurueck-Pfeil (oben links) zur Seitenliste zurueckkehren.

4.3 Bestehende Seite bearbeiten

1. Unter "Seiten" in der Tabelle auf den Titel der gewuenschten Seite klicken (oder bei Hover auf "Bearbeiten").
2. Der Block-Editor oeffnet sich mit dem Inhalt der ausgewaehlten Seite.
3. Aenderungen vornehmen.
4. Die Aenderungen ueber "Aktualisieren" speichern.
5. Ueber den orangen Zurueck-Pfeil zur Seitenliste zurueckkehren.

4.4 Seite schnell bearbeiten

1. Unter "Seiten" in der Tabelle bei der gewuenschten Seite auf "Schnellbearbeitung" klicken (erscheint bei Hover).
2. Ein Inline-Formular oeffnet sich direkt in der Tabelle.
3. Titel, Slug, Datum, Sichtbarkeit und Status koennen direkt geaendert werden.
4. Auf "Aktualisieren" klicken, um die Aenderungen zu speichern.

4.5 Seiten filtern und suchen

1. Ueber die Filter-Tabs oberhalb der Tabelle nach Status filtern (Alle, Veroeffentlicht, Entwurf, Papierkorb).
2. Das Suchfeld nutzen, um Seiten nach Titel zu finden.
3. Bei vielen Seiten die Paginierung am unteren Rand der Tabelle verwenden.

4.6 Seiten loeschen

1. In der Tabelle bei der gewuenschten Seite auf "Papierkorb" klicken (erscheint bei Hover).
2. Die Seite wird in den Papierkorb verschoben und kann dort wiederhergestellt oder endgueltig geloescht werden.
3. Fuer Massenloeschungen: Mehrere Seiten ueber Checkboxen auswaehlen, im Massenaktionen-Dropdown "In den Papierkorb verschieben" waehlen und "Uebernehmen" klicken.

4.7 Fehlerbehebung

Falls die Seite nicht geladen werden kann und die Fehlermeldung "Fehler beim Laden der Seiten. Bitte laden Sie die Seite neu." erscheint:

1. Die Seite im Browser neu laden (F5 oder Strg+R).
2. Sicherstellen, dass der aktuelle Benutzer ueber ausreichende Berechtigungen zum Bearbeiten von Seiten verfuegt.
3. Falls der Block-Editor nicht korrekt laedt, den Browser-Cache leeren.

5. Anwendungsbeispiele

Beispiel 1: Impressum und Datenschutzerklaerung aktualisieren

Aufgrund rechtlicher Aenderungen muessen das Impressum und die Datenschutzerklaerung aktualisiert werden.

Vorgehen:

1. Unter "Seiten" die Seitenliste oeffnen.
2. Im Suchfeld "Impressum" eingeben, um die Seite schnell zu finden.
3. Auf den Titel klicken, um den Block-Editor zu oeffnen.
4. Die erforderlichen Aenderungen vornehmen (z.B. neue Adresse, aktualisierte Rechtstexte).
5. Auf "Aktualisieren" klicken.
6. Ueber den Zurueck-Pfeil zur Liste zurueckkehren und den Vorgang fuer die Datenschutzerklaerung wiederholen.

Beispiel 2: Landingpage fuer eine Kampagne erstellen

Fuer eine Marketingkampagne wird eine neue Landingpage benoetigt.

Vorgehen:

1. Unter "Seiten" auf den "Erstellen"-Button klicken.
2. Einen Seitentitel eingeben (z.B. "Fruehjahrsangebot 2026").
3. Inhalte mit dem Block-Editor gestalten: Ueberschrift, Textabschnitte, Call-to-Action-Buttons, Bilder.
4. Ein Formular ueber den Fluent-Forms-Shortcode einbinden (der Shortcode kann im Formulareditor kopiert werden).
5. Optional ein Video ueber den Presto-Player-Block einbinden.
6. Die Seite als Entwurf speichern und intern pruefen lassen.
7. Nach Freigabe die Seite veroeffentlichen.

Beispiel 3: Seitenstruktur ueberpruefen und aufraeumen

Die Website hat im Laufe der Zeit viele Seiten angesammelt, die nicht mehr benoetigt werden.

Vorgehen:

1. Unter "Seiten" die vollstaendige Seitenliste einsehen.
2. Ueber die Filter-Tabs "Entwurf" auswaehlen, um alle unveroffentlichten Seiten zu sehen.
3. Nicht mehr benoetigte Entwuerfe ueber Checkboxen auswaehlen und per Massenaktion in den Papierkorb verschieben.
4. Ueber den Filter "Papierkorb" die geloeschten Seiten pruefen und bei Bedarf endgueltig loeschen oder wiederherstellen.
5. Die veroeffentlichten Seiten durchgehen und veraltete Inhalte aktualisieren oder archivieren.