Spezialelemente und Widgets | Gutenberg Tutorial Teil 7

Aktualisiert am 02-02-2020, von Ellena

Spezialelemente Gutenberg Editor
Besondere Blöcke im Gutenberg Editor (Grafik: eb/Logo: Gutenberg)

Der letzte Teil des Gutenberg Tutorials informiert über Spezialelemente wie Formatierungen, Widgets und Einbettungen sowie deren Verwendung und Besonderheiten. + Tutorial zum Download

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. Zunächst zu den Elementen oder Blöcken, die im Gutenberg Editor unter Formatierung aufgelisteten sind.

Auf den Vers-Block gehe ich hier nicht näher ein, da sich sein Verwendungszweck wohl von selbst erklärt.

Code

Wie die Bezeichnung schon andeutet, handelt es sich um Elemente, die zumindest Basiswissen hinsichtlich CSS- und HTML-Programmierung voraussetzen. Denn ohne diese Programmiersprachen können Sie mit beiden Blöcken nichts anfangen. Außer Sie suchen sich z. B. bei w3schools „fertige Codes“ und kopieren sie.

Seit WordPress Version 5.5 wird der Shortcode-Block ([|]) im Gutenberg Editor wird verwendet, um beispielsweise einen, von einem Plugin generierten, Code einzufügen (s. hierzu auch unter „Widgets“). Falls Sie (noch) eine ältere WordPress Version verwenden, finden Sie Angaben zum „Code“-Block im Tutorial.

Um einen Block mittels eines CSS-Codes zu gestalten, verwenden Sie das Feld in der Seitenleiste des Editors > Erweitert > Zusätzliche CSS-Klasse(n). Außerdem lässt sich der Code-Block in vorformatierten Text umwandeln und/oder gruppieren.

HTML

Wesentlich nützlicher ist der HTML-Block. Denn er ermöglicht es, das Layout eines Text- oder Bild-Blocks etc. anzupassen. Wenn Ihr Text z. B. in einer Box mit Rahmen erscheinen soll, suchen Sie im Gutenberg Editor bisher vergeblich danach. Deshalb müssen Sie zunächst einen entsprechenden CSS-Code für eine Border-Box in Ihrem Theme erstellen. Anschließend können Sie eine Box mit beliebigem Inhalt in Ihren Beitrag einfügen:

  1. HTML-Block erstellen
  2. CSS-Klasse Ihres neuen Codes,
  3. den eigentlichen Inhalt des Blocks sowie
  4. das Ende des Codes

Nach dem selben Prinzip können Sie hier auch eigene HTML-Codes einfügen.

Um das reale Erscheinungsbild Ihres Blocks mit der Veränderung zu sehen, klicken Sie auf den „Vorschau“-Button in der Kopfleiste des Editors oder auf die „Vorschau“ für den gesamten Beitrag.

Vorformatierter Text

Obwohl es sich bei dem Element Vorformatiert eigentlich nur um einen Textblock handelt, gibt es doch einen Unterschied zum Standard-Textblock. Wie ich bereits in meinem Gutenberg Tutorial Teil 4 beschrieben habe, ist beispielsweise ein einfacher Zeilenumbruch innerhalb eines Textblocks nicht möglich. Denn durch das Betätigen der entsprechenden Taste erstellen Sie automatisch einen neuen Textblock mit der entsprechenden Leerzeile zwischen den beiden Blöcken.

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

Pullquote

Auch ein Pullquote ist im Prinzip nur ein Zitat (s. Gutenberg Tutorial Teil 6). Jedoch hebt dieses Element das Zitat besonders hervor. Zwar besteht es genauso wie das Standard-Zitat aus dem Textfeld und einer Zeile für die Quellenangabe (cite), aber Sie haben mehr Gestaltungsmöglichkeiten.

Der Gutenberg Editor bietet zwei Vorlagen an. Einerseits die Begrenzung durch eine durchgehende Linie ober- und unterhalb des Zitats (s. Abb. 46). Andererseits ein stärkeres Einrücken und Verkürzen der Textzeilen. Auch können Sie eine Haupt- (Farbe der Linien / Hintergrundfarbe) und eine Textfarbe festlegen. Darüber hinaus kann ein Pullquote nicht nur links- oder rechtsbündig angelegt werden, sondern auch die gesamte Breite Ihres Textes oder Ihrer Webseite einnehmen.

Für das Zitieren eines (längeren) Textes von einer anderen Webseite oder aus einem Interview ist das Standard-Zitat die erste Wahl. Wenn Sie einen einzelnen Satz besonders hervorheben wollen, verwendest Sie den Pullquote-Block.

Tabellen

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

  1. Auf Tabelle klicken
  2. Anzahl der Spalten und Zeilen festlegen
  3. Stil (Standard / Streifen) auswählen
  4. Tabelle erstellen

Darüber hinaus bestimmen Sie in der rechten Seitenleiste, ob Ihre Tabelle

  • Zellen mit einer festen Breite,
  • eine Kopfzeile
  • und/oder eine Fußzeile

enthalten soll. Außerdem können Sie weitere Anpassungen über die Bearbeitungsleiste vornehmen. Einerseits ist dies die Position der Tabelle (Links-, Rechtsbündig, zentriert, weite oder gesamte Breite).

Andererseits finden Sie in der Leiste 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 des Tabellen-Blocks 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 Sie bei jedem einzelnen Feld nach unten scrollen müssen, um den gesamten Text lesen zu können. Somit wird der eigentliche Zweck einer Tabelle, Inhalte übersichtlich darzustellen, verfehlt.

Um eine übersichtliche und mobilfreundliche Tabelle zu erstellen, ist es besser auf „externe“ Lösungen zu zurückzugreifen. Entweder Sie verwenden einen eigenen CSS-Code (im Internet finden Sie zahlreiche Beispiele, deren Code Sie kopieren und in Ihr Stylesheet einsetzen können). Oder Sie installieren ein Plugin wie Ninja Tables (für viele unterschiedliche Tabellen).

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 auf die Seitenleiste(n) und den 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
  • Beitragsdatum
  • Reihenfolge (Neu > Alt, Alt > Neu, A-Z, Z-A)
  • Beiträge (nur) aus bestimmten Kategorien
  • Anzahl der Beiträge sowie der Spalten

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

  1. Kalender
  2. Archive
  3. Kategorien – Schlagwörter-Wolke
  4. Shortcode
  5. RSS
  6. Suchen

Kalender und Archive

Das Erscheinungsbild dieser beiden Spezialelemente wird durch WordPress selbst und Ihr Theme bestimmt. Abgesehen von dem Einfügen einer CSS-Klasse unter Erweitert können Sie 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 nicht anpassen. So zeigt das Widget immer eine Monats-Liste (s. Abb. 50). Nachdem Sie auf einen Monat geklickt haben, öffnet sich eine neue Seite, auf der die in dem betreffenden Monat veröffentlichten Beiträge aufgelistet sind.

(Da die beiden Abbildungen von einer Testseite mit nur wenigen Beiträgen stammen, sind die Angaben nicht übertragbar. Bei einer regelmäßig gepflegten Website entsprechen die angezeigten Daten natürlich der üblichen kalendarischen Reihenfolge.)

Kategorien und Schlagwörter-Wolke

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

Das Aussehen der Schlagwörter-Wolke wird wiederum allein durch Ihr 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.

Shortcode, RSS und Suchen

Auch diese drei Spezialelemente lassen sich nicht anpassen. Das Shortcode-Widget verwenden Sie, wenn Sie einen, z. B. von einem Plugin erstellen, Code in Ihren Beitrag integrieren möchten. Nachdem Sie den, in den Plugin-Einstellungen erstellten, Code kopiert haben,

  1. erstellen einen Shortcode-Block und
  2. fügen den Shortcode in das vorgegebene Feld ein.

Ähnlich verfahren Sie beim RSS-Widget, nur dass Sie hier die URL des gewünschten RSS-Feeds einfügen (s. Abb. 51-5). Wenn Sie das Suchen-Widget verwenden möchten, können Sie in dem entsprechenden Feld einen Platzhalter wie „Suche“ oder „Suchbegriff eintragen“ vorgeben.

Einbettungen

Den Abschluss bilden Spezialelemente, mit deren Hilfe Sie Texte, Videos etc. von externen Webseiten direkt in Ihren Beitrag einbinden können. Dazu klicken Sie auf den entsprechenden Anbieter aus der Liste Einbettungen. Anschließend geben Sie in das vorgegebene Feld des Blocks den Link ein, unter dem der gewünschte Inhalt, z. B. das YouTube-Video oder der Tweet, verfügbar ist. Nachdem Sie auf Einbetten geklickt haben, erscheint das Startbild des Videos bzw. der Tweet in Ihrem Beitrag.

Probleme bei Einbettungen

Allerdings ist eine Einbettung aus zwei Gründen nicht ganz unproblematisch. Einerseits können insbesondere Videos die Ladezeit Ihrer Website negativ beeinflussen. Andererseits ist es rechtlich bedenklich. Zunächst muss auch beim Einbetten von Inhalten das Urheberrecht gewahrt bleiben.

Des weiteren spielt der Datenschutz eine entscheidende Rolle. Wenn Sie beispielsweise ein YouTube-Video einbetten, werden bereits beim Besuch Ihrer Website Daten an Google übertragen und Cookies gesetzt. Dazu muss der Besucher das Video noch nicht einmal abspielen.

Betten Sie ein Video nicht ein, sondern bieten Sie einen Link an. Dies können Sie 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 Sie absolut nicht auf das „echte“ Video verzichten möchten, gibt es noch weitere Lösungsansätze, deren Umsetzung jedoch wesentlich aufwendiger ist. Auf jeden Fall sollten Sie auf Autoplay bei Videos oder Musik verzichten.

Hiermit endet mein Gutenberg Tutorial. Bei weitergehenden Fragen zum Arbeiten mit dem Gutenberg Editor können Sie mich jederzeit gerne kontaktieren.

Weitere Gutenberg Tutorials

Fragen oder Anmerkungen » Kontakt

WordPress
Verwendung von WordPress Plugins
Share Buttons
Rechtssicheres Teilen mit Shariff
Um die Nutzung meiner Website zu optimieren, verwende ich Cookies. Diese werden nur auf Ihrem Gerät gespeichert. Ich erfasse und speichere keine personenbezogenen Daten meiner Website-Besucher.
AKZEPTIEREN
ABLEHNEN
Datenschutz