Spoiler können einem den Spaß daran nehmen, ein bestimmtes Buch zu lesen, ein Spiel zu spielen, einen Film oder eine Serie anzuschauen o.ä. Daher kann es durchaus sinnvoll sein, den Bereich, in dem über Inhalte gesprochen wird, auf seiner Website zunächst auszublenden und es den User*innen selbst zu überlassen, ob sie es wissen wollen oder nicht. Wie man so etwas in WordPress, ohne Plugin, nur mit etwas css-Code und dem HTML-Block umsetzt erkläre ich im Folgenden:
Zunächst der css-Code, der beispielsweise in die Datei style.css des verwendeten Themes eingefügt werden kann:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
details { border: 1px solid gainsboro; grid-column: 2 / 3; height: min-content; transition: all .5s; } summary { position: relative; line-height: 300%; padding-left: 1em; } summary::marker { color: transparent; } summary::after { cursor: pointer; width: 1rem; height: 1em; position: absolute; top: 0; right: 1em; color: green; content: ‚↓‘; font-size: 2em; font-weight: bold; text-align: right; transition: transform .2s; } details[open] summary::after { width: 1rem; height: 1em; position: absolute; top: 0; right: 1em; color: red; content: ‚↑‘; font-size: 2em; font-weight: bold; text-align: right; transition: transform .2s; } details[open] summary { background: rgb(255, 235, 230); } details p { padding: .5em; } |
Im Anschluss im (Gutenberg-)Editor von WordPress einen individuellen HTML-Block mit folgenden HTML-Code erstellen:
|
1 2 3 4 |
<details> <summary>Spoiler:</summary> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </details> |
Das war es auch schon und man erhält folgendes Ergebnis:
Spoiler:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Bild von 200 Degrees auf Pixabay
