In diesem Blogpost werde ich das Theme Twenty Twelve neu stylen, um mal zu schauen, was sich daraus alles machen lässt. Ich werde im Rahmen dieses Blogposts ausschließlich CSS verwenden. Natürlich kann man aber mit PHP-Anpassungen noch viel mehr aus dem Theme rausholen. Am Ende des Blogposts findet ihr eine Live-Demo der Seite. Schauen wir uns zunächst das Standard Theme von Twenty Twelve an:

 

twentytwelve

 

https://twentytwelvedemo.wordpress.com/

Ziemlich simpel. Ich bin ebenfalls ein Fan von Minimalismus, aber ich finde das Theme noch nicht minimalistisch genug. Wenn wir uns mal die Blogseite anschauen, dann wirkt sie sehr unübersichtlich und überladen:

 

twentytewelve-blog

 

 

Um die einzelnen Posts zu sehen muss man sehr viel scrollen und man kann sich nur sehr schwer einen Überblick über die verschiedenen Posts verschaffen. Meine Idee ist, den Blog in 3 Sektionen zu teilen, damit man direkt 3 Posts in einer Reihe hat und sofort das gesamte Angebot der Seite erkennen kann. Zudem möchte ich überflüssige Elemente entfernen und das ganze so minimalistisch wie nur möglich gestalten, sodass der Fokus auf dem Content selbst liegt und man nicht durch einen unübersichtlichen Aufbau beschränkt wird.

Soweit so gut. Ich habe dazu eine Sub-Domain erstellt und dort eine frische WordPress-Installation mit Twenty Twelve als Theme installiert. Zuerst habe ich in dem Theme aufgeräumt. Alle Widgets habe ich deaktiviert, ein paar Beispiel-Seiten erstellt, ein paar Bilder eingefügt und ein paar Beispiel-Namen vergeben. Jetzt ist mein Theme bereits ziemlich leer. Um nun ein paar weitere Einstellungen zu treffen, habe ich den Design-Modifikator von WordPress und die Developer-Tools von Google Chrome aktiviert. Beides zur selben Zeit, wie auf dem Bild:

 

twentytwelve stylen

 

 

Um das CSS nun zu speichern verwende ich das momentan aktuellste CSS Plugin. Die Wartung der CSS-Plugins wird häufig vernachlässigt und es gibt immer wieder andere, die aktueller sind. Ich habe nun das Simple CSS genommen, da es zum Zeitpunkt dieses Posts am aktuellsten war. Natürlich lässt sich das ganze auch mit einem Child-Theme und einem Extra Stylesheet realisieren. Der unschlagbare Vorteil an einem CSS-Plugin ist jedoch, dass es Seitenspezifisch ist. Man kann für jede Seite ein anderes CSS verwenden, ohne irgendwelche Probleme. Dazu muss man lediglich innerhalb eines Posts oder einer Page oben rechts bei „Ansicht anpassen“ das Feld von dem CSS-Plugin aktivieren und schon erscheint am Ende des Posts ein Feld zur seitenspezifischen Eingabe von CSS. Dadurch lassen sich super leicht, sehr anspruchsvolle Designs erstellen. Das ganze durch ein Child-Theme umzusetzen ist deutlich schwieriger. Leichter wäre es dann, PHP-Anpassungen zu machen.

 

Makeover

 

Nun wollen wir unsere Idee umsetzen. Um die Blog-Vorschau nun zu dritteln, müssen wir lediglich die Weite der Sektion auf mindestens 33,3333% reduzieren. Die Gesamte Weite ist 100%, da aber jedes Element (die Blog-Vorschau) nur einen drittel dieser Weite ausmachen soll, müssen wir die Weite der einzelnen Elemente dritteln. Das ganze läuft über diesen Code

 

 

 

 

Und führt zu dem:

 

 

30prodesblogs

 

 

Ich habe nun 30% genommen um noch etwas Puffer zu haben. Nun ist unsere Blog-Darstellung klein genug um nebeneinander zu sein. Das Problem ist jedoch, dass es sich noch nicht nebeneinander anordnet. Um dieses Problem nun zu lösen, müssen wir mit dem Befehl „float:left“ jede Blog-Darstellung links anordnen lassen, dadurch reihen sich die Elemente je nachdem wie viel Platz zur Verfügung steht nacheinander an. Also der Befehl lautet nun:

 

 

Und führt zu dem:

 

floatleft

 

 

Jetzt sieht die Sache noch nicht so schick aus. Wir wollen jetzt noch ein bisschen Abstand hinzufügen und ein paar Elemente entfernen. Übrigens habe ich den Auszug durch den Read-More Tag innerhalb des WYSIWYG-Editors entfernt, indem ich den Tag an die erste Stelle des Posts gesetzt habe:

 

 

moretag

 

 

Der Tag lässt sich durch den Button mit den zwei Blöcken und den drei gestrichelten Linien erzeugen. In der oberen Zeile von Rechts der zweite Button. Jedoch möchte ich nicht einmal den „weiterlesen“-Button haben und auch nicht das Datum. Ich möchte lediglich den Blog-Titel behalten und das wars. Deshalb entfernen wir die anderen Elemente einfach mit „display:none“. Es gibt eine große Diskussion darum, ob man“ display:none“ benutzen darf und ob es schlecht für SEO ist. Wer aber regelmäßig die Google Webmaster Hangouts anschaut, weiß, dass Google ganz klar sagt, dass „display:none“ Inhalt komplett ignoriert wird, ebenfalls wie der Inhalt innerhalb erweiterbarer Felder.

Ich werde die Sachen nun etwas beschleunigen und viele der Detail-Anpassungen vorwegnehmen. Ich habe viele Elemente entfernt, die ich nicht mochte und ebenfalls das CSS für die mobile Version geschrieben. Der Finale globale CSS-Code lautet wie folgt (ebenfalls responsiv):

 

 

 

 

Und der CSS-Code innerhalb der Posts und Pages lautet:

 

 

 

Ich hatte im globalen CSS die Content-Weite reduziert um die Posts nebeneinander anordnen zu können. Das hatte aber ebenfalls Einfluss auf die Blog- und Seitendarstellung, da das Theme keine klare Trennung der Blog-Vorschau und der Seitenlänge hatte. Die schnellste und leichteste Lösung war es einfach, die Weite wieder pro Beitrag und Seite zurück zu setzen.

Die finale Version findet ihr hier:

 

makeovertwentytwelve

 

http://demo1.studentenwebdesign.de/  (ebenfalls mobile-friendly) ————- (Leider bereits deaktiviert) ——————–

 

Leider lassen sich die Bilder selbst nicht anklicken. Das war im Twentey Twelve leider nicht schon mit drin. Das ließe sich nur über PHP ändern. Soweit so gut, bis dann!

 

Habt Ihr Fragen oder Anregungen? Schreibt mir ein Kommentar und ich werde auf jede Frage eingehen. Falls Ihr individuelle Fragen oder Probleme mit WordPress habt und mehr Hilfe braucht könnt ihr auch ein privates WordPress Coaching mit mir buchen.