Spezialelemente

Als Spezialelemente werden in meinem Tutorial Blöcke bezeichnet, die jeweils ein besonderes Feature in einen Beitrag einfügen. Einerseits können diese recht nützlich sein. Andererseits dürften sie in den meisten Beiträgen aus unterschiedlichen Gründen nur relativ selten Verwendung finden.

Auf den unter den Text-Blöcken zu findenden Vers-Block gehe ich hier nicht näher ein, da sich sein Verwendungszweck wohl von selbst erklärt. Interessanter sind vielleicht Shortcode und Individuelles HTML, du unter „Widgets“ auswählen kannst.

Lesezeit: ca. 8 min

Spezialelemente
Tabellen
- Einschränkung bei Gutenberg Tabellen
Spezialelemente – Widgets
Einbettungen
- Probleme bei Einbettungen

Code

Wie die Bezeichnung schon andeutet, handelt es sich bei diesem sowie dem HTML-Block um Spezialelemente, die zumindest Basiswissen hinsichtlich CSS– und HTML-Programmierung voraussetzen. Denn ohne diese Programmiersprachen kannst du mit beiden Blöcken nur wenig anfangen, außer du suchst dir z. B. bei › w3schools „fertige Codes“ und kopierst sie.

Seit WordPress Version 5.5 wird der Shortcode-Block ([|]) im Gutenberg Editor auch verwendet, um beispielsweise einen, von einem Plugin generierten, Code einzufügen (s. hierzu auch unter „Widgets“). Dazu wählst du den Shortcode-Block aus und kopierst das vom Plug-in generierte Snippet ein. Allerdings ist es ebenso möglich, den generierten Code des Plugins in einen Textblock hin zu kopieren. Daraufhin verwandelt sich dieser automatisch in einen Shortcode-Block.

Um einen beliebigen Block mittels eines CSS-Codes zu gestalten, verwendest du jedoch das Feld in der Seitenleiste des Editors > Erweitert > Zusätzliche CSS-Klasse(n).

HTML

Der HTML-Block ermöglicht es, das Layout eines Text- oder Bild-Blocks etc. anzupassen. Wenn dein Text z. B. in einer Akkordion-Box erscheinen soll, suchst du im Gutenberg Editor bisher vergeblich danach. Dazu musst du zunächst einen entsprechenden CSS-Code für ein Akkordion bzw. für Details im Stylesheet deines Child-Themes erstellen. Anschließend kannst du diese Funktion mit beliebigem Inhalt in deinen Beitrag einfügen:

HTML-Block erstellen
CSS-Klasse deines neuen Codes,
den eigentlichen Inhalt des Blocks sowie
das Ende des Codes.

Kontrolle mittels Vorschau

Um das reale Erscheinungsbild deiner Spezialelemente (Shortcode- oder HTML) zu sehen, klickst auf die „Vorschau“ in der Bearbeitungsleiste des HTML-Blocks oder generell auf den „Vorschau“-Button in der Kopfleiste des Editors bzw. auf die „Vorschau“ für den gesamten Beitrag.

Vorformatierter Text

Obwohl es sich bei Vorformatiert eigentlich nur um einen Textblock handelt, der auch unter der Kategorie TEXT zu finden ist, fällt er unter Spezialelemente, da es doch einen Unterschied zum Standard-Textblock gibt. Wie ich bereits in meinem Gutenberg Tutorial Teil 4 beschrieben habe, ist beispielsweise ein einfacher Zeilenumbruch innerhalb eines Textblocks nicht wie sonst gewohnt möglich. Denn durch das Betätigen der entsprechenden Taste erstellst du automatisch einen neuen Textblock mit der entsprechenden Leerzeile zwischen den beiden Blöcken.

Dagegen kannst du in einen vorformatierten Block beliebige Zeilenumbrüche einbauen oder Zeilen nummerieren, ohne dass automatisch ein neuer Textblock oder eine eigenständige Liste entsteht.

Tabellen

Unter die Spezialelemente fallen auch Tabellen. Um eine Tabelle zu erstellen, gehst du wie folgt vor:

In der Kategorie TEXT auf Tabelle klicken
Anzahl der Spalten und Zeilen festlegen
Stil (Standard / Streifen) auswählen
Tabelle erstellen

Darüber hinaus bestimmst du in der rechten Seitenleiste, ob deine Tabelle

Zellen mit einer festen Breite,
eine Kopfzeile
und/oder eine Fußzeile enthalten soll.

Außerdem kannst du weitere Anpassungen über die Bearbeitungsleiste vornehmen, wie die Tabelle links-, rechtsbündig oder zentriert zu positionieren und für sie die weite oder gesamte Breite zu verwenden.

Gutenberg Tutorial Teil 7 - Spezialelemente Tabellen — Tabellen (Screenshot: Gutenberg Editor/eb)

Des Weiteren findest du dort zusätzlich ein besonderes Tabellen-Symbol. Dahinter verbergen sich die Werkzeuge zur Bearbeitung der einzelnen Spalten und Zeilen. So ist es relativ einfach möglich,

Zeilen oben / unten hinzufügen oder zu löschen
Spalten links / rechts hinzufügen bzw. zu löschen

Einschränkung bei Gutenberg-Tabellen

Obwohl das Erstellen und Bearbeiten der Spezialelemente wie Tabellen im Gutenberg Editor recht einfach zu sein scheint, gibt es einen großen Nachteil. Die mit Hilfe des Editors erstellten Tabellen sind nicht wirklich responsiv. Je nach Gesamt-Breite, Anzahl der Spalten und Umfang des Inhalts ist ihr Erscheinungsbild auf kleineren Bildschirmen unbefriedigend.

Entweder reicht die Tabelle über den Bildschirmrand hinaus oder sie ist so gestaucht, dass in einem Feld nur ein bis zwei Wörter Platz finden. Das führt dazu, dass du bei jedem einzelnen Feld nach unten scrollen musst, um den gesamten Text lesen zu können. Somit wird der eigentliche Zweck einer Tabelle, Inhalte übersichtlich darzustellen, verfehlt.

Einerseits wäre eine Option, eine übersichtliche und mobilfreundliche Tabelle zu erstellen, indem du einen eigen Code dafür schreibst. Im Internet findest du zahlreiche Beispiele für Tabellen-Layouts, deren Code du kopieren und in das Stylesheet deines Child-Themes bzw. in das Feld für zusätzliches CSS in deinem Customizer einsetzen kannst. Andererseits könntest du auch zu einer externen Lösung zu greifen und ein Plugin wie Ninja Tables (für viele unterschiedliche Tabellen) installieren.

› Ninja Tables – WP Plugin

Tabellen extern erstellen

Eine weitere Möglichkeit, die ich bevorzuge, ist, Tabellen auf dem PC mit einem Tabellenprogramm zu erstellen. Anschließend machst du einen Screenshot und fügst ihn als Bild in deinen Beitrag ein. Je nach Umfang der Tabelle aktivierst du in der Seitenleiste für das Bild „Mit Klick erweitern“ bzw. verlinkst du das Bild mit der Mediendatei (ältere WP-Versionen), so dass es sich vergrößert in einem neuen Fenster öffnet oder du lädst die Tabelle als pdf-Datei hoch und verlinkst das Bild mit dieser Datei.

Spezialelemente – Widgets

Mit der Einführung des Gutenberg Editors wurde es möglich, bestimmte Widgets auch in Beiträge / auf Seiten an beliebiger Stelle einzubauen. Zuvor blieb die Anzeige von Widgets nicht nur für Spezialelemente in der/den Seitenleiste(n) und im Footer beschränkt. Bei den Widgets für Neueste Beiträge und Neueste Kommentare sind folgende Einstellungen möglich:

Mit oder ohne Beitragsinhalt
Gesamter Beitrag oder ein Auszug
Maximale Anzahl der Wörter des Auszugs (funktioniert nicht immer)
Beitragsdatum
Reihenfolge (Neu > Alt, Alt > Neu, A-Z, Z-A)
Beiträge (nur) aus bestimmten Kategorien
Anzahl der Beiträge sowie der Spalten

Gutenberg Tutorial Teil 7 - Spezialelemente Widgets — Neuste Beiträge – Widget (Screenshot: Gutenberg Editor/eb)

Darüber hinaus bietet der Gutenberg Editor noch folgende Widgets an:

Kalender
Archive
Kategorien – Schlagwörter-Wolke
Seitenliste
Shortcode und Individuelles HTML (s. o.)
Social Icons
RSS
Suchen

Kalender und Archive

Das Erscheinungsbild dieser beiden Spezialelemente wird durch WordPress selbst und dein Theme bestimmt. Abgesehen von dem Einfügen einer CSS-Klasse unter Erweitert kannst du sie nicht verändern. Der Kalender zeigt den aktuellen Monat, wobei der aktuelle Tag farblich hervorgehoben ist. Außerdem befindet sich darunter ein Link zum vorherigen Monat.

Auch die Archive lassen sich abgesehen von der Darstellung als Liste oder Dropdown-Menü und einer Gruppierung nach Jahr, Monat, Woche oder Tag nicht anpassen. Nachdem du beispielsweise „Monat“ ausgewählt und später auf einen geklickt hast, öffnet sich eine neue Seite, auf der die in dem betreffenden Monat veröffentlichten Beiträge aufgelistet sind.

Kategorien und Schlagwörter-Wolke

Während auch die Schlagwörter-Wolke kaum veränderbar ist, hast du bei den Kategorien einige Optionen. So kannst du diese als Drop-Down-Liste und/oder hierarchisch anzeigen. Wenn du Anzahl der Beiträge anzeigen aktivierst, erscheint die Anzahl der einer bestimmten Kategorie zugeordneten Beiträge in Klammern hinter dem Namen.

Das Aussehen dieser Spezialelemente und insbesondere der Schlagwörter-Wolke wird wiederum allein durch dein Theme bestimmt. Wobei sich die Schriftgröße der einzelnen Schlagwörter bei manchen Themes nach der Häufigkeit der Verwendung richtet. Je häufiger, desto größerer.

Abgesehen von den Social Icons lassen sich diese Spezialelemente kaum anpassen. Nach dem Einfügen des Social Icons Widgets klickst du auf das Plus-Zeichen am Ende der Zeile. Daraufhin öffnet sich links eine Kurz-Übersicht ober über das Plus in der Kopfleiste des Editors eine über alle verfügbaren Icons. Dort wählst du die Icons aus, die du verwenden möchtest. Alle weiteren Einstellungs- und Anpassungsoptionen gleichen den bei den Buttons (s. Gutenberg Tutorial Teil 6).

Gutenberg Tutorial Teil 7 - Spezialelemente Social Icons — Social Icons (Screenshot: Gutenberg Editor/eb)

Beim RSS-Widget, fügst du die URL des gewünschten RSS-Feeds ein. Wenn du das Suchen-Widget verwenden möchtest, kannst du in dem entsprechenden Feld einen Platzhalter wie „Suche“ oder „Suchbegriff eintragen“ vorgeben. Des Weiteren hast du die Möglichkeit, die Breite des Widgets zu bestimmen und einzustellen, wo sich der Such-Button befinden soll.

Gutenberg Tutorial Teil 7 - Spezialelemente Suchen Widget — Suchen Widget (Screenshot: Gutenberg Editor/eb)

Einbettungen

Den Abschluss bilden Spezialelemente, mit deren Hilfe du Texte, Videos etc. von externen Webseiten direkt in deinen Beitrag einbinden kannst. Dazu klickst du auf den entsprechenden Anbieter aus der Liste EINBETTUNGEN. Anschließend gibst du in das vorgegebene Feld des Blocks den Link ein, unter dem der gewünschte Inhalt, z. B. das YouTube-Video, verfügbar ist. Nachdem du auf Einbetten geklickt hast, erscheint das Startbild des Videos in deinem Beitrag.

Probleme bei Einbettungen

Allerdings ist die Nutzung der Spezialelemente zur Einbettung aus zwei Gründen nicht ganz unproblematisch. Einerseits können insbesondere Videos die Ladezeit deiner Website negativ beeinflussen. Andererseits gibt es rechtliche Bedenken. Zunächst muss auch beim Einbetten von (externen) Inhalten das Urheberrecht gewahrt bleiben.

Des Weiteren spielt der Datenschutz eine entscheidende Rolle. Wenn du beispielsweise ein YouTube-Video direkt einbettest, werden bereits beim Besuch deiner Website Daten an Google übertragen und Cookies gesetzt. Dazu muss der Besucher das Video noch nicht einmal abspielen. Dasselbe gilt auch für andere Drittanbieter-Inhalte wie beispielsweise Google Maps oder Facebook-Posts, die du direkt auf deiner Website einbindest.

DSGVO-konforme Verlinkungen

Bette Videos nicht ein, sondern biete jeweils einen Link an, der das Video auf der Seite des Video-Portals öffnet. Dies kannst du mittels eines Buttons oder auch eines eigenen Vorschaubilds tun. Wie bei den Shariff Share Buttons wird die Verbindung zum Drittanbieter dann erst nach dem Klick auf den Link aufgebaut.

Falls du absolut nicht auf das „echte“ Video verzichten möchtest, gibt es noch weitere Lösungsansätze, deren Umsetzung jedoch wesentlich aufwendiger ist. Außerdem kommst du um die Installation und korrekte Programmierung eines Cookie Consent Tools sowie die Information darüber in deiner Datenschutzerklärung nicht herum. Auf jeden Fall solltest du auf Autoplay bei Videos oder Musik verzichten.

PDF: Gutenberg Tutorial 7 mit zusätzlichen Abbildungen (2,7 MB)

Mit diesem Beitrag über Spezialelemente endet mein Gutenberg Tutorial. Bei weitergehenden Fragen zum Arbeiten mit dem Gutenberg Editor kannst du mich jederzeit gerne kontaktieren.