Blog
1. Wofuer ist diese Funktion
Die Blog-Verwaltung ermoeglicht das Erstellen, Bearbeiten und Verwalten von WordPress-Blogbeitraegen sowie die Moderation von Kommentaren direkt innerhalb der Octoserv-Oberflaeche. Sie integriert die WordPress-Beitrags- und Kommentarverwaltung per iFrame und passt die Darstellung visuell an das Octoserv-Design an.
Die Blog-Verwaltung ist ueber den Navigationspunkt "Blog" in der Sidebar erreichbar und gliedert sich in zwei Unterseiten:
| Unterseite | Navigationspunkt | Beschreibung |
|---|---|---|
| Beitraege | Blog | Uebersicht und Verwaltung aller WordPress-Blogbeitraege. |
| Kommentare | Kommentare | Moderation und Verwaltung aller Kommentare zu Blogbeitraegen. |
Beide Unterseiten sind iFrame-basierte Integrationen der entsprechenden WordPress-Verwaltungsseiten. Die WordPress-Admin-Oberflaeche (Adminbar, Seitenmenue, Footer) wird dabei ausgeblendet und durch das Octoserv-Design ersetzt.
Im Unterschied zur Seiten-Verwaltung, die sich auf statische Inhalte konzentriert, dreht sich die Blog-Verwaltung um dynamische, chronologisch geordnete Inhalte (Beitraege/Posts) und deren Interaktion mit Besuchern (Kommentare).
2. Ziel und Vorteil
- Zentrale Inhaltsverwaltung: Blogbeitraege und Kommentare koennen direkt innerhalb der Octoserv-Oberflaeche verwaltet werden. Ein Wechsel in das WordPress-Backend ist nicht erforderlich.
- Zwei spezialisierte Ansichten: Die Aufteilung in Beitraege und Kommentare ermoeglicht einen schnellen Zugriff auf den jeweils benoetigten Funktionsbereich.
- Vollstaendiger Block-Editor: Beim Erstellen oder Bearbeiten von Beitraegen steht der vollstaendige WordPress-Block-Editor (Gutenberg) zur Verfuegung -- inklusive aller Bloecke, Kategorien, Tags und Beitragseinstellungen.
- Kommentarmoderation: Kommentare koennen direkt genehmigt, abgelehnt, als Spam markiert oder beantwortet werden, ohne die Octoserv-Umgebung zu verlassen.
- Angepasster Zurueck-Button: Im Block-Editor wird der Standard-Zurueck-Button durch einen Octoserv-konformen Button ersetzt (orange Hintergrund mit Dashicon), der den Benutzer zurueck zur Beitragsliste fuehrt.
- Konsistentes Design: Alle WordPress-Tabellen, Buttons und Formularelemente werden visuell an das Octoserv-Design angepasst.
- Automatische Ladeanzeige: Waehrend die iFrame-Inhalte geladen werden, zeigt ein animierter Ladeindikator den Ladezustand an.
3. Detaillierte Funktionsbeschreibung
3.1 Technische Architektur
Beide Unterseiten folgen dem gleichen technischen Muster:
- Template-Datei: Jede Unterseite hat ein eigenes PHP-Template (
templates/blog/list.php,templates/blog/comments.php). - iFrame-Einbettung: Die jeweilige WordPress-Admin-Seite wird per iFrame geladen.
- CSS-Injection: Nach dem Laden des iFrames wird per JavaScript umfangreiches CSS in das iFrame-Dokument injiziert.
- Ladeanzeige: Eine Ladeanimation (Spinner) wird angezeigt, bis der iFrame vollstaendig geladen ist.
- Fehlerbehandlung: Falls der iFrame nicht geladen werden kann, wird eine Fehlermeldung angezeigt.
3.2 Unterseite: Beitraege
Navigationspunkt: "Blog"
Seitentitel: "Blog"
iFrame-Quelle: edit.php (WordPress-Beitragsliste)
Hilfe-Schluessel: blog
Diese Unterseite zeigt die vollstaendige WordPress-Beitragsliste. Die Standard-WordPress-Spalten werden angezeigt:
| Spalte | Inhalt |
|---|---|
| Titel | Beitragsname mit Bearbeitungslinks. Bei Beitraegen mit besonderem Status wird dieser als graue Kennzeichnung angezeigt (z.B. "Entwurf", "Angepinnt"). |
| Autor | Der Verfasser des Beitrags. |
| Kategorien | Die zugeordneten Beitragskategorien. |
| Tags | Die zugeordneten Beitrags-Tags. |
| Kommentare | Die Anzahl der Kommentare zum Beitrag. |
| Datum | Veroeffentlichungs- oder Erstellungsdatum. |
Verfuegbare Aktionen pro Beitrag (Hover-Aktionen):
- Bearbeiten: Oeffnet den Block-Editor fuer den ausgewaehlten Beitrag.
- Schnellbearbeitung: Erlaubt das Aendern von Titel, Slug, Datum, Kategorien, Tags, Status und weiteren Einstellungen direkt in der Liste.
- Papierkorb: Verschiebt den Beitrag in den Papierkorb.
- Anzeigen/Vorschau: Oeffnet den Beitrag in der Frontend-Vorschau.
Massenaktionen und Filter:
- Mehrere Beitraege ueber Checkboxen auswaehlen und gemeinsam bearbeiten oder loeschen.
- Nach Status filtern (Alle, Veroeffentlicht, Entwurf, Papierkorb).
- Nach Datum oder Kategorie filtern.
- Die Suchfunktion nutzen, um Beitraege nach Titel zu finden.
3.3 Block-Editor-Integration (Beitraege)
Wenn ein Beitrag zum Bearbeiten geoeffnet wird, laedt der WordPress-Block-Editor innerhalb des iFrames. Der Standard-Zurueck-Button des Block-Editors wird durch ein angepasstes Element ersetzt:
- Hintergrund: Orange (#e09000), bei Hover dunkleres Orange (#c77d00).
- Icon: Ein WordPress-Dashicon (Schliessen-Symbol,
\f335) in Weiss. - Das Original-Site-Icon und SVG werden ausgeblendet und durch das Dashicon per CSS-
::before-Pseudo-Element ersetzt.
3.4 Unterseite: Kommentare
Navigationspunkt: "Kommentare"
Seitentitel: "Kommentare"
iFrame-Quelle: edit-comments.php (WordPress-Kommentarverwaltung)
Hilfe-Schluessel: kommentare
Diese Unterseite zeigt die vollstaendige WordPress-Kommentarliste. Die Standard-WordPress-Spalten werden angezeigt:
| Spalte | Inhalt |
|---|---|
| Autor | Name, E-Mail-Adresse und IP des Kommentarverfassers. |
| Kommentar | Der Kommentartext mit Aktionslinks. |
| Antwort auf | Der Beitrag, zu dem der Kommentar gehoert (als Link). |
| Eingereicht am | Datum und Uhrzeit des Kommentars. |
Verfuegbare Aktionen pro Kommentar (Hover-Aktionen):
- Genehmigen / Zurueckweisen: Den Kommentar freigeben oder in die Moderation verschieben.
- Antworten: Direkt auf den Kommentar antworten (Inline-Antwortformular).
- Schnellbearbeitung: Den Kommentartext direkt bearbeiten.
- Bearbeiten: Den Kommentar in einer vollstaendigen Bearbeitungsansicht oeffnen.
- Spam: Den Kommentar als Spam markieren.
- Papierkorb: Den Kommentar loeschen.
Filter:
- Nach Status filtern (Alle, Ausstehend, Genehmigt, Spam, Papierkorb).
- Nach Beitragstyp filtern.
- Die Suchfunktion nutzen, um Kommentare nach Inhalt zu durchsuchen.
3.5 CSS-Injection und Design-Anpassung
Beide Unterseiten verwenden eine umfangreiche CSS-Injection. Die Anpassungen fuer die Beitragsliste und die Kommentarliste sind nahezu identisch:
Ausgeblendete Elemente:
| Element | CSS-Selektor | Zweck der Ausblendung |
|---|---|---|
| Admin-Menue | #adminmenu, #adminmenuwrap |
Octoserv hat eine eigene Navigation. |
| Admin-Bar | #wpadminbar |
Wird durch die Octoserv-Headerleiste ersetzt. |
| Footer | #wpfooter |
Nicht benoetigt. |
| Hinweismeldungen | .notice, .updated, .error |
WordPress-Admin-Hinweise werden unterdrueckt. |
| Bildschirmoptionen | .screen-meta-toggle, #screen-meta-links |
Nicht benoetigt. |
| Drittanbieter-Branding | [class*="logo"], [class*="branding"], .gh-header, .ff_header_group |
Plugin-Branding wird ausgeblendet. |
Angepasste Elemente (identisch fuer beide Unterseiten):
| Element | Anpassung |
|---|---|
| Hintergrund | Hellgrauer Hintergrund (#f3f4f6). |
| Tabelle | Weisser Hintergrund, abgerundete Ecken (0.5rem), dezenter Schatten. |
| Tabellenkopf | Hellgrauer Hintergrund (#f9fafb), fette dunkelgraue Schrift. |
| Tabellenzeilen | Hover-Effekt (#f9fafb). |
| Primaere Buttons | Orange (#e09000), weisse Schrift. |
| Sekundaere Buttons | Hellgrauer Hintergrund, dunkelgraue Schrift. |
| Links | Dunkelgrau, bei Hover orange. |
| Loesch-Links | Bei Hover rot (#dc2626). |
| Formularelemente | Einheitliche Rahmen, abgerundete Ecken, orange Fokus-Hervorhebung. |
| Checkboxen | Bei Selektion orange Hintergrund. |
| Filter-Tabs | Grau, bei Selektion/Hover orange. |
| Paginierung | Weisse Buttons, bei Hover orange. |
Unterschied zwischen Beitrags- und Kommentarliste:
Die Beitragsliste verwendet eine fixe Tabellennavigation mit height: 50px und klarem Float-Verhalten, waehrend die Kommentarliste eine flexiblere Tabellennavigation mit Padding und Margin-basiertem Abstand verwendet.
3.6 Ladeverhalten
Der Ladevorgang laeuft fuer beide Unterseiten identisch ab:
- Die Seite wird geoeffnet. Ein Spinner mit dem Text "Einen Moment bitte. Die Ansicht wird geladen." wird angezeigt.
- Der iFrame beginnt im Hintergrund zu laden (initial mit
display: none). - Sobald das
load-Event ausgeloest wird, wird das CSS injiziert. - Der Spinner wird mit einer sanften Ueberblendung (200ms Fadeout) ausgeblendet.
- Der iFrame wird mit einer sanften Ueberblendung (200ms Fadein) eingeblendet.
- Bei Ladefehlern wird eine entsprechende Fehlermeldung angezeigt.
4. Benutzerdokumentation / Anwendung
4.1 Blogbeitraege verwalten
- In der Sidebar auf "Blog" klicken.
- Die WordPress-Beitragsliste wird innerhalb der Octoserv-Oberflaeche geladen.
- Alle vorhandenen Beitraege werden in einer Tabelle angezeigt.
4.2 Neuen Blogbeitrag erstellen
- Unter "Blog" > "Beitraege" auf den orangefarbenen "Erstellen"-Button klicken.
- Der WordPress-Block-Editor oeffnet sich innerhalb des iFrames.
- Einen Beitragstitel eingeben.
- Inhalte ueber Bloecke hinzufuegen (Absaetze, Ueberschriften, Bilder, Galerien, Videos etc.).
- Kategorien und Tags im Seitenbereich des Editors zuweisen.
- Ein Beitragsbild (Featured Image) setzen.
- Den Beitrag veroeffentlichen oder als Entwurf speichern.
- Ueber den orangen Zurueck-Button (oben links) zur Beitragsliste zurueckkehren.
4.3 Bestehenden Beitrag bearbeiten
- Unter "Blog" in der Tabelle auf den Titel des gewuenschten Beitrags klicken.
- Der Block-Editor oeffnet sich mit dem Inhalt des ausgewaehlten Beitrags.
- Aenderungen vornehmen.
- Auf "Aktualisieren" klicken.
- Ueber den Zurueck-Button zur Beitragsliste zurueckkehren.
4.4 Kommentare moderieren
- In der Sidebar auf "Kommentare" klicken (oder unter "Blog" die Kommentare-Unterseite waehlen).
- Die Kommentarliste wird geladen und zeigt alle eingegangenen Kommentare.
- Ausstehende Kommentare pruefen:
- Auf "Genehmigen" klicken, um den Kommentar freizugeben.
- Auf "Spam" klicken, um den Kommentar als Spam zu markieren.
- Auf "Papierkorb" klicken, um den Kommentar zu loeschen.
- Bei Bedarf auf "Antworten" klicken, um direkt auf einen Kommentar zu antworten.
4.5 Beitraege filtern und suchen
- Ueber die Filter-Tabs oberhalb der Tabelle nach Status filtern (Alle, Veroeffentlicht, Entwurf, Papierkorb).
- Ueber die Dropdown-Filter nach Datum oder Kategorie filtern.
- Das Suchfeld nutzen, um Beitraege nach Titel zu finden.
4.6 Fehlerbehebung
Falls eine Unterseite nicht geladen werden kann:
- Die Seite im Browser neu laden (F5 oder Strg+R).
- Sicherstellen, dass der aktuelle Benutzer ueber ausreichende Berechtigungen zum Bearbeiten von Beitraegen und Kommentaren verfuegt.
- Falls der Block-Editor nicht korrekt laedt, den Browser-Cache leeren.
5. Anwendungsbeispiele
Beispiel 1: Woechentlichen Firmenblog-Beitrag erstellen
Ein Unternehmen moechte regelmaessig Blogbeitraege veroeffentlichen, um die Sichtbarkeit der Website zu erhoehen.
Vorgehen:
- Unter "Blog" auf "Erstellen" klicken.
- Einen ansprechenden Titel eingeben (z.B. "5 Tipps fuer erfolgreiches Kundenmanagement").
- Den Beitrag mit dem Block-Editor gestalten: Textabschnitte, Zwischenueberschriften, ein Beitragsbild und ggf. ein eingebettetes Video.
- Passende Kategorien zuweisen (z.B. "Tipps & Tricks", "CRM").
- Tags hinzufuegen (z.B. "Kundenmanagement", "Vertrieb").
- Den Beitrag als Entwurf speichern, intern pruefen lassen und anschliessend veroeffentlichen.
- Kommentare zu dem Beitrag unter "Kommentare" moderieren.
Beispiel 2: Kommentare zu einem kontroversen Beitrag moderieren
Ein Blogbeitrag hat viele Kommentare erhalten, die moderiert werden muessen.
Vorgehen:
- Unter "Kommentare" die Kommentarliste oeffnen.
- Den Filter "Ausstehend" waehlen, um nur unmoderierte Kommentare zu sehen.
- Jeden Kommentar pruefen:
- Sachliche und relevante Kommentare genehmigen.
- Spam-Kommentare als Spam markieren.
- Unangemessene Kommentare in den Papierkorb verschieben.
- Bei konstruktiven Kommentaren eine Antwort verfassen, um den Dialog mit den Lesern zu foerdern.
Beispiel 3: Veraltete Blogbeitraege aufraeumen
Die Website hat im Laufe der Zeit viele Blogbeitraege angesammelt, von denen einige nicht mehr aktuell sind.
Vorgehen:
- Unter "Blog" die Beitragsliste oeffnen.
- Nach Datum filtern, um aeltere Beitraege zu finden.
- Veraltete Beitraege identifizieren und entweder:
- Den Inhalt aktualisieren (z.B. veraltete Informationen korrigieren).
- Den Beitrag in den Papierkorb verschieben, wenn er nicht mehr relevant ist.
- Bei Beitraegen mit vielen Kommentaren pruefen, ob die Kommentare noch relevant sind, und ggf. die Kommentarfunktion fuer aeltere Beitraege deaktivieren.