Demo zum Meetup vom 21.04.2015

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

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

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

geordneter Listenpukt
geordneter Listenpukt
- ungeordnet
- ungeordnet
  1. geordneter Listenpunkt
  2. geordneter Listenpunkt
geordneter Listenpunkt
geordneter Listenpunkt

Geordnet – ungeordnet – ungeordnet

geordneter Listenpunkt
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
geordneter Listenpunkt
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 H₂O, which should push the “2” down.

Superscript Tag

Still sticking with science and Isaac Newton’s E = MC², 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.

Da Editor!