Neuer Shop – neues Blog-Layout.

Wie man unschwer erkennt, hat das Sonntagmorgen-Blog endlich das neue Layout erhalten. In den letzten Tagen habe ich mich ein bißchen mit der Umsetzung beschäftigt und will dazu – auf Wunsch von Till – ein paar Worte verlieren. Sprich: Jetzt wird’s technisch. Wer sich nicht für HTML, CSS, PHP und WordPress interessiert, darf gerne abschalten. Oder noch besser: Kaffee bestellen

HTML

Die HTML-Struktur der Seite ist sehr stark an die Struktur des Shops angelehnt. Das bot sich natürlich an und liegt ebenso nahe – schließlich soll das Blog zum restlichen Inhalt passen. Fast schon aus Gewohnheit habe ich aber als Doctype HTML5 gewählt. Zwar werden im Template keine neuen HTML5-Elemente genutzt, aber

• a) muss man sich bei diesem Doctype gar nichts merken
• b) kann man bei Gefallen (und passenden technischen Voraussetzungen) auf die neuen Elemente umstellen
• c) hab ich’s gemacht weil’s eben geht

Eine weitere, kleine Besonderheit gibt es noch, die aber später implementiert wird: Das Shopsystem lässt es nicht so leicht zu, Dinge wie den Kopfbereich inklusive Menü oder den Fußbereich der Seite automatisch auszulesen und an WordPress zu liefern. Glücklicherweise geht das aber über den einfachen Umweg YQL mit ein wenig XPath. Das ist momentan nicht implementiert. Auf Dauer ist der Plan aber, die gewünschten Bereiche des Shops auszulesen, dies jeweilige XML-Datei zwischenzuspeichern und dann entsprechend hier im Blog auszugeben. Das Ganze wird dann in regelmäßigen Abständen mit der Shop-Navigation abgeglichen und bei Änderung neu abgerufen. Das Verfahren an sich ist bei Yahoo! und im Webkrauts-Adventskalender von Christian Heilmann gut beschrieben. Das war zunächst für mich die praktikabelste Lösung, Verbesserungsvorschläge nehme ich gerne an

CSS

Die generelle Gestaltung des Templates lief recht schnell von der Hand – schließlich konnte ich auf einer großen Menge an CSS-Styles aufbauen, die bereits im Shop genutzt werden. Dazu habe ich einfach per CSS-Import die im Shop eingebundenen Stylesheets in das Blog-Stylesheet eingebunden. Dadurch hole ich auch einigen unnötigen Datenballast mit ins Boot, aber auch hier ging es mir um eine praktische Lösung, mit der ich nicht das komplette CSS-Gerüst hätte neu bauen müssen.

Ein paar kleine Spielereien habe ich mir dann natürlich erlaubt. So hat das Blog im Vergleich zum Shop einen dezenten Schlagschatten per box-shadow bekommen. Weil es geht. Zudem habe ich insbesondere das Kommentar-Formular ein wenig mit CSS aufgehübscht: Beim Hover erscheint die bekannte Klick-Hand, die sagt “Klick mich!”, zudem wird das entsprechende Feld durch einen leichten Schatten visuell hervorgehoben. Sobald das Feld fokussiert wird, ändert sich der Cursor wieder in den bekannten Textcursor, da man in dem Moment ja schreiben kann. Die schicken Sende-Buttons waren schon im Shopsystem vorgegeben. Gute Sache.

In den Kommentaren habe ich ein einfaches Streifenmuster eingesetzt, damit sich die einzelnen Beiträge besser voneinander unterscheiden. Bei Blogautoren erscheint das Bild dann links statt rechts, zudem erhält der Kommentar einen dezenten Rahmen – vorausgesetzt sie sind eingeloggt, wenn sie den Kommentar verfassen. An einigen Stellen kommen zudem eher subtil runde Ecken zum Einsatz. Insgesamt habe ich aber darauf geachtet, CSS3 so einzusetzen, dass auch gewisse Browser keine großen Darstellungsprobleme haben dürfte.

Die recht breit gestreuten Farben des Shops, die sich in den einzelnen Kaffeesorten widerspiegeln, habe ich auf die Blog-Kategorien übertragen. Die lassen sich ja leicht per WordPress auslesen und als CSS-Klasse für einen Post ausgeben, hier der entsprechende Code:

<div class="post-container
<?php foreach((get_the_category()) as $category)
{ echo $category->category_nicename . " "; } ?>
">

Dadurch haben die einzelnen Beiträge je nach Kategorie eine andere Farbe. So wird das dezente allgemeine Farbschema des Shops beibehalten, die Vielfalt der Farben (und damit der Kaffeesorten) aber auf einfache Art wieder aufgegriffen.

Sonstiges

Die Funktion für die Breadcrumbs habe ich zum Großteil bei Cats who Code entnommen, das ganze aber noch ein wenig modifiziert – insbesondere einen Link auf die Startseite des Blogs gesetzt:

function the_breadcrumb() {
	global $post;
	if ( !is_home() ) {
		echo '<div id="path"><a href="';
		bloginfo('url');
		echo '" title="Zur Startseite des Blogs">';
		bloginfo('name');
		echo '</a> / ';
		if ( is_category() || is_single() ) {
			the_category(', ');
			if ( is_single() ) {
				echo ' / ';
				the_title();
			}
		} if ( is_page() && $post->post_parent ) {
			echo post_parent . ' / ';
			echo get_the_title($post->post_parent);
			echo ' / ';
		} if ( is_page() ) {
			echo the_title();
		}
	}
	elseif (is_tag()) {single_tag_title();}
	elseif (is_day()) {echo 'Archiv für '; the_time('d. F Y');}
	elseif (is_month()) {echo 'Archiv für '; the_time('F Y');}
	elseif (is_year()) {echo 'Archiv für '; the_time('Y');}
	elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo 'Blog Archiv';}
	echo '</div>';
}

Die Herzchen-Funktion mit den Social Bookmarks aus dem Shop habe ich mithilfe des Plugins Sociable für das Blog ein wenig angepasst. Weniger Javascript bzw. jQuery, dafür mehr CSS3 mit abgerundeten Ecken und dem wieder mal genutzten Schlagschatten. Der Quelltext hilft hier weiter

Eine letzte praktische Sache habe ich zudem noch genutzt: Die Autorenbilder werden nicht über irgendein Plugin im Blog selbst abgelegt, sondern einfach per Gravatar eingebunden. So ist das Erscheinungsbild jedes Autors auch in anderen Blogs gleichbleibend. Als Default-Bild ist das Sonntagmorgen-Logo eingebunden.

Zu guter letzt muss ich beichten: Eine Todsünde habe ich bei der Umsetzung begangen: Da ich am Mac arbeite & keinen Windowsrechner in greifbarer Nähe habe, vertraue ich darauf, dass die Darstellung browserübergreifend zufriedenstellend ist. Wer grobe Fehler bemerkt, darf sich gerne melden, das wird dann natürlich schnellstmöglich behoben. Fragen und Anregungen, wie es besser gehen könnte, gerne in die Kommentare oder direkt an mich per Twitter.

Und jetzt: Viel Spaß mit dem neuen Blogdesign!