25.04.2009 | Weblog von Heide Liebmann mit Wordpress und Arthemia

• Fertigstellung : 2009
• Leistungen : Code, Designanpassung
• CMS : Wordpress
• Besonderheiten : Widgets
• Webseite besuchen: heide-liebmann.de/blog

Professionell Bloggen

In den letzten Wochen habe ich mit zwei fertigen Wordpress Themes gearbeitet: Auf jukeblog.de ist nun Mimbo installiert und Heide Liebmann hatte sich für das neue Outfit ihrer Webseite das Arthemia-Theme ausgesucht.

Beide themes sind im magazin-style gehalten, Arthemia (Michael Hutagalung) etwas mehr, Mimbo (Darren Hoyt) etwas weniger. Meine Erfahrungen hinsichtlich der Anpassung des Designs an die Farben und Inhalte sind, mit kleinen Abstrichen, durchweg positiv. Arthemia und Mimbo lassen sich, mit ein bisschen Erfahrung, recht gut handeln.

Der große Nachteil von magazin-themes steckt zugleich in dem, was diese Art von Designs auszeichnet und attraktiv macht: die Bilder. Einerseits kann man mit Bildern wirkungsvoll ganze Bilderwelten schaffen und den Inhalt und das Image untermalen, andererseits wird die Arbeit für den Autor eines Blogs immer aufwändiger, wenn für jeden Beitrag ein Bild gesucht und in Form gebracht werden muss. Sehr erfreulich ist daher, dass die Macher beider themes schon für Erleichterung gesorgt haben, denn beide themes haben inside das – ebeanfalls von Darren Hoyt entwickelte – „timthumb“ Skript eingebaut. Timthumb skaliert die einem Artikel hinzugefügten Bilder automatisch auf die im theme erforderliche Größe. In Arthemia werden die Bilder über die benutzerdefinierten Felder (custom fields) hinzugefügt, Mimbo geht noch einen bequemeren Schritt weiter: Jedes Bild, welches in einem Artikel über die Medienbibliothek eingefügt wird, erscheint automatisch auch als Thumbnail. Das allerdings kann man in Arthemia in der kommerziellen Version auch haben.

Als weiteres Feature ist die Verwendung von Widgets zu nennen. Ich selber arbeite zwar lieber mit der handcodierten sidebar, sehe aber ein, dass Widgets für Laien einfacher in der Handhabung sind, wenn auch mit etwas Bauchweh. Über die Textwidgets lassen sich viele codes in der Sidebar unterbringen wie z.B. ein Hinweis auf Amazon oder dies und das mit Links von anderen Webseiten. Leider sind die Codeschnippsel, die man so einfach per copy&paste einfügen kann, oft nicht valide und Grund für massenweise Validierungsfehler. Nicht so schlimm, aber schön ist es auch nicht.

Aufgrund der Inhalte im Blog, waren jedoch einige Widgets in ihrer Originalfassung nicht zu gebrauchen und ich musste erst nach verbesserten Möglichkeiten suchen.

Das Extended category Plugin

Magazine themes zeichnen sich dadurch aus, dass bestimmte, besonders wichtige Artikel hervorgehoben werden können. In Arthemia und auch in Mimbo gibt es einen Leitartikel und mehrere kleine besonders auszeichnete Artikel in der sidebar. Hierzu werden zwei Kategorien anlegt: headline und featured. Beim Schreiben entscheidet der Autor, ob er den neuen Artikel einer dieser beiden Kategorien zuordnet. Wenn ja, wird dieser Artikel entweder als neuer Leitartikel (oben) oder als featured article in der sidebar angezeigt. Die Krux bei der Sache ist nur die, dass das Widget zum Anzeigen der Kategorien immer alle Kategorien ausgibt, also auch die Kategorien „headline“ und „featured“. Bei einer händisch codierten sidebar kann recht einfach exclude eingesetzt werden um bestimmte Kategorien von der Anzeige auszuschließen, bei der Verwendung von Widgets muss man tiefer in die Trickkiste greifen.

Zwar ist es grundsätzlich möglich in der widgets.php eine entsprechende Änderung vorzunehmen, die ist aber dann nach dem nächsten update wieder überschrieben. An Wordpress immer wieder schön: man hat das Problem meist nie allein und findet zu fast allem eine Lösung. Und die Lösung hieß in diesem Fall „extended categories widget“. Die von Peter van der Does entwickelte Erweiterung erlaubt, neben einer ganzen Reihe von optionalen Einstellmöglichkeiten, das Ausschließen von Kategorien. Darüberhinaus kann man mit dem Widget mehrere Instanzen (Klone, Ableger) erzeugen und somit in der sidebar auch die Kategorien thematisch sortieren. Extended category widget http://wordpress.org/extend/plugins/extended-categories-widget/ Peter van der Does http://blog.avirtualhome.com/ (link geht leider derzeit nicht)

Das Blogrollen Problem

Die Blogrolle in Wordpress ist im Grunde nichts weiter als eine Linkkategorie. Benutzt man zur Anzeige der Blogrolle das in Wordpress vorhandene Widget, kann man keine Überschrift eintragen und ausgerechnet das kommt beim Arthemia theme nicht so gut. Statt der Überschrift erscheint dann nur ein kleiner schwarzer Balken. Auch hier könnte man Abhilfe über die widgets.php schaffen, aber das ist nicht im Sinne des Erfinders und auch zur besseren Pflege und Wartung des Blogs zu vermeiden. Eine geeignete sowie geniale Lösung fand ich bei http://www.whoisdeep.com/2009/02/04/display-multiple-link-widgets-using-wordpress-shortcodes/ Jedes theme, welches widgets benutzt, hat im themes Ordner eine Date functions.php. Diese wird lediglich um ein paar Eintragungen erweitert. Anschließend kann man ein Text-Widget benutzen die Blogrolle und bei Bedarf auch noch weitere Linkkategorien anzeigen zu lassen.

Das p-Tag Problem

Bei einem weiteren Problemchen kam mir wieder einmal das Wordpress-Forum zur Hilfe. In Arthemia wird die description der Kategorien seit Wordpress 2.7. mit umgebenden <p> Tags ausgegeben. p kann man aber nicht immer gebrauchen z.B. dann nicht, wenn der Inhalt von description als anklickbarer Linktext erscheinen soll. Lösung: in der Datei wp-content => themes => arthemia => functions.php folgenden Code einfügen:
remove_filter('term_description', 'wpautop');

Fehlerkorrekturen in Arthemia

Im theme stecken noch ein paar (harmlose) Validierungsfehler. Die meisten & sind nicht maskiert und sollten mit &amp; ersetzt werden – wenn man Wert auf den beliebten grünen Balken legt. Und irgendwo fehlten auch noch ein paar Gänsefüsschen.

Arthemia und der IE6

Nicht ganz so harmlos hingegen war jedoch, dass das theme für den Wechsel der Hintergrundfarbe der Kategorien in der Mitte <code>category:hover</code> benutzt. Das wäre soweit ok, wenn da nicht der IE6 wäre, der damit nichts anfangen kann. Hier hovert die Hintergrundfarbe nicht und weil die Textfarbe zu weiß wechselt, ist im IE6 gar nichts mehr zu lesen. Da es jedoch bei vielen Webseiten immer noch eine nicht zu vernachlässigende Menge an Webseitenbesuchern gibt, die mit diesem Browser das Netz besurfen (verstehe das wer kann) kann man das – zumindest in hiesigen Breiten – wohl oder übel nicht unter den Tisch fallen lassen. Im einfachsten Fall sollte man schlicht und ergreifend in der .css Datei für die Schriftfarbe für category:hover über conditionel comments oder Starhack etwas anderes als weiß wählen. Die zweite Lösung ist etwas aufwändiger, dafür jedoch hovert es dann auch im IE6. Ich habe die Anzeige der Kategorien in eine Liste gepackt und das Hovern der Hintergrundfarbe über das Linktag geregelt.
arthemia-featured-categories-hover
css-catgory-hover-arthemia

Mein Fazit: Die Arbeit mit Arthemia hat mir Spaß gemacht, mehr als ich gedacht habe. Templates von diesem Kaliber sind gegenüber der Erstellung von ganz individuellen Designs eine kostengünstigere Alternative, auch dann wenn man die kommerzielle Version zu 70$ erwerben würde.

 

Und das sagt Heide zu unserer Zusammenarbeit:

Liebe Jutta, die Zusammenarbeit mit dir stimmte für mich auf allen Ebenen: Du hast eigene Ideen entwickelt und Vorschläge gemacht, dich aber auch auf meine Vorstellungen und Bedürfnisse eingelassen, wie z. B. die Beachtung meiner bestehenden Corporate Identity. Dabei habe ich dich als extrem zuverlässig und sorgfältig in der Umsetzung erlebt - und du hast wirklich jede Frage, die ich als Technik-Dummie hatte, prompt und einleuchtend erklärt. Es hat Spaß gemacht, ich habe viel dazugelernt, und ich bin total glücklich mit dem Ergebnis unseres Projekts, zu bewundern unter www.heide-liebmann.de!