Timeline ohne Plugin in WordPress erstellen

Für die Website von Morten N. Pedersen war ich auf der Suche nach einem Plugin, mit dem ich leicht Timelines auf mehreren Unterseiten, in verschiedenen Gestaltungen und natürlich responsiv würde erstellen können. Nachdem ich mehrere Alternativen vergeblich getestet hatte, beschloss ich, mir selbst eine zu bauen.

Nun nimmt WordPress aber nicht mehr jede HTML-Anweisung an. Das Ganze mal eben im HTML-Editor selbst schreiben fiel also flach. Container (div) setzen, geht auch nur, wenn man weiß wie… Also musste ich mir überlegen, wie ich das Ganze mit den vorhandenen Möglichkeiten des Blockeditors und der Vergabe von Klassen umsetzen konnte.

Die Lösung war dann eigentlich ganz einfach:

Die einzelnen Elemente der Timeline definieren

Die Timeline-Einträge wurden in Absätzen mit eigener Klasse namens timebox geschrieben. Die Klasse sorgt für die passende border und das nötige padding:

.timebox {
	text-align:center;
	background-color: #ffffff;
	border: 1px dotted #880000;
	padding: 10px 5px;
	border-radius: 10px;
	box-shadow: 0 8px 18px 0 rgba(0,0,0,.12);
}

Da manche timebox-Absätze nach unten den Standard-Abstand haben sollen (wenn eine Jahreszahl auf sie folgt) und andere einen größeren (wenn ein weiterer Eintrag folgt), muss ich für den zweiten Fall eine weitere Klasse namens .timespace vergeben:

.timespace {
	margin-bottom: 40px;
}

Die Jahreszahlen werden ebenfalls als Absätze mit Anpassung in Schriftgrößen- und Farbe als dritte Klasse .timeyear eingesetzt:

.timeyear {
	text-align: center;
	font-size: 1.5 em;
	font-weight: 600;
	color: #bebebe;
	background-color: #ffffff;
}

Elemente gruppieren und Hintergrundlinie hinzufügen

Um eine verbindende Linie dazwischen zu setzen, fasse ich dann alle Einträge und Jahreszahlen als Gruppe zusammen, die mit der Klasse timeline wiederum eine Linie als background-image in die Mitte gesetzt bekommen, die nur vertikal wiederholt wird:

.timeline {
	background-image: url("url der Grafik");
	background-repeat: repeat-y;
	background-position:center;
}

Die Grafik ist einfach ein 200 x 200px jpg mit einer senkrechten Linie in der Mitte:

Damit die Linie auch über die Einträge und Jahreszahlen hinaus angezeigt wird, habe ich am Anfang und Ende noch einen Abstandshalter in die Gruppe eingefügt.

Beispiel für eine Timeline

2020

Erster Eintrag
Hallo. Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn.

2019

Zweiter Eintrag
Aber bin ich Blindtext allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht.

Dritter Eintrag
dieser text hat eigentlich gar keinen wirklichen inhalt. aber er hat auch keine relevanz, und deswegen ist das egal. er dient lediglich als platzhalter.

2018

Bilder zu Einträgen hinzufügen

Möchte man noch Bilder in die Einträge hinzufügen, dann muss man die betreffenden Absätze und Bildblöcke jeweils wieder gruppieren und die mit der timebox-Klasse versehen:

Annette Schwindt

Das ist ein Eintrag mit Text, der eigentlich gar keinen wirklichen Inhalt hat. Aber er hat auch keine Relevanz, und deswegen ist das egal. Er dient lediglich als Platzhalter.

Gegebenenfalls muss man dabei noch mit einer zusätzlichen Klasse für einzelne Blöcke innerhalb dieser Gruppe die Abstände anpassen.

Wie weise ich in WordPress Klassen zu?

Und falls noch nicht bekannt ist, wie man einzelnen Blöcken oder Gruppen in WordPress 5 überhaupt Klassen zuweisen kann:

  • Die Klassen im Customizer unter Zusätzliches CSS veröffentlichen
  • Dem jeweiligen Block im Editor rechts ganz unten unter Erweitert > Additional CSS Class(es) die betreffende Klasse zuweisen (dazu muss natürlich über das Zahnrad die rechte Kontextmenü-Spalte aufgeklappt und der Cursor im betreffenden Block sein).

Kleine Bitte zum Schluss

Ich habe kein Problem damit, wenn Ihr diese Timeline auch bei Euch verwendet. Sonst würde ich das ja nicht hier veröffentlichen. Nur speichert die Hintergrundgrafik (senkrechte Linie) bitte in Eurer eigenen Mediathek ab. Danke!

Und wer beim Nachbauen seine Wertschätzung zeigen möchte, kann gern auf den Artikel hier verlinken. 😉

Titelfoto: Free-Photos, Pixabay

Weiterempfehlen via...