WordPress Quicktags im Editor

Was bedeuten die ganzen Buttons im Editor?
Was ist b, i, ul, ol, li etc.
Kurze Beschreibung der Quicktags:

• b = Fettschrift (englisch = bold)
  Code:
  Lorem ipsum <strong>dolor sit</strong> amet, consetetur sadipscing
  Ergebnis:
  Lorem ipsum dolor sit amet, consetetur sadipscing
• i = Kursiv (englisch = italic)
  Code:
  Lorem ipsum <em>dolor sit</em> amet, consetetur sadipscing
  Ergebnis:
  Lorem ipsum dolor sit amet, consetetur sadipscing
• link = Link einfügen
  Die Angabe setzt sich zusammen aus der URL (Linkziel) und einem Linktext.
  Code:
  Lorem ipsum <a href="https://blog.funkygog.de/" title="zum funkygog Blog">dolor sit</a> amet, consetetur sadipscing
  Ergebnis:
  Lorem ipsum dolor sit amet, consetetur sadipscing
• del = Text durchstreichen (englisch= delete)
  Hierbei wird Text durchgestrichen und im Code mit einem Datum versehen.
  Code:
  Lorem ipsum <del datetime="2013-11-17T20:59:31+00:00">dolor sit</del> amet, consetetur sadipscing
  Ergebnis:
  Lorem ipsum dolor sit amet, consetetur sadipscing
• ins = eingefügten Text markieren (englisch= insert)
  Hierdurch kann hinzugfügter Text im Code mit einem Datum versehen werden.
  Code:
  Lorem ipsum <ins datetime="2013-11-17T21:03:12+00:00">dolor sit</ins> amet, consetetur sadipscing
  Ergebnis:
  Lorem ipsum dolor sit amet, consetetur sadipscing
• img = Bild (image) per URL einfügen.
  Code:
  <img src="http://bauen.funkygog.de/data/2009/06/Gebietskarte-Hamburg-Bezirke-Nr-300×282.jpg" alt="Hamburger Bezirke" />
  Ergebnis:
  
  Um eigene Bilder einzufügen, Button „Dateien hinzufügen“ verwenden.
  
• ul = unsortierte Liste erstellen (englisch= unordered list)
  Start einer Aufzählungsliste. Die einzelnen Listenpunkte werden durch li eingegeben.
  Code:
  <ul>
  <li>Lorem ipsum dolor sit amet, consetetur sadipscing</li>
  <li>sed diam nonumy eirmod tempor invidunt ut labore</li>
  </ul>
  Ergebnis:
  • Lorem ipsum dolor sit amet, consetetur sadipscing
  • sed diam nonumy eirmod tempor invidunt ut labore
• ol = nummerierte Liste erstellen (englisch= ordered list)
  Start einer nummerierten Liste. Die einzelnen Listenpunkte werden durch li eingegeben.
  Code:
  <ol>
  <li>Lorem ipsum dolor sit amet, consetetur sadipscing</li>
  <li>sed diam nonumy eirmod tempor invidunt ut labore</li>
  </ol>
  Ergebnis:
  1. Lorem ipsum dolor sit amet, consetetur sadipscing
  2. sed diam nonumy eirmod tempor invidunt ut labore
• li = Listeneintrag (englisch= list item)
  Egal ob ul oder ol der eigentliche Inhalt, der Listenpunkt wird durch li angegeben. (siehe obige Beispiele)
• code = Code anzeigen aber nicht ausführen
  Code:
  <code>Lorem ipsum dolor sit amet, consetetur sadipscing</code>
  Ergebnis:
  Lorem ipsum dolor sit amet, consetetur sadipscing
• more = Markierung für den „mehr anzeigen“ Bereich
  Bei längeren Texten kann durch den „more-Tag“ gesplittet werden. In den Übersichten erscheint somit nur der Text oberhalb des more. In der Einzelansicht erscheint aber immer der gesamte Text.
  Code:
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <!–more–>
  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.
• Tags schließen
  Hierdurch sollen die geöffneten Tags (zum Beispiel ein geöffneter kursiv Befehl wieder geschlossen werden.)
  Besser direkt den betreffenden Tag öffnen und wieder schliessen.
  z. B. Kursiv: i klicken (öffnen) – Text schreiben – /i klicken (schliessen)
  oder alternativ den Text erst schreiben und anschließend mit der Maus markieren und auf i klicken.
• Vollbild
  Hierdurch wird der Editor (der Eingabebereich) auf die volle Größe erweitert. Die Quicktag Anzeige ist dann allerdings nicht sichtbar.
  Gut geeignet um zunächst einfach einen Text zu schreiben und sich anschließend um die Formatierung (Optik) zu kümmern.

Die Standard WordPress Quicktags lassen sich aber mit Hilfe von Erweiterungen um weitere nützliche Buttons ergänzen.

Hier einige Beispiele:

• Umlaut und ß = Umlaute und Sonderzeichen richtig anzeigen
  Im Regelfall werden Umlaute im Text richtig dargestellt. Für den Titel verwende ich sicherheitshalber die ASCII-Zeichen.
  Für Umlaute: &_uml; den Unterstrich ersetzen durch a, o, u (klein- oder großgeschrieben)
• h3 = Überschriften im Text
  Bei längeren Texten lässt sich hierdurch eine Unter-Überschrift einfügen.
  Überschriften werden von groß h1 nach klein h6 gestaffelt. h3 ist somit ein Mittelwert. (Der eigentliche Titel des Beitrags hat eine h1 Überschrift)
  Code:
  <h3>Lorem ipsum dolor sit amet, consetetur sadipscing</h3>
  Ergebnis:

  Lorem ipsum dolor sit amet, consetetur sadipscing

• hr = Horizontale Line
  Code:
  Lorem ipsum dolor sit amet, consetetur sadipscing
  <hr>
  Ergebnis:
  Lorem ipsum dolor sit amet, consetetur sadipscing

  ---

• p = Absatz (englisch= paragraph)
  Code:
  <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.</p>
  Ergebnis:

  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

• small = Text kleiner darstellen
  Code:
  Lorem ipsum <small>dolor sit</small> amet, consetetur sadipscing
  Ergebnis:
  Lorem ipsum dolor sit amet, consetetur sadipscing
• xx = Text einfach durchstreichen (strike)
  Ähnlich wie „del“ aber ohne Datumsangabe im Code.
  Code:
  Lorem ipsum <strike>dolor sit</strike> amet, consetetur sadipscing
  Ergebnis:
  Lorem ipsum dolor sit amet, consetetur sadipscing
• left right clear = zur Ausrichtung von Bereichen
  Um bestimmte Bereiche links und rechts anzuordnen. Die Angabe „clear“ bereinigt die vorherigen links und rechts Angaben.
  Hierzu sind Styling Angaben im verwendeten Theme erforderlich.