WordPress: Die Rosinen aus Twenty Fourteen in eigenes Theme übernehmen

Mit WordPress 3.8 sind die Entwickler im Hinblick auf das Theme recht mutig gewesen und haben mal eine ganz andere Richtung eingeschlagen. Bei einem Theme ist es oft wie bei einem Foto: Es ist Geschmackssache. Auch wenn ich schon viel Positives über Twenty Fourteen gelesen habe, gibt es auch Menschen, denen es überhaupt nicht gefällt.

Laut Entwickler ist es ein Theme im Magazin-Stil. Das kann man bedingt auch so unterschreiben. Das Problem ist nur, dass es so viele verschiedene Magazin-Stile gibt und alle den Fokus anders legen. Ein Reise-Magazin ist mit Sicherheit wesentlich Bild-lastiger als ein wissenschaftliche (digitales) Blatt. Beziehungsweise lässt man bei einem Magazin mehr die Bilder sprechen, während bei einem anderen das Geschriebene im Vordergrund steht.

Das Nachfolgende soll nun überhaupt keine Kritik an Twenty Fourteen an sich sein, aber nicht jeder hat Schuhgröße 42. Für mich geht Twenty Fourteen eher in die Richtung Bild-lastig, wie das zum Beispiel Reise-, Fashion- oder Foto-Magazine verwenden würden. Mir gefällt Twenty Fourteen ausgesprochen gut und ich hatte mir ernsthaft überlegt, darauf umzusteigen. Allerdings wäre da ein ziemlicher Umbau notwendig und zweitens passt es nicht ganz zu meiner Seite.

WordPress-Theme: Twenty Fourteen

Allerdings kann man von Themes wie Twenty Fourteen auch ausgezeichnet lernen und es hält einen nichts davon ab, zumindest Teile davon in sein eigenes Theme zu basteln. Die beiden Dinge, die mir am besten bei Twenty Fourteen gefallen sind:

• Die Typographie – also das Schriftbild
• Die Tag-Schilder
• Die Überschrift und Kategorie, die in das Teaser-Bild laufen (das habe ich nicht umgesetzt – vielleicht mache ich das noch)

Also, sehen wir und das Theme mal genauer an. Wenn Du die neuesten Version von WordPress herunterlädst, bekommst Du Twenty Fourteen automatisch geliefert.

Typographie

Twenty Fourteen verwendet eine Schriftart (neudeutsch Font), die sich Lato nennt. Sie wurde von Łukasz Dziedzic entwickelt, ist unter anderem in Google Fonts enthalten und steht unter der SIL Open Font License, 1.1.

Somit ist ein Einbetten sehr sehr einfach. Zunächst wählst Du die Schriftstärken auf dieser Seite aus: http://www.google.com/fonts#UsePlace:use/Collection:Lato

Google Fonts: Lato auswählen

Danach kannst Du die Schriftart durch eine der nachfolgenden Möglichkeiten einbetten:

• <link href=’http://fonts.googleapis.com/css?family=Lato’ rel=’stylesheet’ type=’text/css’>
• @import url(http://fonts.googleapis.com/css?family=Lato);
• oder über JavaScript: <script type=”text/javascript”>
    WebFontConfig = {
      google: { families: [ ‘Lato::latin’ ] }
    };
    (function() {
      var wf = document.createElement(‘script’);
      wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
        ‘://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;
      wf.type = ‘text/javascript’;
      wf.async = ‘true’;
      var s = document.getElementsByTagName(‘script’)[0];
      s.parentNode.insertBefore(wf, s);
    })(); </script>

Auch Twenty Fourteen geht den Weg über Google Fonts und die Entwickler gehen bei diesem Theme (was Du auch machen kannst) den Weg über die Datei functions.php (einfach nach Lato suchen).

Die Schrift selbst verwendest Du dann zum Beispiel so in Deinem CSS. Auch an dieser Stelle kannst Du Dir Anregungen aus der Datei style.css von Twenty Fourteen holen (steht aber nur zwei Mal drin – reicht aber).

• font-family: ‘Lato’, sans-serif;
• oder: font: 400 17px/1.5 Lato, sans-serif;

Meine ganze Seite ist noch nicht mit Lato umgesetzt, die Kommentare sind zum Beispiel noch Verdana. Ob ich das ändere, weiß ich noch nicht. Aber den Text des Beitrags finde ich mit Lato schöner.

Tag-Schilder

Auch dieses Feature gefällt mir unglaublich gut bei Twenty Fourteen. Man sieht sofort, dass es sich um Tags handelt und diese fallen dabei auch noch richtig gut auf, ohne aufdringlich zu sein.

Twenty Fourteen: Tags

Um das auch zu realisieren, hilft die Datei style.css aus Twenty Fourteen. Genau genommen brauchst Du diesen Abschnitt, der in Dein eigenes Stylesheet wandert oder entsprechend angepasst wird. Vielleicht machst Du am besten eine Kopie Deiner Datei, damit Du im Notfall schnell eine Rolle rückwärts machen kannst.

* Tag links style */

.entry-meta .tag-links a {
	background-color: #767676;
	border-radius: 0 2px 2px 0;
	color: #fff;
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2727272727;
	margin: 2px 4px 2px 10px;
	padding: 3px 7px;
	position: relative;
	text-transform: uppercase;
}

.entry-meta .tag-links a:hover {
	background-color: #41a62a;
	color: #fff;
}

.entry-meta .tag-links a:before {
	border-top: 10px solid transparent;
	border-right: 8px solid #767676;
	border-bottom: 10px solid transparent;
	content: "";
	height: 0;
	position: absolute;
	top: 0;
	left: -8px;
	width: 0;
}

.entry-meta .tag-links a:hover:before {
	border-right-color: #41a62a;
}

.entry-meta .tag-links a:after {
	background-color: #fff;
	border-radius: 50%;
	content: "";
	height: 4px;
	position: absolute;
	top: 8px;
	left: -2px;
	width: 4px;
}

Die Farben kannst Du natürlich anpassen. Wenn Du die Farbe ändern möchtest, die sich beim “Mouse Over” ändert, musst Du Pfeilspitze und Körper anpassen. Jeweils da, wo sich ein a:hover in der Zeile befindet. Einmal background-color: #41a62a; und weiter unten border-right-color: #41a62a;

Die Tags kannst Du dann so ausgeben: <?php the_tags( ‘<footer class=”entry-meta”><span class=”tag-links”>’, ”, ‘</span></footer>’ ); ?>

Tags: Funktioniert ausgezeichnet

Ich bedanke mich ganz herzlich bei den Erschaffern von Twenty Fourteen. Man kann daraus lernen und sich herrlich inspirieren lassen. Egal was manche Quängler sagen: Das Theme ist superschön, auch wenn es nicht zu jedem Thema passt. Ganz toller Job!