Tutorial zur individuellen Gestaltung von WordPress-Einträgen

• Di, 15. Juli 2008,
• 1827 Wörter,
• 3 Kommentare,
• Tags:
• CSS,
• Schlagwort hinzufügen,
• Tutorial,
• Typografie,
• Website,
• Wordpress

Wie­der ziem­lich viel gelernt beim Machinist-Eintrag, was Word­Press und CSS betrifft. Wie üblich waren eigent­lich nur die Details schwie­ri­ger. Ich glaube es war an der Zeit mal mehr aus­zu­pro­bie­ren. Gleich­zei­tig habe ich jedoch auch aus dem Wech­sel von Movable Type zu Word­Press gelernt, wie wich­tig es ist, Daten mög­lichst neu­tral zu hal­ten, ska­lier­bar, impor­tier­bar…

Drum mein Ansatz auch dies­mal, Ände­run­gen Ja mit einem dicken Aber hin­ter­her. Ziel ist es, jeden noch so indi­vi­du­ell gestal­te­ten Ein­trag, auch ohne seine eige­nen Ände­run­gen, also mit den Standard-Formaten, funk­tio­nie­ren zu las­sen. Grund­lage dafür ist, sämt­li­che Ände­run­gen der Optik, fern vom WordPress-Backend zu hal­ten. Kein Skript und kein CSS soll mit dem Inhalt ver­mischt wer­den.

Schon jetzt löse ich diese klei­nen Bild­chen bei neuen Ein­trä­gen mit WordPress’s Customfields/Spezielfeldern. Diese kleine ver­steckte Option beim Schrei­ben neuer Ein­träge. Damit ist es mög­lich, Ein­trä­gen zusätz­li­che Daten zu ver­pas­sen und diese an belie­bi­ger Stelle abzu­fra­gen. Dafür rei­chen sogar meine sper­li­chen PHP-Kenntnisse.

Um also einem Ein­trag ein indi­vi­du­el­les Style­s­heet zu ver­pas­sen, habe ich eine neue Varia­ble gene­riert. Diese lau­tet ‘entry_css’ und dafür exis­tiert nun auch ein Custom-Field im Backend von Word­Press:

Spe­zi­al­fel­der im WordPress-Backend

Jetzt gilt es, diese Varia­ble im Tem­plate zu tes­ten, abzu­fra­gen und ent­spre­chend für Fall-X, den gewünsch­ten HTML-Code ein­zu­fü­gen. Die Varia­ble entry_css soll über­prüft wer­den und im Fall eines ent­spre­chen­des Ein­trags soll anschlie­ßend ein Style­s­heet gela­den wer­den. Style­s­heets wer­den im head-Tag der Seite geschrie­ben, also das Header-Template raus­kra­men und diese wenige Zei­len ein­fü­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 Zau­ber fin­det in Zeile 2 und 3 statt. Zeile 2 gene­riert eine neue Varia­ble Namens ‘ent­rycss’, dafür liest es das Custom-Field ‘entry_css’ aus, aber auch nur, für den Fall, den WP als Single-Archive defi­niert. Ein­fach aus­ge­drückt, ich brau­che die­ses Style­s­heet nur, wenn die Seite allein betrach­tet wird. Diese Auf­gabe über­nimmt die­ses kleine $single = true in der zwei­ten Zeile. Zeile 3 wie­der­rum lei­tet eine kleine if-Abfrag ein. Ich brau­che den zusätz­li­chen HTML-Code nur, wenn ‘ent­rycss’ einen Wert ent­hält. Fin­det die Abfrage einen Wert, wird Zeile 4 ins Tem­plate geschrie­ben. Falls ‘ent­rycss’ leer ist, wird auch nichts Zusäz­li­ches ins Tem­plate geschrie­ben (Zeile 5).

Die vor­he­rige Lösung, sah vor, dem body-Tag jeweils eine andere ID zu geben und diese in solch ein Spezial-Feld zu schrei­ben. Aller­dings ist man damit recht unfle­xi­bel und schreibt end­los viele Styles in das Standard-Stylesheet. Damit geht nach kur­zer Zeit die Über­sicht kom­plett flö­ten und man fin­det zu einer Klasse/ID dut­zende ver­schie­dene For­mate. Keine gute Lösung und drum lie­ber ein sepa­ra­tes Style­s­heet. Das war schon alles an Vor­ar­beit, der Rest ist Gestal­tung.

der eigent­li­che Auf­wand - Gestal­tung

Der Gestal­tung geht immer erst die Erfas­sung vom Inhalt vor­raus. Im Falle von The Machi­nist, war es schon eine Weile her, dass ich den Film gese­hen habe, also DVD ein­le­gen, Bier­chen holen, Film genie­ßen und Noti­zen machen. Meis­tens notiere ich mir ein paar wich­tige Zeit-Marker im Film (um spä­ter schnel­ler Bil­der zu fin­den), Zitate und erste kleine Denk­an­sätze, was man wie for­mu­lie­ren könnte.

Das reine Schrei­ben der Texte, erstreckt sich meist über meh­rere Tage. Je nach Lust und Zeit. Manch­mal flie­ßen die Wör­ter und manch­mal eben nicht. Steht der Text, habe ich einen Über­blick über den Umfang. Bil­der wer­den oft immer ganz zum Schluss gemacht, das ist so ziem­lich das Unan­ge­nehmste an der gan­zen Pro­ze­dur.

Lange Zeit sah die Über­schrift so aus. Eben­falls zu sehen, ein Ver­such die Pull­quo­tes wie­der mit einer Serifen-Schrift zu set­zen. Passte aber nicht wirk­lich zum Rest der Seite und wurde des­halb ersetzt.

Ist der Text erfasst und die Bil­der vor­be­rei­tet, kann ich mir Gedan­ken, über das Lay­out machen. Ich bin kein Vor­rei­ter, was Indi­vi­dua­li­sie­rung ein­zel­ner Sei­ten im Web betrifft. Da waren schon viele vor­her dran. Gemein­sam­kei­ten sind jedoch sofort erkenn­bar. Bei fast allen Bei­spie­len bleibt das Grund­ras­ter­gleich. Varia­tion fin­det man pri­mär bei:

• Schrif­ten
• Far­ben
• Posi­tion der Ele­mente auf dem Ras­ter (wobei sekun­däre Ele­mente nicht var­rie­ren)

Die­ses Bei­spiel brachte so ziem­lich gute Vor­rau­set­zun­gen mit. Die Optik des Films bie­tet sich zu sehr an. Was fehlte war ein pas­sen­des Hin­ter­grund­bild. Stock.XCHNG bie­tet hier eine sehr große Aus­wahl an Bil­dern, die kos­ten­los für sol­che Zecke wie mei­nem, genutzt wer­den kön­nen. Nach weni­gen Minu­ten waren mehr tolle Bil­der gefun­den, als ich ver­wer­den konnte.

So oder so ähnlich sieht mein Doku­ment aus, dass alle gesam­mel­ten Bil­der für die Gestal­tung ent­hält. Wenn ich hier was Inter­es­san­tes finde, dann defi­niert sich dar­aus auto­ma­tisch die Far­big­keit und auch die Typo­gra­fie. Der Rest ist Fin­den und Aus­fei­len von Details.

Die Bil­der lan­den im Bild­be­ar­bei­tungs­pro­gramm, bis ich einen opti­schen ange­neh­men “Haken” für die Seite finde. Dar­aus ent­wi­ckeln sich ein paar kleine Skiz­zen auf Papier, um dann im Inde­sign deren Funk­tion zu tes­ten. Das klappt erstaun­lich gut bis­her. Die Bil­der las­sen sich leicht rüber­zie­hen und plat­zie­ren, wäh­rend ich gleich­zei­tig die Schrift zum Bild tes­ten kann. Ein­zi­ger Haken ist die Dar­stel­lung oder genauer gesagt die Größe. Für Inde­sign sind halt alle Ele­mente ska­lier­bar und so sieht ent­spre­chend die Dar­stel­lung aus, für mei­nen Zweck jedoch, funk­tio­niert es.

Far­big­keit, Details und Stol­per­fal­len

Mit hel­ler Schrift auf dunk­lem Hin­ter­grund ist gute Les­bar­keit schwie­ri­ger zu erzie­len. Trick­reich ist ein ange­neh­mer Kon­trast und die rich­tige Schrift­größe. Im nor­ma­len Stil, hat meine Schrift eine Größe von 12 Pixeln. Bei umge­kehr­tem Kon­trast, erschien mir die Les­bar­keit mit 12 Pixeln einen Tick zu klein. Es mag nur 1 Pixel sein, aber die­ser sorgt für deut­li­che ange­neh­mere Les­bar­keit. Ein wei­tere win­zige Ände­run­gen ist die Lauf­weite bei hel­ler kur­si­ver Schrift auf dunk­lem Grund. Hier habe ich im CSS einen Tick (einen hal­ben Pixel im genau zu sein und ja das funk­tio­niert) den Abstand zwi­schen den Buch­sta­ben (letter-spacing) erhöht.

Den Trai­ler direkt am Anfang zu zei­gen funk­tio­niert eigent­lich rela­tiv gut und wird sicher­lich in einem ande­ren Bei­spiel Anwen­dung fin­den.

Der Kopf bzw. die Über­schrift hat auch knapp ein Dut­zend Ver­sio­nen gese­hen. Irgend­wie erschien mir keine wirk­lich pas­send. Wenn schon, denn schon, also mal was ganz ande­res. Weg mit der Übrschrift und rein mit einem Bild. Die Schrift ist per CSS nur mikro­sko­pisch ver­klei­nert und trägt eben jenes Titel­bild des Films, als Hin­ter­grund­gra­fik.

Zwei­spal­tig­keit war kurze Zeit ein Thema. Mit aktu­el­len CSS-Methoden jedoch, ist hier schlicht nichts zu gewin­nen. Man schreibt den Text für’s Lay­out und nicht umge­kehrt. “Ich habe X-Anzahl von Wör­tern, für die­sen Absatz.” Lösung wäre, einen lan­gen Absatz zu schrei­ben, dann aller­dings scrollt man wie blöd und ohne pas­sen­des 2-Spalten-CSS, wäre die Les­bar­keit unter­ir­disch. 2-Spalten kom­men, wenn der Text es zulässt. Der Machi­nist-Text war nah dran, aber eben noch nicht nah genug. Spal­ten blei­ben ein Thema, aber hier hat es noch nicht geklappt.

4 Absätze gefloa­ted. Lei­der funk­tio­niert ein CSS-Fluss nicht so wie unser gewohn­ter Lese­fluss. Um einen sol­chen zu erziele brauch es ent­we­der zusätz­li­ches Markup oder per­fekt auf­ein­an­der bemaßte Absatz­län­gen. Für bes­ser funk­tio­nie­rende Text-Spalten, muss man wohl auf CSS3 war­ten.

Das Bild zur Über­schrift war eine späte Idee, die schließ­lich auch jetzt zu sehen ist. Das Bild in die­sem Bei­spiel war farb­lich per­fekt. Hier auch zu sehen, noch­mal die zwei Spal­ten im Text. So wäre es geblie­ben, wenn nur diese Spal­ten ein­fa­cher und sinn­vol­ler zu beherr­schen wären.

Pull­quo­tes, sIFR und die Fol­gen

sIFR steht für salable Inman Flash Repla­ce­ment und ist sicher­lich die bis­her effek­tivste Lösung, jeden belie­bi­gen Font auch auf einer Web­site dar­zu­stel­len, unab­hän­gig davon, ob die­ser auf dem Rech­ner des Nut­zers ist. Man erstellt ein Flash-Filmchen der die Schrift ent­hält. Ein Javaskript schaut dann, wel­ches HTML-Element für sIFR bestimmt ist, ver­steckt die­ses mit CSS und ersetzt es mit dem Flash-Film, der den Text des HTML-Tage bekommt.

Pull­quo­tes mit sFIR, lei­der mit zu vie­len Ein­schrän­kun­gen.

sFIR funk­tio­niert eigent­lich auch wirk­lich gut. Mir machte es kleine Sor­gen, weil ich 1) sFIR nur auf die­ser Seite nut­zen möchte und 2) der Auf­ruf des Javaskripts nicht im Tem­plate oder im Inhalt der Seite ste­hen soll. Somit rufe ich sFIR und alles was dafür nötig ist, auch über solch ein Spe­zi­al­feld auf. Dafür gibt es eine neue Varia­ble, die den Namen des Javaskripts trägt. Fin­det das Tem­plate die­sen Wert, lädt es alles, was sIFR so braucht. Für den Fall, wie­der auf ein Standard-Design wech­seln zu wol­len, nehme ich den Auf­ruf der zusätz­li­chen Varia­blen raus und weder zusätz­li­ches Style­s­heet noch sIFR-Daten wer­den gela­den.

sIFR nutze ich im ers­ten Bei­spiel nur für die Zwi­schen­über­schrif­ten (H3). Eigent­lich soll­ten auch die Pull­quo­tes mit die­ser Schrift ersetzt wer­den, aber lei­der erlaubt mir CSS hier noch mehr Optio­nen als sFIR. Was im HTML mit einem em-Tag makiert und mit CSS leicht anders gefä­brt ist, als der Rest die­ses Ele­ments, lässt sich so nicht bzw. nur sehr schwer mit sIFR rea­li­sie­ren. An die­ser Stelle hab ich des­halb auf die Flash-Lösung ver­zich­tet und der HTML-Variante dem Vor­zug gege­ben. Pre­miere hat dabei der Lucida-Font auf die­ser Seite. Lucida ist immer noch ein Tabu, denn noch immer stat­ten viele Sei­ten, damit in win­zi­gen Grö­ßen ihre Men­gen­texte aus und schauen sich das Ganze wohl nicht mal auf einem PC an. Lucida ist in klei­nen Grö­ßen der Erz­feind von Win­dows ClearType-Technologie.

Die Pull­quo­tes an sich haben bestimmt ein knap­pes Dut­zend ver­schie­dene Gestal­tun­gen gese­hen. Einige davon fin­den sicher­lich den Weg in kom­mende Ein­träge. Auch wenn sFIR an die­ser Stelle irgend­wie ver­sagt, finde ich es sehr ein­fach in der Anwen­dung und ideal auch für meine Seite hier.

das Wich­tigste zum Schluss

Auch wenn alles irgend­wie län­ger gedau­ert hat, es war die Mühe wert. Ich hatte durch­aus Spaß am Schrei­ben und Gestal­ten. Auch des­halb wird dies nicht der letzte Ein­trag sei­ner Art sein. Ein neuer ist schon fer­tig geschrie­ben (deut­lich kür­zer im Umfang) und war­tet drauf jetzt den rich­ti­gen gestal­te­ri­schen Haken ver­passt zu bekom­men. Hab dies­mal noch nicht das Rich­tige gefun­den.

Im ers­ten Ver­such ist schon alles drin was ich drin haben wollte: groß­for­ma­tige Bil­der, trans­pa­rente PNGs, Flash-Fonts mehr Details bei den Pull­quo­tes. Auch ist alles schön sepa­rat geblie­ben. Wenn ich mal wie­der die Seite grund­le­gend ändern möchte, muss ich nich manu­ell im Inhalt ste­hende Klas­sen, IDs oder Skripte ent­fer­nen. Es ist auch gelun­gen, die Seite wei­ter­hin vali­diert zu sehen

Ich glaube auch, dass sich der zusätz­li­che Auf­wand lohnt. Sofern man hier ein­mal einen rich­ti­gen Work­flow gefun­den hat, hält einem nur die eigent­li­che Idee auf, aber das ist über­all der Fall, nicht nur in die­sem Medium. Anzu­mer­ken sei viel­leicht noch, dass solch eine Gestal­tung weder den rei­nen Gestal­ter, noch den rei­nen Pro­gram­mie­rer ver­langt, son­dern irgend­eine gute Mischung aus bei­dem. Man muss wis­sen, was im Rah­men von HTML/CSS/Flash mög­lich ist und was nicht und dies ganz gezielt beim prak­ti­schen Gestal­ten beach­ten. Auch im Web wach­sen die gestal­te­ri­schen Bäume nicht in den Him­mel, höher als in ande­ren Medien aber durch­aus. Text­lich gibt es Ein­schrän­kung, die man halt so gut wie mög­lich aus­glei­chen muss. Es wäre wün­schens­wert wenn auch abseits der pri­va­ten Blogs, mehr Abwechs­lung die­ser Art zu fin­den wäre.

Zum gleichen Thema

• Sieben - was bisher geschahWeb Design

• VertwittertFundstücke

• Tutorial - Wicked WornPhotoshop

• tricky sticky FooterCSS

• Mikroformat hreviewFundstücke

• ein typischer MontagseintragFundstücke

• CSS Reboot oh-sixFundstücke