Frontend Editor

Da Editor!

Demo zum Meetup vom 21.04.2015

Hier geht’s um den Editor in WordPress. Der sieht vor WordPress 4.2 so aus:

Visueller Editor in WordPress 4.1.2

… oder so, mit ausgeklappter Küchenspüle:

WordPress Editor mit zweiter Button-Reihe

Damit wir ein bisschen herum experimentieren können, folgt hier ein rudimentärer Styleguide für semantische Textelemente. Die Daten stammen von hier, bzw. hier. Sie sind obligatorischer Bestandteil jedes ordentlichen Theme-Demos, damit man sehen kann, wie das Theme mit den verschiedenen Textformaten umgeht, die einem so auf einer Webseite begegnen können.


 

1. Überschriften

Überschrift erster Ordnung

Überschrift zweiter Ordnung

Überschrift dritter Ordnung

Überschrift vierter Ordnung

Überschrift fünfter Ordnung
Überschrift sechster Ordnung

2. Blockzitate

Einzeiliges Blockzitat:

Stay hungry. Stay foolish.

Mehrzeiliges Blockzitat:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs – Apple Worldwide Developers’ Conference, 1997

3. Tabellen

(Das Beispiel bezieht sich scherzhaft auf gewisse Mitarbeiter einer gewissen Firma und hat weiter keinen inhaltlichen Wert. 😉 )

Mitarbeiter Gehalt  
Olaf Schmitz €1 Weil Steve Jobs auch nicht mehr bekommen hat.
Caspar Hübinger €100Tsd Für die Beiträge, die er hier schreibt.
Nick Jantschke €100Mio Ein Bild sagt mehr als 1000 Worte, oder? Also Caspar x1000
Thomas Scholz €100Mrd Weil er Caspar und Nick zusammen ertragen muss.

4. Definitionslisten

Definitionsliste-Titel
Definitionslisten-Definition.
Startup
Ein Ofen, in dem ununterbrochen Geld verbrannt wird. Hat nichts mit diesem Theme zu tun.
#dowork
Erfunden von Rob Dyrdek und seinem Bodyguard Christopher „Big Black“ Boykins. „Do Work“ ist ein Selbstmotivator.
Do It Live
Bill O’Reilly erklärt das.

5. Verschachtelte und gemischte Listen

Verschachtelte und gemischte Listen sind richtige Biester. Es ist wichtig, dass…

  • …Listen innerhalb von Listen die Nummerierung korrekt fortsetzen;
  • …die Listenstile des Theme tief genug greifen, um Verschachtelungen zu erfassen.

Sehen wir uns das mal näher an!

Geordnet – ungeordnet – geordnet

  1. geordneter Listenpukt
  2. geordneter Listenpukt
    • ungeordnet
    • ungeordnet
      1. geordneter Listenpunkt
      2. geordneter Listenpunkt
  3. geordneter Listenpunkt
  4. geordneter Listenpunkt

Geordnet – ungeordnet – ungeordnet

  1. geordneter Listenpunkt
  2. geordneter Listenpunkt (with some more text to see how it goes with line-breaks which can be a fundamental pain in the ass in nested lists, as we all know, but do not dare to say aloud)
    • ungeordnet
    • ungeordnet
      • ungeordneter Listenpunkt
      • ungeordneter Listenpunkt
  3. geordneter Listenpunkt
  4. geordneter Listenpunkt

Ungeordnet – geordnet – ungeordnet

  • ungeordneter Listenpunkt
  • ungeordneter Listenpunkt
    1. geordnet
    2. geordnet
      • ungeordneter Listenpunkt
      • ungeordneter Listenpunkt
  • ungeordneter Listenpunkt
  • ungeordneter Listenpunkt

Ungeordnet – ungeordnet – geordnet

  • ungeordneter Listenpunkt
  • ungeordneter Listenpunkt
    • ungeordnet
    • ungeordnet
      1. geordneter Listenpunkt
      2. geordneter Listenpunkt
  • ungeordneter Listenpunkt
  • ungeordneter Listenpunkt

6. HTML-Elemente

Wir machen hier mal in englisch weiter, der Einfachheit halber.

Address

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor (aka. Link)

This is a Link.

Abbreviation

The abbreviation srsly stands for “seriously”.

Acronym

The acronym ftw stands for “for the win”.

Big

These tests are a big deal, but this tag is no longer supported in HTML5.

Cite

“Code is poetry.” –Automattic

Code

You will learn later on in these tests that word-wrap: break-word; will be your best friend.

Delete Tag

This tag will let you strikeout text, but this tag is no longer supported in HTML5 (use the <strike> instead).

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote inserted text.

Keyboard Tag

This scarsly known tag emulates keyboard text, which is usually styled like the <code> tag.

Preformatted Tag

This tag styles large blocks of code.

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
}

Quote Tag

Developers, developers, developers… –Steve Ballmer

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H2O, which should push the “2” down.

Superscript Tag

Still sticking with science and Isaac Newton’s E = MC2, which should lift the 2 up.

Teletype Tag

This rarely used tag emulates teletype text, which is usually styled like the <code> tag.

Variable Tag

This allows you to denote variables.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.