Seit heute ist SemPress ein offizielles WordPress.com Theme ­čÖé

SemPress auf WordPress.com

Eigentlich wollte ich ja nur ein wenig „rumprobieren“ und das Toolbox-Theme an die neuen WordPress Funktionalit├Ąten anpassen aber mittlerweile haben schon knapp 8000 Leute SemPress heruntergeladen, ich habe ├ťbersetzungen f├╝r Russisch und Deutsch bekommen und mein Theme ist auf WordPress.com… GROSSARTIG ­čÖé

Also:

Meet SemPress, an extremely lightweight, responsive theme designed to show off your posts, quotes, and images. SemPress supports multiple post formats, widgets, and the option to upload a custom header image.

So kann es weiter gehen ­čÖé

Viel Spa├č beim ausprobieren und falls ihr Verbesserungsvorschl├Ąge habt… immer her damit!

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

HTML5 LogoSemPress 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!

Chris Pirillo hat am letzten Wochenende sein neues WordPress Theme WicketPixie vorgestellt. Das spannende an dem Theme ist der integrierte Action/Lifestream, der sehr an den Stream von Jeremy Keith erinnert, das flexible Design und das umfangreiche Admin-Men├╝ (mehr dazu im Screencast weiter unten im Post).
Das Theme macht auch grafisch einen recht schicken Eindruck und soll demn├Ąchst unter der CC BY-SA 3.0 Lizenz ver├Âffentlicht werden.

Continue reading

Da ich gerade gesch├Ąftlich etwas im Stress bin und die letzten Tage nicht vor 20 Uhr nach Hause gekommen bin, wird es die n├Ąchsten Tage nur kleinere Posts geben. Ich hoffe das pendelt sich n├Ąchste Woche wieder einigermassen ein…

Zum Thema… Vorgestern hat Matt Mullenweg (der Gr├╝nder von Automattic) ein neues Theme mit Namen „Prologue“ vorgestellt. Das Besondere an Prologue ist sein simpler Aufbau und die ├ähnlichkeit zu Twitter.

WordPress Prologue

Die Idee f├╝r das Theme kam folgendermassen:

[…] like a way for each of us to share short messages about what weÔÇÖre doing or working on internally, or private messages between groups of folks.

…und genau das ist leider auch das Manko an Prologue. Das Theme ist so aufgebaut, dass von jedem Autor nur der neuste Post angezeigt wird, d.h. es wird nur ein Post angezeigt wenn man es alleine verwendet ­čÖü . Eigentlich schade, weil ich Twitter sehr mag und das schlichte Design von Prologue sehr schick finde. Aber vielleicht habe ich ja doch Gl├╝ck und jemand nimmt sich das Theme nochmal vor:

This isnÔÇÖt something weÔÇÖre personally interested in, but weÔÇÖve made the theme available as open source under the GPL so if you want to hack around it yourself youÔÇÖre welcome to.

Wo wir gerade bei WordPress und Twitter sind… Twitter Tools ist ein umfassendes Twitter Plugin f├╝r WordPress, um Daten in allen Variationen zwischen Twitter und WordPress auszutauschen.

Twitter WordPress Plugin

Ein Muss f├╝r jeden Twitter-Fan ­čÖé

The CSS Code has changed with Version 1, so try this new code.

The new version of the K2 WordPress Theme supports a three column layout (you can change it in the K2 Options). I prefer both sidebars on one side (like the 3 column K2 Theme) but K2 only supports sidebar-content sidebar.

Original K2
Original Version

Both sidebars on one side
New Version

To change this default order to content-sidbar-sidebar, you can download my small custom theme hack.

hack.css

put this file into the „styles“ folder and activate it through the K2-Options panel

Or you can change it by hand:

open styles.css and search

.sidebar-dual #primary {
	margin-left: 170px;
	padding: 10px;
	}

and replace it with

.sidebar-dual #primary {
	padding: 10px;
	}

and search

#sidebar-alt {
	float: left;
	width: 150px;
	padding: 10px;
	left: -740px;
	margin-left: -170px;
	}

and replace it with

#sidebar-alt {
	float: left;
	width: 150px;
	padding: 10px;
	}

That’s All Folks…

Wer zu faul ist seine Blog-Posts im richtigen Microformat zu formatieren oder es in sein Theme zu implementieren, der bekommt hier ein paar Erleichterungen.

Plugins

hReview WordPress Plugin ist ein simples Plugin um hReviews in normalen Eintr├Ągen zu erstellen. Nach dem aktivieren erscheint in „Write Posts“ ein neuer Butten ├╝ber dem Textfeld. Also zuerst den normalen Text schreiben, dann hReview Knopf dr├╝cken Formular ausf├╝llen und ab damit. Andrew E. Scott hatte gerne R├╝ckmeldung ob alles sauber funktioniert, also macht ihm doch den gefallen.

WP Microformatted Blogroll 0.2 l├Ąsst euch Linklisten (Blogrollen), gekennzeichnet durch XOXO, hCard und XFN erstellen.

MicroID Plugin for WordPress Von MicroID hatte ich bisher noch nicht geh├Ârt, aber es ist ziemlich simpel. Es erstellt einen Hash-Wert aus der E-Mail Adresse und der eigenen URL, welchen man zur Identifizierung verwenden kann. Also im Prinzip so ├Ąhnlich wie die Gravatare. Meiner z.B. ist 9198c94d942fa09454fa84b2ce447362d70abc1a. Das Plugin, schreibt diesen Wert in die Metatags von WordPress

<meta name="microid" content="9198c94d942fa09454fa84b2ce447362d70abc1a" />

zum Kennzeichnen des Blogs oder von Autoren eines einzelnen Eintrags.

Und zu GEO-Informationen gibt es ne ganze Menge Plugins.

Themes

Folgende Themes unterst├╝tzen hAtom:

Das K2 Theme von Michael Heilemann zeigt die Autoren aller Eintr├Ąge im hCard Format an und das Datum in Form der abbr-design-pattern.

Oder f├╝r die, die ihre Microformats mit einem StyleSheet selbst formatieren wollen gibt es unter mindgarden.de ein sch├Ânes CSS Template.

Abschlie├čend noch: Die Technorati Microformats-Suche funktioniert mittlerweile einwandfrei.