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.

Ich kann hier nicht auf jedes letzte Detail eingehen, auch werden nicht alle Blöcke vorgestellt. Letztendlich heisst es einfach: AUSPROBIEREN!

Spielen Sie mit den Einstellungen.

Der Autor

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?

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.

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

1. Listenpunkt 1
2. Listenpunkt 2
   1. 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.

So toll der neue Block-Editor ist, noch gibt es aber auch ein ‘aber’.

Lieb gewonnene Funktionalität vom TinyMCE fehlt.

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

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.

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.

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.

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.

3 WP-Snippets um den Auszug zu optimieren

Es gibt 30 weitere Webseiten, Welche das Einbetten in WordPress ebenfalls unterstützen.

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.

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&amp;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>&mdash; 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>

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

	<?php
	// Quelle: SnowCrash
	// Funktion
	function generatePW($length=8)
	{
	// Zu verwendende Zeichen definieren
	$dummy = array_merge(range('0', '9'), range('a', 'z'), range('A', 'Z'), array('#','&','@','$','_','%','?','+'));
	// Array zufaellig fuellen
	mt_srand((double)microtime()*1000000);
	for ($i = 1; $i <= (count($dummy)*2); $i++)
	{
	$swap = mt_rand(0,count($dummy)-1);
	$tmp = $dummy[$swap];
	$dummy[$swap] = $dummy[0];
	$dummy[0] = $tmp;
	}
	// get password
	return substr(implode('',$dummy),0,$length);
	}
	// Passwort anzeigen
	echo generatePW(10); // Die Zahl in der Klammer definiert die Laenge des Passwortes
	?>

view raw php.pw-generator.php hosted with ❤ by GitHub

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/#youtube

Eine 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/