Editorial
Der neue Block-Editor (Gutenberg) verändert Ihr Schreiben mit WordPress. Das ist zugegeben etwas gewöhnungsbedürftig. Wenn Sie ihn aber erst mal etwas besser kennen, macht es wirklich Spass damit zu arbeiten.
Die wesentliche Änderung beim Arbeiten mit dem Block-Editor bezieht sich auf die Strukturierung der Seite in Blöcke.
Das bedeutet, jedes Element wie Überschrift, Textabsatz, Aufzählungen, Bilder, etc. werden als eigenständige Blöcke gehandhabt. Interessant dabei ist, die Blöcke können einfach nach oben, resp. nach unten verschoben werden. Das erleichtert das Arbeiten ungemein.
Basics
Effizientes Arbeiten
Erst mal ein paar Tipps für effizientes Arbeiten. Wie das Ergebnis auf der Webseite im Endeffekt wirklich aussieht, das vermag der Editor nicht wirklich vermitteln.
Ist ein Beitrag oder eine Seite noch nicht veröffentlicht, bleibt einzig ein Klick auf Vorschau (in einem neuen Fenster/Tab) um das Ergebnis zu sehen.
Ist der Inhalt jedoch online, kann er da direkt angesehen werden. Ich empfehle daher für die Arbeit 2 Browser zu benutzen. Im Einen bearbeiten Sie die Seite im Backend, im Anderen betrachten Sie sie im Frontend. Der Vorteil von 2 Browsern im Gegensatz zu einem Browser mit 2 Tabs ist derjenige, dass Sie mittels Tastatur die Browser wechseln können, ebenfalls auch die Seite nachladen.
Browser wechseln
Das Wechseln der Browser erfolgt indem Sie zuerst die cmd-Taste drücken und halten und anschliessend die tab-Taste kurz drücken.
Inhalte nachladen
Das Nachladen der Webseite erfolgt dann mit cmd-r.
Tipp: Wenn Sie auf diese Weise arbeiten wollen, die Seite aber nicht öffentlich zugänglich sein soll, dann ändern Sie den Status von Öffentlich auf Privat. In diesem Fall müssen Sie im Browser jedoch als Admin oder Redakteur eingeloggt sein, um die Seite zu sehen. Setzen Sie die Seite auf Passwortgeschützt (da reicht dann auch ein sehr eifaches Passwort), dann müssen Sie sich nicht ins Backend einloggen, dann reicht das einfache Passwort bei Aufforderung.
Die Tastatur
Absatz vs. Zeilenumbruch
Von Ihrem Textverarbeitungsprogramm werden Sie es wahrscheinlich gewohnt sein, wenn Sie die Zeilenumbruchtaste (Enter) drücken, gibt es einen einfachen Zeilenumbruch. Das heisst, der Text wird direkt auf der nächsten Zeile fortgesetzt.
In WordPress bewirkt das einen neuen Absatz. Das erkennt man daran, dass der Abstand zur vorherigen Zeile etwas grösser ist.
Absatz mit Enter
Erzwungener Zeilenumbruch
Um innerhalb eines Absatzes (Block) einen einfachen Zeilenumbruch zu erzwingen, halten Sie erst die Shift-Taste gedrückt, gefolgt von der Enter-Taste.
Zwischen den Programmen wechseln
Webseite neu laden
Arbeiten mit Blöcken
Wenn Sie eine neue Seite/Beitrag erstellt haben, können Sie gleich mit dem Schreiben los legen. Das Erste, der Titel der Seite/desBeitrages ist noch kein Block, das gehört ja noch nicht zum eigentlichen Inhalt der Seite, aber das Zweite ’schreib etwas oder tippe / zur Blockauswahl‘, da kann man gleich mit schreiben beginnen, egal ob es sich dabei um eine Überschrift oder einen Absatz handelt.
Mit jedem ‚Enter‘ auf der Tastatur wird sogleich auch ein neuer Block vom Typ ‚Absatz‘ erstellt.
Wie ändere ich einen Absatz zur Überschrift?
Wenn Sie in einen Block klicken, erscheinen direkt darüber ein Menu mit verschiedenen Buttons zum Ändern der Einstellungen.
Der Button ganz links definiert den ‚Typ‘ des Blocks. Draufklicken, Überschrift auswählen, fertig ist die Überschrift.
Jetzt stehen weitere, dem ‚Typ‘ entsprechende Buttons zur Verfügung, bei der Überschrift also H1 bis H6.
Das Absatz-Blockmenu
Wird ein Block inhaltlich bearbeitet, erscheint standardmässig direkt darüber das Blockmenu. Hier finden Sie alles Nötige um den Inhalt zu gestalten.
Ganz links an erster Stelle die bereits erwähnte Auswahl für den Blocktyp. Hier stehen folgende Optionen zur Auswahl:
- Überschrift
- Liste
- Spalten
- Vorformatiert
- Zitat
- Gruppe
- Zitat
- Vers
Die 6 Punkte bilden den Angriffspunkt um den Block zu verschieben. Anklicken und ziehen.
Mit den beiden Pfeilen kann der Block jeweils um einen Block nach oben oder nach unten verschoben werden.
Mit der Ausrichtung kann der Text links, zentriert oder rechts ausgerichtet werden.
Dieses Symbol ist nur vorhanden, wenn Sie nachträglich das Plugin Shortcodes Ultimate installiert haben. Mit Diesem können Sie vielfältige Effekte gestalten. Probieren Sie es einfach aus, ich gehe an dieser Stelle nicht weiter auf das. Plugin ein.
Um Passagen im Text fett zu gestalten, markieren Sie den Text und klicken auf das Symbol.
Um Passagen im Text kursiv zu gestalten, markieren Sie den Text und klicken auf das Symbol.
Um Passagen im Text als Link auszuzeichnen, markieren Sie den Text und klicken auf das Symbol. Fügen Sie die URL ein und geben Sie an, ob die Seite im selben oder in einem neuen Fenster/Tab geöffnet werden soll.
- Blocksatz
Richtet den Text als Blocksatz aus - Durchgestrichen
Streicht den Text durch - Hervorheben
Erlaubt die Farbe von Text und Hintergrund des markierten Textes individuell zu bestimmen - Hochgestellt
Stellt den markierten Text hoch - Inline-Bild
Fügt ein Bild fliessend in den Text ein. Macht meiner Meinug nur dann Sinn, wenn das Bild nicht grösser als der Text ist - Inline-Code
Stellt den markierten Text als Code dar, meist in nichtproportionaler Schrift wie Courier - Tastatur-Eingabe
Macht nicht wirklich Sinn? - Tiefgestellt
Stellt den markierten Text tief - Unterstrichen
Unterstreicht den markierten Text
- Weitere Einstellungen
Blendet die allgemeinen Blockeinstellungen rechts ein - Kopieren
Kopiert den Inhalt des Blocks in die Zwischenablage - Duplizieren
Erstellt ein Duplikat vom Block - Davor einfügen
Fügt einen neuen Absatz vor dem aktuellen Block ein - Danach einfügen
Fügt einen neuen Absatz nach dem aktuellen Block ein - Verschieben nach
Da bin ich noch nicht dahinter gekommen - Als HTML bearbeiten
Wechselt in den HTML-Modus - Visuell bearbeiten
Wechselt zurück in den visuellen Modus - Zu wiederverwendbaren Blöcken hinzufügen
Fügt den aktuellen Block zu den wiederverwendbaren Blöcken hinzu - Gruppieren
keine Angabe zur Funktion - Absatz entfernen
Entfernt den Absatz (und andere Blöcke)
Bearbeiten von Blöcken
Etwas tricky, ein Teil der Einstellungen finden sich in der Seitenleiste, der andere Teil über dem Block.
Einstellungsmöglicheiten
Die Einstellungsmöglichkeiten sind je nach Block unterschiedlich. Was alle Blöcke gemeinsam haben, dem Block können zusätzliche CSS-Klassen zugewiesen werden.
Die Buttons mitten im Textfluss stören mich
Ja, mich auch, weil sie sich über den Inhalt des oberen Blocks legen. Ich empfinde das als unübersichtlich. Die Buttons direkt beim zu bearbeitenden Block sind aus der Sicht jedoch schon super praktisch. Aber die Entwickler haben das wohl auch erkannt und bieten eine Alternative an.
Im Bearbeitungsbereich ganz oben, ganz rechts gibt es wieder den Button mit den drei übereinander liegenden Punkten. Da einfach ‚obere Werkzeugleiste‘ auswählen, und die Buttons verschieben sich an den oberen Bearbeitungsbereich. Der Weg mit der Maus ist etwas weiter, dafür stören sie nicht die Sicht auf den zu bearbeitenden Inhalt.
Verschieben von Blöcken
Das Verschieben der Blöcke ist unheimlich praktisch. Man kann an beliebiger Stelle einen neuen Block erstellen, resp. einen bestehenden Block duplizieren und ihn dann an die gewünschte Stelle verschieben. Das Duplizieren von Blöcken macht insbesondere dann Sinn, wenn erweiterte Einstellungen getätigt wurden, oder zusätzliche CSS-Klassen zugewiesen worden sind.
Das Verschieben passiert am Einfachsten über die Pfeiltasten im Blockmenu.
Hinzufügen von Blöcken
Um einen neuen Block hinzuzufügen können Sie ganz oben bei den Buttons das Plus-Symbol verwenden. Ist noch ein Block zur Bearbeitung aktiv, wird der neue Block in der Regel nach Diesem eingefügt. Es kann aber auch passieren, dass der Block an erster Stelle eingefügt wird.
Wenn Sie mit der Maus den oberen oder unteren Rand eines Blocks überfahren, erscheint dieses Symbol ebenfalls. Es fügt den neuen Block entsprechend vor oder nach dem bestehenden Block ein.
Beim manuellen Einfügen eines neuen Blocks stehen Ihnen eine Vielzahl an Block-Typen zur Verfügung.
Was gibt es für Blöcke?
Nebst den folgend beschriebenen Blöcken kann man mittels Plugins weitere Blöcke für zusätzliche Gestaltungsmöglichkeiten hinzufügen.
Überschrift
Überschriften in den Auszeichnungen H1 bis H6.
Absatz
Allgemeiner Text, Ausrichtung wählbar, links, mittig, rechts.
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. 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.
Standardmässig ist die Grösse vom CSS des Themes vorgegeben, damit die Schrift immer die Selbe ist. In den Blockeinstellungen rechts kann die Grösse für den kompletten Block angepasst werden. Dabei empfehle ich nicht die Angabe in px (Pixel), sondern in em. Dabei entspricht 1em der Grösse der übergeordneten Klasse. In diesem Fall bewirkt diese Angabe nichts. 2em verdoppeln die Schriftgrösse, 0.5em halbieren Sie.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
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. 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.
Initialbuchstabe
Der erste Buchstabe eines Absatzes kann unabhängig formatiert werden. Die CSS-Klasse ist bei einem anderen Theme möglicherweise abweichend.
#container .has-drop-cap:first-letter {
font-size: 2em;
color: #bd2a2b;
font-family: Times;
}
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. 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.
Liste
Listen mit Punkten oder Nummerierung.
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
- Listenpunkt 1
- Listenpunkt 2
- Listenpunkt 3
Blockquote (Zitat)
Darstellung für das HTML-<blockquote>.
Es gibt nichts Gutes, ausser man tut es.
Weisheit
Pullquote
Im Gegensatz zum Blockquote (Zitat), soll das Pullquote Appetit auf den folgenden Text machen. Im HTML ist das Pullquote in der Darstellung vom Blockquote abhängig, wenn im Theme dazu keine gesonderte Klasse definiert ist.
Ist das der Fall, können Sie im Customizer eine eigene Klasse anlegen:
figure blockquote{
font-family: Noto Serif TC, serif;
font-style: italic;
font-weight: normal;
text-align: center;
font-size: 1.3em;
border-width: 2px 0px 2px 0px;
border-style: dotted;
padding: 20px;
background: #ffffff;
}
Damit sollte sich das Bullquote wie hier anders darstellen lassen (keine vertikale Linie links).
Eigenes Block-Design
Sie können auch ein eigenes Design für einen Block festlegen. Den Block gestalten mit Schrift, Hintergrund, Rahmen, Abstände, etc.
Dafür legen Sie im Customizer eine eigene Klasse an und tragen diese beim Block-Typ ‚Absatz‘ unter ‚Erweitert‘ als zusätzliche CSS-Klasse ein.
Mein eigener Block
Diesem Block wurden 2 zusätzliche CSS-Klassen zugeordnet. Die Erste für die optische Darstellung.
.mypullquote{
font-family: Noto Serif TC, serif;
font-style: italic;
font-weight: normal;
text-align: center;
font-size: 1.5em;
margin-top: 30px;
margin-bottom: 30px;
border-top: 2px solid;
border-bottom: 2px solid;
padding: 20px
}
Die zweite Klasse bewirkt einen Einschub nach rechts.
.einzug-1 { margin-left: 15px; }
.einzug-2 { margin-left: 30px; }
.einzug-3 { margin-left: 45px; }
Code
Mit diesem Block können Sie Code darstellen. Die Syntax wird jedoch nicht farblich differenziert. Dafür benötigen Sie weiterhin ein spezielles Plugin oder einen Account bei ‚Github‘ (Näheres im Abschnitt ‚Einbetten‚).
<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
<div id="footer-widget-left">
<?php dynamic_sidebar( 'sidebar-4' ); ?>
</div>
<?php endif; ?>
HTML
Im Block vom Typ HTML können Sie HTML-Code eingeben, welcher dann auf der Webseite entsprechend dargestellt (also als HTML verarbeitet wird). Wenn Sie ein Codebeispiel für HTML auf der Seite anzeigen wollen, dann verwenden Sie den Block ‚Code‘.
HTML-Code
<h4>Das ist eine Überschrift der Grösse H4</h4>
<p>Das ist ein Text in einem Absatz</p>
Darstellung im Browser
Das ist eine Überschrift der Grösse H4
Das ist ein Text in einem Absatz
Vorformatiert
Verwendet für den Text eine Schrift mit fester Weite (jeder Buchstabe ist exakt gleich breit). Eignet sich z.B. dafür, um Text in Spalten zu gliedern, ohne eine Tabelle verwenden zu müssen.
Produkt | Händler | Gewicht | Preis Yoghurt Migros 180gr -.55 Yoghurt Aldi 180gr -.49 Yoghurt Lidl 180gr -.49
Vers
Der Block vom Typ ‚Vers‘ ist dazu vorgesehen, um Gedichte zu publizieren. Natürlich kann er auch anderweitig eingesetzt und mittels CSS nach belieben formatiert werden.
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.
Tabelle
Tabellen gehen auch, schlecht zu bearbeiten, kaum Einstellungsmöglichkeiten. Für eine einfache Gestaltung ausreichend.
Tabellenkopf 1 | Tabellenkopf 2 | Tabellenkopf 3 |
Zeile 1 Spalte 1 | ||
Zeile 2 Spalte 2 | ||
Zeile 3 Spalte 1 | Zeile 3 Spalte 3 | |
Tabellen auf dem Handy sind nicht wirklich das Wahre, je mehr Spalten, umso schlechter lesbar.
Tabellenkopf 1 | Tabellenkopf 2 | Tabellenkopf 3 | Tabellenkopf 4 | Tabellenkopf 5 |
Zeile 1 Spalte 1 | ||||
Zeile 2 Spalte 2 | Zeile 2 Spalte 4 | |||
Zeile 3 Spalte 1 | Zeile 3 Spalte 3 | Zeile 3 Spalte 5 | ||
Spalten
Die Inhalte können in Spalten gegliedert werden. Dabei können sie jeweils jeden zur Verfügung stehenden Block aufnehmen. Die Spaltenbreiten und deren Verhältnis können definiert werden.
Wird der äussere Spalten-Block markiert, kann rechts in der Einstellungsspalte die Anzahl der Spalten variiert werden. Ausserdem kann man angeben, ob die Spalten auf dem Handy nebeneinander oder doch besser übereinander angeordnet werden sollen. Klicken Sie so in eine Spalte (etwas oberhalb vom Inhalt), dass Diese umrandet markiert wird, lassen sich die Spaltenbreite u.A. in Pixel und Prozent angeben.
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.
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.
Bilder
Bilder werden grundsätzlich aus der Mediathek hinzugefügt. Ist da das gewünschte Bild noch nicht vorhanden, kann es direkt hochgeladen werden.
Weiter können Bilder auch von Google Fotos oder Pexels ausgewählt werden, wobei sie dann auch der Mediathek hinzugefügt werden.
Fotos, welche von einer URL hinzugefügt werden, werden NICHT in der Mediathek gespeichert. Sie werden direkt von der angegebenen URL geladen.
Beachten Sie: Löscht der Eigentümer das Bild, steht es auf ihrer Webseite nicht mehr zur Verfügung. Für eine dauerhafte Verwendung also ungeeignet. In Beiträgen, welche nur vorübergehend online sind, macht dies jedoch durchaus Sinn, entlastet es doch Ihre Mediathek.
In den Einstellungen in der Seitenleiste kann u.A. die Grösse des Bildes beeinflusst werden.
Bildunterschrift
Wenn Sie in das Bild klicken, werden Sie feststellen, dass der Block nicht nur aus dem Bild besteht, sondern auch ein Textfeld für die Bildunterschrift. Dieses Theme stellt die Bildunterschrift identisch dem Absatztext dar, selbe Schrift, selbe Grösse. Um die Bildunterschrift optisch besser vom allgemeinen Text abzuheben, habe ich Diese im CSS etwas verkleinert:
figcaption { font-size: 0.7em; }
Bildgrössen
Form
Bilder und Text
Bilder und Text kann man z.B. in Spalten darstellen. Explizit dafür gibt es aber den Block ‚Medien und Text‘. Der Unterschied ist allerdings, dass die Schriftgrösse unabhängig von der vorgegebenen Absatzgrösse definiert werden kann.
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.
Lockheed C-130 Hercules
Lockheed C-5 Galaxy
Gallerie
Fügt eine Fotogallerie mit Bildern aus der Mediathek hinzu. Dabei kann angegeben werden, ob auf die Bilder verlinkt werden soll. Das Bild wird in Originalgrösse auf schwarzem Hintergrund angezeigt. Ohne speziellen Lightbox-Effekt mit der Möglichkeit zum Blättern wie es Gallery Plugins machen. Sehr einfach gehalten.
Enthält eine Gallerie nur ein einziges Bild, so wird es, ist es gross genug auf der ganzen Seitenbreite dargestellt. Dieser Block eignet sich also nicht dazu um ein kleines Vorschaubild dezent in die Seite zu integrieren und mit einem Klick gross anzuzeigen.
Gekachelte Gallerie (nur wenn Jetpack installiert ist)
Wie Eingangs erwähnt, gibt es Plugins, welche zusätzliche Blöcke dem Editor hinzufügen. Jetpack ist Eines davon. Es wird zusammen mit WordPress vorinstalliert, ist aber nicht aktiv. Auf der Seite der Plugins kann man es aktivieren. Bei Jackpack (ein US-Produkt) scheiden sich die Gemüter, ob es DSGVO-konform ist. Jetpack ist ein sinnvollen Plugin, auch wenn es um die Abwehr von Kommentar-Spam geht.
Cover
Platziert ein Bild, das mit einem Text versehen werden kann.
Das ist ein Coverbild
Button
Der Block ist dazu ausgelegt, einen einzelnen Button darzustellen. Demzufolge werden die Buttons bei der Blockanordnung übereinander dargestellt, ausser Sie ordnen die Blöcke in Spalten an.
Die Buttons sind nichts anderes als ein Textlink, welchem mittels einer CSS-Klasse ein netter Hintergrund zugewiesen wurde. Packt man das Ganze einfach in einen HTML-Block, kann man sie einfach und schnell auch horizontal anordnen.
<div class="wp-block-button">
<a class="wp-block-button__link" href="https://skull.name/">Startseite</a>
<a class="wp-block-button__link" href="https://skull.name/category/blog/">Blog</a>
<a class="wp-block-button__link" href="https://skull.name/category/wordpress-news/">Wordpress News</a></div>
Gefällt das Design nicht, kann mit eigenem CSS eingegriffen werden.
.wp-block-button__link{
background-color:greenyellow;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Will man zusätzlich zu den Standardbuttons weitere eigene Buttons gestallten, dann einfach mit weiteren CSS-Klassen:
.my-button-red{
color: #ffffff !important;
font-family: 'Titan One', sans-serif;
font-size: 1.5em;
padding: 10px 20px 10px 20px;
background-color:red;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; }
.my-button-blue{
color: #ffffff !important;
... }
.my-button-green{
color: #ffffff !important;
... }
<a class="my-button-red" href="https://skull.name/">Startseite</a>
<a class="my-button-blue" href="https://skull.name/">Startseite</a>
<a class="my-button-green" href="https://skull.name/">Startseite</a>
Gestalterische Blöcke
Abstandshalter
Um zwischen 2 Blöcken einen Abstand zu erzwingen, gibt es den Abstandshalter. Die Höhe ist frei einstellbar. Um Abstände zu erzeugen, verwenden Sie NIEMALS Leerzeilen im Absatz. Google erkennt das und straft sie im Ranking ab.
Trennzeichen
Das Trennzeichen resultiert im Wesentlichen aus dem <hr>-Tag. Das kann nach Belieben im CSS formatiert werden.
Beispiele am HR-Tag
.wp-block-separator{
border: 0.5px #bd2a2b dotted;
}
Mit <hr class="klassenname">
können in einem HTML-Block beliebig weitere Stile für den Trenner definiert werden:
.hr-1{border: 1px #bd2a2b solid; }
.hr-2{border: 3px #bd2a2b solid; }
.hr-3{border: 1px #bd2a2b dashed;}
.hr-4{border: 3px #bd2a2b dashed;}
.hr-5{border: 1px #bd2a2b dotted;}
.hr-6{border: 3px #bd2a2b dotted;}
.hr-7{border: 3px #bd2a2b double;}
.hr-8{border: 10px #bd2a2b double;}
Einbetten von Links
Ein Link einbetten bedeutet, dass WordPress den Link zur Zielseite so darstellt wie im Folgenden gezeigt. Das Funktioniert in erster Line dann, wenn die Zielseite ebenfalls mit WordPress betrieben wird. Bei allen anderen Seiten funktioniert das in der Regel nicht, da kann die Verlinkung lediglich als Textlink erfolgen.
Es gibt 30 weitere Webseiten, Welche das Einbetten in WordPress ebenfalls unterstützen.
- Amazon Kindle
- Animoto
- Cloudup
- Crowdsignal
- Dailymotion
- Flickr
- Imgur
- Issuu
- Kickstarter
- Mixcloud
- ReverbNation
- Screencast
- Scribd
- Slideshare
- SmugMug
- SoundCloud
- Speaker Deck
- Spotify
- TED
- TikTok
- Tumblr
- VideoPress
- Vimeo
- Wolfram Cloud
- WordPress
- WordPress.tv
- YouTube
Stand: 17.5.2022
Naja, das Ganze ist so eine Sache. Braucht es das? Macht es Sinn? Das muss jeder selber Wissen. Der Blockeditor tut sich etwas schwer, zeigt teilweise gar nichts an, obwohl im Frontend alles korrekt ist.
Im folgenden 3 Beispiele die direkt über die WP-Funktion eingebunden wurden.
Youtube
Flickr
Populäre Seiten wie Facebook, Instagram und Youtube bieten Möglichkeiten an, ihre Inhalte mittels iframe einzubinden. Dafür verwenden Sie einen HTML-Block und fügen den Code ein, welchen Sie von der entsprechenden Seite erhalten.
Einbetten von externen Inhalten
Einbetten von Facebook
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fradarin%2Fposts%2F10227028034382134&show_text=true&width=500" width="500" height="379" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
Einbetten von Instagram
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/Blym9UVlCE6/? ...
<!-- gekürzter Code -->
... <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px;=ig_embed&utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">Ein Beitrag geteilt von René A. Da Rin (@radarin)</a></p></div></blockquote> <script async src="//www.instagram.com/embed.js"></script>
Einbetten von Twitter
<blockquote class="twitter-tweet"><p lang="de" dir="ltr">Neuer Beitrag auf meinem Blog: Rammstein RMS <a href="https://t.co/0qqIMw2hMy">https://t.co/0qqIMw2hMy</a></p>— René A. Da Rin (@radarin) <a href="https://twitter.com/radarin/status/1497201767804817415?ref_src=twsrc%5Etfw">February 25, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Neuer Beitrag auf meinem Blog: Rammstein RMS https://t.co/0qqIMw2hMy
— René A. Da Rin (@radarin) February 25, 2022
Einbetten von Youtube
<iframe width="800" height="450" src="https://www.youtube.com/embed/v2QmxqkPm5g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Einbetten von Github
Wie bereits beim Codeblock erwähnt, ist Github eine Möglichkeit um Code übersichtlich und farbig strukturiert darzustellen. Dazu benötigt es einen Account bei Github.com. Unter diesem Account kann man seine Codefragmente als öffentliche Gists publizieren. Um es in der eigenen WordPress Webseite anzuzeigen, reicht es, die URL des Gist in einen Absatz einzufügen. WordPress erledigt den Rest.
https://gist.github.com/radarin/d7681a3e5f10653c3005fd957d641cd5
Navigation
Anker
Jedem Block kann ein Anker, eine sogenannte Sprungmarke zugewiesen werden (Einstellungen rechts, unter ‚Erweitert‘). Damit hat man die Möglichkeit, mittels eines Links direkt an die Stelle im Dokument zu springen, dessen Anker in der URL vermerkt ist.
Die Überschrift Einbetten von Youtube hat den Anker youtube erhalten. Fügt man in der URL dieser Seite noch die Sprungmarke ein, kann man direkt zu dieser Überschrift springen.
https://skull.name/essentials/der-block-editor/#youtubeEine Sprungmarke in der URL fügt man hinzu, indem man am Schluss der URL ein Rautezeichen und den Namen des Ankers hinzufügt. Alles ohne Leerstellen.
Seitenumbruch
Sie können direkt innerhalb einer Seite oder eines Beitrages einen Seitenumbruch einfügen. Bei der Ansicht im Frontend werden zum Blättern die entsprechenden Elemente angezeigt. Sie können also längere Beiträge in mehrere ‚Seiten‘ unterteilen.
Meine persönliche Meinung: Ohne solche Umbrüche ist es einfacher und schneller sich in der Seite zu bewegen. Solche Umbrüche werden unter anderem von Webmastern eingesetzt, welche möglichst viele Klicks auf der Seite generieren wollen. Nach jedem Absatz ein ‚Weiterblättern‘ führt dazu, dass vorhandene Werbebanner neu geladen werden, was sich auf den Umsatz auswirkt. Ich rate vom Einsatz ab, zeige hier dennoch die Funktion.
Manko: Die Seitennavigation ist derzeit nur numerisch möglich. Die Navigation mit individuellem Text wäre wünschenswert.
Die URL lautet derzeit:
https://skull.name/essentials/der-block-editor/