Matthias Pfefferle

2012-09-06 20:54:53

# I’ve made a WordPress Theme… kind of…

Eigentlich wollte ich ja nur einen Toolbox Fork erstellen und das Theme um Microdata/Schema.org erweitern und dann hat es doch so viel Spaß gemacht, dass ein eigenes Theme daraus wurde… Ich präsentiere euch SemPress, das hoch semantische HTML5 Theme mit ner Prise Responsiveness und SEO 🙂

Das Theme verschönert übrigens das notizBlog und ist aus folgenden Gründen großartig:

POSH – Plain Old Semantic HTML5

SemPress basiert, wie schon erwähnt, auf Toolbox und die HTML5 Struktur wurde auch weitestgehend beibehalten. Ich habe lediglich einige Tags in (meiner Meinung nach) semantisch passendere getauscht. Im Detail:

• Semantische Tags – Ich habe einfach mal geschaut welche Tags Toolbox noch nicht unterstützt und sie dann, hoffentlich richtig eingebaut 😀.
• HTML5 Input-Types – SemPress unterstützt einige der neuen Input-Types wie z.B. „search“, „email“ und „url“. Mehr dazu in einem älteren Artikel.

Websemantics

Eigentlich hab ich das ganze Projekt (wie schon erwähnt) ja nur gestartet, damit ich mal wieder was produktives mit Microformats machen und Schema.org lernen kann. Hier also der Semantic Overload:

• Microformats – Toolbox selbst unterstütz Microformats ja schon von Haus aus und ich musste nur kleine hAtom fixes und die richtigen Profile Header setzen.
• Microformats v2 – Ich bin zwar kein großer Fan von Microformats 2, aber ich wollte testen wie leicht sich das Theme um neues HTML-Classes erweitern lässt und wie viel Arbeit es bedeutet. SemPress unterstützt hCard 2 und hAtom 2.
• Microdata/Schema.org – Ähnlich wie bei Microformats v2 wollte ich testen wie schwer es ist, Schema.org einzubauen. Das Theme unterstützt http://schema.org/Blog, http://schema.org/BlogPosting and http://schema.org/Person.

Was ich noch gerne einbauen will ist hMedia für alle möglichen Medieninhalte wie z.B. auch WordPress „Images“ und „Galleries“ und natürlich auch das Schema.org Pendant.

WordPress Features

Neben dem ganzen semantik Gedöns, hab ich natürlich auch ne Menge WordPress-Features eingebaut.

• Post Thumbnails – SemPress unterstützt diverse Post-Thumbnail Größen (maximal 600px) und versucht sie bestmöglich darzustellen. Alle Bilder kleiner als 480px werden z.B. mit float right in den Text integriert.
• Post Types – Im Gegensatz zu Toolbox unterstützt SemPress folgende Post-Types: „aside, status, gallery, video, audio, link, image“ und fast alle haben auch ein individuelles Layout spendiert bekommen.
• …außerdem: Localization, Sidebar-Widgets und die WordPress‘ Navigation Menu.

Mal schauen ob ich noch ein Custom-Header-Image mit rein nehmen werde…

CSS und Design

Zuerst sollte SemPress gar kein Design bekommen, aber man muss ja auch bei CSS und Fonts auf dem Laufenden bleiben! Ich mach das ja schließlich nicht zum Spaß sondern zur Fortbildung 😀. Da ich aber kein wirklich großer Designer bin, hab ich mir ne Menge Ideen und CSS bei folgenden großartigen Projekten ausgeliehen:

• Das Basis-CSS hab‘ ich von Toolbox übernommen.
• Die Tabellen, Buttons, Input-Felder, Code-Boxen habe ich mir bei Twitters Bootstrap gemopst.
• Die Icons, die vor einigen Artikeln erscheinen (z.B. die vom Typ Video oder Audio) sind von von Font Awesome.
• Danke auch an HTML5 Boilerplate für einige Ideen!

Ein paar weitere Kleinigkeiten (auf die ich auch bissle Stolz bin):

• Man kann den bei dem <code />-Tag die Programmiersprache mir data-programming-language="PHP" setzen und es wird wie folgend angezeigt: <?php echo "Hallo Welt"; ?>
• Das Theme kommt komplett ohne Bilder aus.

Responsive Design

Das Theme sollte eigentlich und hoffentlich auf jedem Gerät gut aussehen und unterstützt drei++ Breiten:

• Volle Breite + Sidebar rechts
• Volle Breite + Zweispaltige Sidebar am Ende der Seite
• Variable Breite (die, für das Gerät beste Breite mit einem) + Einspaltige Sidebar am Ende der Seite.

Außerdem passt sich das Menü automatisch an die Größen an und das ganz ohne JavaScript! …beim Drop-Down Menü gibt es zwar noch keine Möglichkeit das Menü wieder zu schließen, aber wer will das schon 😉

Was jetzt noch?

Da mir das themen ne Menge Spaß gemacht hat werde ich wohl auch weiterhin fleißig an SemPress weiter basteln und es noch semantischer und WordPressiger machen. Falls ihr irgendwelche Fehler findet oder Dinge besser könnt wie ich… bitte helft mir und forkt SemPress!

https://notiz.blog/b/1EK

#HTML5 #Microformats #SchemaOrg #SemPress #theme #websemantics #WordPress

GitHub - pfefferle/SemPress: A highly semantic WordPress Theme with HTML5 templates, responsive and seo optimized. SemPress supports most of the new HTML5 tags, the new HTML5 input-types, microformats, microformats v2 and microdata (Schema.org).

A highly semantic WordPress Theme with HTML5 templates, responsive and seo optimized. SemPress supports most of the new HTML5 tags, the new HTML5 input-types, microformats, microformats v2 and micr...

^GitHub