Tutorial zur individuellen Gestaltung von WordPress-Einträgen

Wieder ziemlich viel gelernt beim Machinist-Eintrag, was WordPress und CSS betrifft. Wie üblich waren eigentlich nur die Details schwieriger. Ich glaube es war an der Zeit mal mehr auszuprobieren. Gleichzeitig habe ich jedoch auch aus dem Wechsel von Movable Type zu WordPress gelernt, wie wichtig es ist, Daten möglichst neutral zu halten, skalierbar, importierbar…

Drum mein Ansatz auch diesmal, Änderungen Ja mit einem dicken Aber hinterher. Ziel ist es, jeden noch so individuell gestalteten Eintrag, auch ohne seine eigenen Änderungen, also mit den Standard-Formaten, funktionieren zu lassen. Grundlage dafür ist, sämtliche Änderungen der Optik, fern vom WordPress-Backend zu halten. Kein Skript und kein CSS soll mit dem Inhalt vermischt werden.

Schon jetzt löse ich diese kleinen Bildchen bei neuen Einträgen mit WordPress’s Customfields/Spezielfeldern. Diese kleine versteckte Option beim Schreiben neuer Einträge. Damit ist es möglich, Einträgen zusätzliche Daten zu verpassen und diese an beliebiger Stelle abzufragen. Dafür reichen sogar meine sperlichen PHP-Kenntnisse.

Um also einem Eintrag ein individuelles Stylesheet zu verpassen, habe ich eine neue Variable generiert. Diese lautet ‚entry_css‘ und dafür existiert nun auch ein Custom-Field im Backend von WordPress:

Spezialfelder im WordPress-Backend

Jetzt gilt es, diese Variable im Template zu testen, abzufragen und entsprechend für Fall-X, den gewünschten HTML-Code einzufügen. Die Variable entry_css soll überprüft werden und im Fall eines entsprechendes Eintrags soll anschließend ein Stylesheet geladen werden. Stylesheets werden im head-Tag der Seite geschrieben, also das Header-Template rauskramen und diese wenige Zeilen einfügen:

[RAW]
<?php // teste entry-css
$entrycss = get_post_meta($post->ID, 'entry_css', $single = true); ?>
<?php if($entrycss !== '') { ?>
<link rel="stylesheet" href="<?php echo get_option('home') ?>/archiv/entry-styles/<?php echo $entrycss?>.css" type="text/css" media="all" />
<?php } else { echo ''; } ?>
[/RAW]

Der Zauber findet in Zeile 2 und 3 statt. Zeile 2 generiert eine neue Variable Namens ‚entrycss‘, dafür liest es das Custom-Field ‚entry_css‘ aus, aber auch nur, für den Fall, den WP als Single-Archive definiert. Einfach ausgedrückt, ich brauche dieses Stylesheet nur, wenn die Seite allein betrachtet wird. Diese Aufgabe übernimmt dieses kleine $single = true in der zweiten Zeile. Zeile 3 wiederrum leitet eine kleine if-Abfrag ein. Ich brauche den zusätzlichen HTML-Code nur, wenn ‚entrycss‘ einen Wert enthält. Findet die Abfrage einen Wert, wird Zeile 4 ins Template geschrieben. Falls ‚entrycss‘ leer ist, wird auch nichts Zusäzliches ins Template geschrieben (Zeile 5).

Die vorherige Lösung, sah vor, dem body-Tag jeweils eine andere ID zu geben und diese in solch ein Spezial-Feld zu schreiben. Allerdings ist man damit recht unflexibel und schreibt endlos viele Styles in das Standard-Stylesheet. Damit geht nach kurzer Zeit die Übersicht komplett flöten und man findet zu einer Klasse/ID dutzende verschiedene Formate. Keine gute Lösung und drum lieber ein separates Stylesheet. Das war schon alles an Vorarbeit, der Rest ist Gestaltung.

der eigentliche Aufwand – Gestaltung

Der Gestaltung geht immer erst die Erfassung vom Inhalt vorraus. Im Falle von The Machinist, war es schon eine Weile her, dass ich den Film gesehen habe, also DVD einlegen, Bierchen holen, Film genießen und Notizen machen. Meistens notiere ich mir ein paar wichtige Zeit-Marker im Film (um später schneller Bilder zu finden), Zitate und erste kleine Denkansätze, was man wie formulieren könnte.

Das reine Schreiben der Texte, erstreckt sich meist über mehrere Tage. Je nach Lust und Zeit. Manchmal fließen die Wörter und manchmal eben nicht. Steht der Text, habe ich einen Überblick über den Umfang. Bilder werden oft immer ganz zum Schluss gemacht, das ist so ziemlich das Unangenehmste an der ganzen Prozedur.

Lange Zeit sah die Überschrift so aus. Ebenfalls zu sehen, ein Versuch die Pullquotes wieder mit einer Serifen-Schrift zu setzen. Passte aber nicht wirklich zum Rest der Seite und wurde deshalb ersetzt.

Ist der Text erfasst und die Bilder vorbereitet, kann ich mir Gedanken, über das Layout machen. Ich bin kein Vorreiter, was Individualisierung einzelner Seiten im Web betrifft. Da waren schon viele vorher dran. Gemeinsamkeiten sind jedoch sofort erkennbar. Bei fast allen Beispielen bleibt das Grundrastergleich. Variation findet man primär bei:

Schriften

Farben

Position der Elemente auf dem Raster (wobei sekundäre Elemente nicht varrieren)

Dieses Beispiel brachte so ziemlich gute Vorrausetzungen mit. Die Optik des Films bietet sich zu sehr an. Was fehlte war ein passendes Hintergrundbild. Stock.XCHNG bietet hier eine sehr große Auswahl an Bildern, die kostenlos für solche Zecke wie meinem, genutzt werden können. Nach wenigen Minuten waren mehr tolle Bilder gefunden, als ich verwerden konnte.

So oder so ähnlich sieht mein Dokument aus, dass alle gesammelten Bilder für die Gestaltung enthält. Wenn ich hier was Interessantes finde, dann definiert sich daraus automatisch die Farbigkeit und auch die Typografie. Der Rest ist Finden und Ausfeilen von Details.

Die Bilder landen im Bildbearbeitungsprogramm, bis ich einen optischen angenehmen „Haken“ für die Seite finde. Daraus entwickeln sich ein paar kleine Skizzen auf Papier, um dann im Indesign deren Funktion zu testen. Das klappt erstaunlich gut bisher. Die Bilder lassen sich leicht rüberziehen und platzieren, während ich gleichzeitig die Schrift zum Bild testen kann. Einziger Haken ist die Darstellung oder genauer gesagt die Größe. Für Indesign sind halt alle Elemente skalierbar und so sieht entsprechend die Darstellung aus, für meinen Zweck jedoch, funktioniert es.

Farbigkeit, Details und Stolperfallen

Mit heller Schrift auf dunklem Hintergrund ist gute Lesbarkeit schwieriger zu erzielen. Trickreich ist ein angenehmer Kontrast und die richtige Schriftgröße. Im normalen Stil, hat meine Schrift eine Größe von 12 Pixeln. Bei umgekehrtem Kontrast, erschien mir die Lesbarkeit mit 12 Pixeln einen Tick zu klein. Es mag nur 1 Pixel sein, aber dieser sorgt für deutliche angenehmere Lesbarkeit. Ein weitere winzige Änderungen ist die Laufweite bei heller kursiver Schrift auf dunklem Grund. Hier habe ich im CSS einen Tick (einen halben Pixel im genau zu sein und ja das funktioniert) den Abstand zwischen den Buchstaben (letter-spacing) erhöht.

Den Trailer direkt am Anfang zu zeigen funktioniert eigentlich relativ gut und wird sicherlich in einem anderen Beispiel Anwendung finden.

Der Kopf bzw. die Überschrift hat auch knapp ein Dutzend Versionen gesehen. Irgendwie erschien mir keine wirklich passend. Wenn schon, denn schon, also mal was ganz anderes. Weg mit der Übrschrift und rein mit einem Bild. Die Schrift ist per CSS nur mikroskopisch verkleinert und trägt eben jenes Titelbild des Films, als Hintergrundgrafik.

Zweispaltigkeit war kurze Zeit ein Thema. Mit aktuellen CSS-Methoden jedoch, ist hier schlicht nichts zu gewinnen. Man schreibt den Text für’s Layout und nicht umgekehrt. „Ich habe X-Anzahl von Wörtern, für diesen Absatz.“ Lösung wäre, einen langen Absatz zu schreiben, dann allerdings scrollt man wie blöd und ohne passendes 2-Spalten-CSS, wäre die Lesbarkeit unterirdisch. 2-Spalten kommen, wenn der Text es zulässt. Der Machinist-Text war nah dran, aber eben noch nicht nah genug. Spalten bleiben ein Thema, aber hier hat es noch nicht geklappt.

4 Absätze gefloated. Leider funktioniert ein CSS-Fluss nicht so wie unser gewohnter Lesefluss. Um einen solchen zu erziele brauch es entweder zusätzliches Markup oder perfekt aufeinander bemaßte Absatzlängen. Für besser funktionierende Text-Spalten, muss man wohl auf CSS3 warten.

Das Bild zur Überschrift war eine späte Idee, die schließlich auch jetzt zu sehen ist. Das Bild in diesem Beispiel war farblich perfekt. Hier auch zu sehen, nochmal die zwei Spalten im Text. So wäre es geblieben, wenn nur diese Spalten einfacher und sinnvoller zu beherrschen wären.

Pullquotes, sIFR und die Folgen

sIFR steht für salable Inman Flash Replacement und ist sicherlich die bisher effektivste Lösung, jeden beliebigen Font auch auf einer Website darzustellen, unabhängig davon, ob dieser auf dem Rechner des Nutzers ist. Man erstellt ein Flash-Filmchen der die Schrift enthält. Ein Javaskript schaut dann, welches HTML-Element für sIFR bestimmt ist, versteckt dieses mit CSS und ersetzt es mit dem Flash-Film, der den Text des HTML-Tage bekommt.

Pullquotes mit sFIR, leider mit zu vielen Einschränkungen.

sFIR funktioniert eigentlich auch wirklich gut. Mir machte es kleine Sorgen, weil ich 1) sFIR nur auf dieser Seite nutzen möchte und 2) der Aufruf des Javaskripts nicht im Template oder im Inhalt der Seite stehen soll. Somit rufe ich sFIR und alles was dafür nötig ist, auch über solch ein Spezialfeld auf. Dafür gibt es eine neue Variable, die den Namen des Javaskripts trägt. Findet das Template diesen Wert, lädt es alles, was sIFR so braucht. Für den Fall, wieder auf ein Standard-Design wechseln zu wollen, nehme ich den Aufruf der zusätzlichen Variablen raus und weder zusätzliches Stylesheet noch sIFR-Daten werden geladen.

sIFR nutze ich im ersten Beispiel nur für die Zwischenüberschriften (H3). Eigentlich sollten auch die Pullquotes mit dieser Schrift ersetzt werden, aber leider erlaubt mir CSS hier noch mehr Optionen als sFIR. Was im HTML mit einem em-Tag makiert und mit CSS leicht anders gefäbrt ist, als der Rest dieses Elements, lässt sich so nicht bzw. nur sehr schwer mit sIFR realisieren. An dieser Stelle hab ich deshalb auf die Flash-Lösung verzichtet und der HTML-Variante dem Vorzug gegeben. Premiere hat dabei der Lucida-Font auf dieser Seite. Lucida ist immer noch ein Tabu, denn noch immer statten viele Seiten, damit in winzigen Größen ihre Mengentexte aus und schauen sich das Ganze wohl nicht mal auf einem PC an. Lucida ist in kleinen Größen der Erzfeind von Windows ClearType-Technologie.

Die Pullquotes an sich haben bestimmt ein knappes Dutzend verschiedene Gestaltungen gesehen. Einige davon finden sicherlich den Weg in kommende Einträge. Auch wenn sFIR an dieser Stelle irgendwie versagt, finde ich es sehr einfach in der Anwendung und ideal auch für meine Seite hier.

das Wichtigste zum Schluss

Auch wenn alles irgendwie länger gedauert hat, es war die Mühe wert. Ich hatte durchaus Spaß am Schreiben und Gestalten. Auch deshalb wird dies nicht der letzte Eintrag seiner Art sein. Ein neuer ist schon fertig geschrieben (deutlich kürzer im Umfang) und wartet drauf jetzt den richtigen gestalterischen Haken verpasst zu bekommen. Hab diesmal noch nicht das Richtige gefunden.

Im ersten Versuch ist schon alles drin was ich drin haben wollte: großformatige Bilder, transparente PNGs, Flash-Fonts mehr Details bei den Pullquotes. Auch ist alles schön separat geblieben. Wenn ich mal wieder die Seite grundlegend ändern möchte, muss ich nich manuell im Inhalt stehende Klassen, IDs oder Skripte entfernen. Es ist auch gelungen, die Seite weiterhin validiert zu sehen

Ich glaube auch, dass sich der zusätzliche Aufwand lohnt. Sofern man hier einmal einen richtigen Workflow gefunden hat, hält einem nur die eigentliche Idee auf, aber das ist überall der Fall, nicht nur in diesem Medium. Anzumerken sei vielleicht noch, dass solch eine Gestaltung weder den reinen Gestalter, noch den reinen Programmierer verlangt, sondern irgendeine gute Mischung aus beidem. Man muss wissen, was im Rahmen von HTML/CSS/Flash möglich ist und was nicht und dies ganz gezielt beim praktischen Gestalten beachten. Auch im Web wachsen die gestalterischen Bäume nicht in den Himmel, höher als in anderen Medien aber durchaus. Textlich gibt es Einschränkung, die man halt so gut wie möglich ausgleichen muss. Es wäre wünschenswert wenn auch abseits der privaten Blogs, mehr Abwechslung dieser Art zu finden wäre.