Dokumentation / How-To

In dieser Dokumentation ist grundlegend festgehalten, wie diese Seite funktioniert.
Falls ihr Fragen habt, wie ihr etwas macht oder warum etwas so geregelt ist, wie es ist, schaut zuerst hier nach.
Dokumentation sollte nicht im Editor gelesen werden, sondern unter gutlebenostheide.de/dokumentation.

Natürlich können in dieser Dokumentation nicht alle relevanten Funktionen von WordPress und den verwendete Plugins erklärt werden. Hier hilft bei Fragen oft eine Websuche. 🙂

In den folgenden Anleitungen haben wir mit den Wörtern MÜSSEN, SOLLEN und KÖNNEN ausgezeichnet, wie wichtig es ist, dass ihr einzelne Schritte oder Regeln beim Bearbeiten unserer Seite beachtet.

Abschnitte, die mit dem Schlagwort MÜSSEN versehen sind, werden über ein pinkes Ausrufezeichen links neben dem Text hervorgehoben, wie hier. Dazu müssen diese Abschnitte mit der CSS-Klasse muss versehen werden.
Dieses Ausrufezeichen ist an Handies etc. nicht zu sehen.

Bitte trage dazu bei, diese Dokumetation aktuell zu halten. Dafür MÜSSEN Änderunge im Design hier festgehalten werden.

Die Überschriften in der Dokumentation benutzen einen anderen Stil, als der Rest der Seite.

• Die mit grünem Hintergrund benutzen eine Gruppe mit grünem Hintergrund, worin eine Überschrift H2 ist.
• Die innerhalb dieser Abschnitte benutzen eine H3, deren Größe in der rechten Seitenleiste auf L geändert wurde.

Für das automatisch erstellte Inhaltsverzeichnis ist es wichtig, dass H2 und H3 richtig verwendet werden.

Unser Kalender wird über das Plugin EventPrime betrieben. Hier ist die offizielle Dokumentation des Plugins.

Über das Code-Snippet Kalender wird der Kalender an unser Theme angepasst. Außerdem werden via JavaScript ein paar Funktionen hinzugefügt, wie z.B, das automatische zensieren von internen Termin bei ausgeloggten Nutzer:innen.

Über das Plugin Content Control wird geregelt, dass unangemeldete Besucher:innen nur den öffentlichen Belegungskalender zu sehen bekommen.

Termine eintragen

Wiederkehrende Termine SOLLEN mit Enddatum versehen werden, damit unsere Kalenderdaten nachhaltig wartbar bleiben und kein ungewolltes Chaos entsteht. Dieses kann jederzeit verlängert werden.

Hinweis: Wie alte Events in der Listenansicht ausgeblendet werden

Leider gibt es mit dem aktuellen Kalenderplugin keine wirklich gute Möglichkeit, vergangene Termine in der Listenansicht auszuschließen aber in der Kalenderansicht zu zeigen. Ich (simonc) habe einiges probiert, aber es gab immer irgendein Problem; teils waren das auch eindeutig Bugs.

Ich habe das jetzt im JavaScript-Snippet so gelöst: In der Listenansicht werden immer 50 Events am Stück geladen. Alle vergangenen Events werden entfernt und der Mehr-laden-Button wird aktiviert. Das wird wiederholt, bis 50 geplante Events angezeigt werden (oder weniger, falls es nicht mehr geplante gibt).
(In den Einstellungen gibt es auch die Möglichkeit, alle Events zu laden oder eine nutzerdefinierte Menge. Das bitte nicht tun, weil aus irgendwelchen Gründen die Kalenderansicht dadurch crasht.)

Das Problem hierbei ist, dass die Eventliste mit der Zeit langsamer wird. Auf einer Testseite habe ich bei ca. 200 vergangenen Events eine Ladezeit von ca. 2 Sekunden gehabt. D.h. dass sollte innerhalb der nächsten 1-3 Jahre keine großes Problem werden.

Ihr könnt dem entgegenwirken, indem ihr z.B. Events die älter als ein Jahr sind, löscht.

Ich denke, perspektivisch ist es eh sinnvoll, nochmal auf ein anderes Plugin umzusteigen, weil sich hier mit der Zeit einfach zu viele Probleme gezeigt haben. Wie gesagt, sobald ich ein besseres finde, melde ich mich nochmal.

Im Folgenden wird erklärt, was grundlegend beim Erstellen neuer Inhalte beachtet werden sollte und wie die verschiedenen Vorlagen richtig verwendet werden.

Für das verändern von Designelementen wie z.B. Farben oder Schriften siehe den nächsten Abschnitt „Designrichtlinien“, da dies i.d.R. für die ganze Seite in den Stil-Einstellungen verändert werden soll und nicht in einzelnen Blocks.

Grundlegendes & Best Practices

Grundlegend empfehle ich beim Arbeiten die Listenansicht in der linken Seitenleiste offen zu haben, da sie dir hilft, bei verschachtelten Blöcken (Gruppen in Gruppen) den richtigen zu wählen. Außerdem behältst du so im Blick, dass dein Dokument ordentlich strukturiert ist.
Du kannst diese links oben über den Button mit drei versetzten Strichen öffnen.

Inhaltliche Abschnitte SOLLEN in Gruppen-Blöcken zusammengefasst sein. D.h. wenn alle Gruppen eingeklappt sind sollten in der Listenansicht nur Gruppen zu sehen sein. (Der Kopfbereich der Startseite ist ein bisschen eine Ausnahme, aber sonst soll das so sein.)
Diese obersten Gruppen sollten alle die „Gesamte Breite“ des Bildschirms einnehmen und aussagekräftig umbenannt werden.
Dieses Zusammenfassen in Gruppen sorgt für eine stabilere Seitenstruktur und macht Blöcke in der Listenansicht leichter auffindbar. Außerdem erlaubt es, inhaltliche Abschnitte durch eine andere Hintergrundfarbe hervorzuheben und wird vom Code-Snippet für das pinke Klebeband benötigt.

Abstände zwischen Blöcken SOLLEN NIE darüber geregelt werden, einen Absatz einzufügen. Stattdessen sollten die Einstellungen „Innenabstand“ und „Außenabstand“ bei Gruppen etc. benutzt werden.
Um grundsätzlich den Abstand zwischen Blöcken innerhalb einer Gruppe etc. zu ändern, kann der Regler „Block-Abstände“ genutzt werden, aber i.d.R. sollte hier die Voreinstellung genügen. Zum ändern der Voreinstellungen für die gesamte Seite, sieh „Designrichtlinien“.

Um zwei Blöcke mehr voneinander zu trennen, können außerdem die Blöcke „Abstandhalter“ und „Trenner“ genutzt werden.

Bildquellen MÜSSEN angegeben werden. Hierzu musst du das Bild in der Mediathek aufrufen und dann die Quelle in das Feld Beschriftung eintragen – im Normalfall soll das passieren, wenn das Bild hochgeladen wird. Die Quelle wird dann automatisch allen Bildern hinzugefügt.
Ausnahme sind die Bilder in den Projekt-Kacheln, hier wird nur in der Projekt-Infokarte die Bildquelle angegeben (weil es die gleichen Bilder sind). Um die Beschriftung bei den Kachelbildern zu entfernen, klicke einmal auf den Beschriftungsbutton in der Bearbeitungsleiste des Bildes, sodass dieser wieder weiß wird.

[obfuscate_email email="mailadresse@glo.de" link=true]
(link=true ist nur nötig, wenn die Mailadresse klickbar sein soll.)

Über CSS-Klassen können Blöcke durch Code Snippets (siehe unten) verändert werden. Diese CSS-Klassen können über rechte Seitenleiste > Reiter Zahnrad > Erweitert hinzugefügt werden. Das wird aber an den entsprechenden Stellen in diesem Dokument auch noch erwähnt.

Blöcke hinzufügen kannst du auf verschiedenen Wegen.

1. Über das blaue Plus links oben kannst du dir in der Seitenleiste alle Blöcke anzeigen lassen.
2. Über das blaue oder schwarze Plus, dass teilweise zwischen den Blöcken bzw. am Ende eines leeren Absatz-Blockes erscheint, kannst du ein Fenster öffnen, um nach Blöcken zu suchen.
3. In einem leeren Absatz-Block kannst du einen Schrägstrich „/“ eingeben gefolgt von deinem Suchbegriff, um nach Blöcken zu suchen.
4. Du kannst einen leeren Absatz-Block hinzufügen indem du bei einem Block auf die drei Punkte klickst und „Davor hinzufügen“ oder „Danach hinzufügen“ auswählst. Das geht in der Listenansicht oder dem kleinen Bearbeitungsband, was über dem Block eingeblendet wird.

Über all diese Wege kannst du auch Vorlagen einfügen.

Vorlagen richtig verwenden

Vorlagen sind leider nicht sehr leistungsstark in WordPress, z.B. werden Aktualisierungen in der Vorlage nicht automatisch auf alle entsprechenden Blöcke angewandt.
(Man kann zwar auch synchronisierte Vorlagen erstellen, aber diese synchronisieren dann auch den Inhalt der Blöcke.)

D.h. Vorlagen helfen vor allem beim hinzufügen neuer Abschnitte, um komplexere Setups schnell einfügen zu können, sind aber nicht hilfreich, um bestehende Designs zu ändern. Deshalb verwendet diese Seite auch nur folgende Vorlagen:

• Seitentitel
• Projekt-Kachel
• Projekt-Infokarte
• Großes Bild mit Klebeband

Dies sind die richtigen Namen der Vorlagen, mit denen du sie suchen kannst (siehe oben, Blöcke hinzufügen).

Alle weiteren Designelemente sind so einfach zu erstellen, dass sich eine Vorlage nicht lohnt.

Seitentitel

Diese Vorlage ist für alle Seiten außer der Startseite gedacht und fügt einfach eine Gruppe ein, die bereits die richtigen Abmessungen und Farbeinstellungen für den Seiten-Titelbereich hat.

Großes Bild mit Klebeband

Diese Vorlage soll verwendet werden, wenn ein Großes Bild, dass die gesamte Breite einnimmt, zwischen Textabschnitte gesetzt wird.
Sie besteht aus einer Gruppe mit einem Bild, dem die CSS-Klasse klebeband-abschnitt hinzugefügt wurde.

Die Farbe des Klebebands lässt sich nicht super einfach ändern. Über das Code-Snippet lässt sich die Farbe der Klebebänder mit dieser Zeile ändern:
filter: hue-rotate(96deg) brightness(1.3);
Hue-rotate() rotiert alle Farbwerte des Bilds um eine bestimmte Gradzahl auf dem Farbspektrum. Mit brightness() kann die Helligkeit angepasst werden. Die Werte in dem Beispiel oben ändern die Farbe so, dass sie recht ähnlich ist wie das Akzent-Gelb. Bei dieser Methode ist ein bisschen rumprobieren nötig, um ein gutes Ergebniss zu haben – ggf. hilft es, sich ein Bild eines Farbspektrums anzuschauen, um die Abstände der Farben etwa einschätzen zu können.

Vermutlich ist es einfacher, die Bilder in einer externen Software einzufärben und neu hochzuladen. In diesem Fall müssen die Links im Snippet aktualisiert werden.

Farben

Schriften

Links in Fließtexten haben neben der farbigen Hervorhebung auch eine Unterstreichung, um Webstandards an Nutzbarkeit und Barrierenarmut gerecht zu werden. Mehr Infos siehe hier.

Abmessungen

Unter Website-Editor > Stile habe ich folgende Abmessungen geändert:

Ich habe die Blockabstände unter Layout auf 0 gesetzt, damit keine weißen Lücken zwischen Inhalten und dem Header / Footer entstehen. Damit die Blöcke aber sonst sinnvolle Abstände haben, habe ich die Blockabstände innerhalb von Gruppen auf 1 gesetzt – da eigentlich alles in Gruppen ist (siehe grundlegende Einführung oben).

Karten / Kacheln / Buttons etc. haben immer runde Ecken mit einem Radius von 6px.

Bei Inhalten, die auf verschiedenen Geräten dynamisch ihre Größe verändern sollen, SOLL rem statt px als Einheit genommen werden. Beim Bearbeiten von seitenweiten Stilen handelt es sich i.d.R. um solche Inhalte. Bei Interesse sind hier mehr Infos dazu.

Fokus-Stile

Fokus-Indikatoren sind ein wichtiges Design-Element um Barrieren abzubauen und die Navigation der Seite insgesamt angenehmer zu machen. Wenn ein Element fokussiert ist (z.B. in dem es über TAB angesteuert wurde), wird es designtechnisch hervorgehoben, sodass klar ist, welches Element fokussiert ist.

Unsere Fokus-Stile sind identisch mit unseren Hover-Stilen (wenn der Mauszeiger über einem Element schwebt) und werden über das CSS-Snippet Fokus Indikator gekritzelt kontrolliert.

Bei Links in Menüs wird die handgezeichnete durchgehende Unterstreichung in schwarz eingeblendet.
Bei Links im Fließtext wird die handgezeichnete gepunktete Unterstreichung durch die handgezeichnete durchgehende ersetzt.
Bei Buttons wird eine Outline hinzugefügt und der Text wird zu weiß animiert.
Bei den Projektkacheln wird eine Outline hinzugefügt.

Seite: 404

Die Seite kann über Design > Webite-Editor > Templates > Seite: 404 bearbeitet werden. Aus technischen Gründen braucht es auch die Event-Prime Platzhalterseite, die vom Design her einfach eine Kopie der 404 Seite darstellt und die ganz normal unter Seiten bearbeitet werden kann.

Die Software dieser Seite MUSS aktuell gehalten werden. Das umfasst WordPress, Plugins und Themes.

WordPress wird automatisch aktualisiert, sobald eine neue Version verfügbar ist.

Plugins und Themes können automatisch aktualisiert werden, aktuell ist das aber deaktiviert, da es nach Updates von Plugins zu Problemen kommen kann. Deshalb MÜSSEN Plugins und Themes regelmäßig (1x im Monat? Pro Newsletter?) manuell aktualisiert werden.

Vor der Aktualisierung MUSS ein Backup erstellt werden. Dazu einfach über die linke Seitenleiste ganz unten zum Plugin Duplicator navigieren und dort rechts oben auf Neues erstellen klicken. Dann einfach durch den Dialog durchklicken und alle Einstellungen beibehalten. Abschließend die Backup-Datei und den Installer downloaden und am abgesprochenen Ort hinterlegen.

Nach der Aktualisierung MUSS ein kurzer Funktionscheck der Webseite gemacht werden, indem alle Seiten einmal aufgerufen werden. (Am besten vorher den Cache leeren.)

Backups wiederherstellen

Backups können über das Duplicator-Dashboard wiederhergestellt werden.

Sollte die Seite gar nicht mehr funktionieren, ist auch eine Herstellung über den Host möglich. Das wird hier erklärt.

Um Servervolumen zu sparen, SOLLEN nicht mehr als zwei Backups in der Liste im Duplicator-Dashboard aufgeführt werden. D.h. nach einem Backup soll das älteste jeweils gelöscht werden, sodass nur noch zwei übrig sind.

Twingle wird über ein Code-Snippet hinzugefügt. Alle Einstellungen dazu werden über die Twingle-Webseite vorgenommen.

Diese Seite verwendet Code Snippets, also kleine Abschnitte von Code (vor allem CSS, z.T. ein bisschen JavaScript), um kleinere visuelle Probleme zu lösen.

Wenn du im Adminbereich in der linken Seitenleiste auf Code-Snippets klickst, findest du einer Liste aller verwendeten Schnipsel.

Manche der Snippets laufen komplett im Hintergrund, für andere musst du sogenannte Klassen zu den Blöcken hinzufügen, bei denen du willst, dass das Snippet auf sie angewandt wird. (Z.B. um pinkes Klebeband hinzuzufügen.)

Aber keine Sorge, das wird an den jeweils relevanten Stellen weiter oben in der Dokumentation immer erklärt.

❗Achtung: Bitte ändere an diesen Code-Schnipseln nur etwas, wenn du weißt, was du tust. Normalerweise, sollte es nicht nötig sein, dort etwas zu ändern. Im Zweifel, kannst du dich an simonc wenden.

Hier ist ein Überblick darüber, was die einzelnen Snippets regeln. Die konkreteren Funktionen sind in den Snippets auskommentiert. (Allerdings ist ein Verständnis der jeweiligen Sprachen nötig.)