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

26 Januar 2014 4 Kommentare Autor: Jürgen (jdo)

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

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  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

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

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.

  1. span class="st0">""""

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

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!

Du kannst gerne Deinen Senf zu diesem Beitrag geben: Hier geht es zu den Kommentaren




Schreiben macht durstig! Eine kleine Erfrischung kann daher nie schaden. Wem dieser freie Artikel gefallen hat, der darf mir gerne einen frisch gezapften Hopfen-Tee ausgeben (Paypal - der Spenden-Knopf
oder bitcoin - Adresse: 1NacVNwcLLePUVv8uSafu5Ykdwh8QyDfgK). Ich freue mich über jede noch so kleine Spende. Vielen Dank und Prost!
 Alle Kommentare als Feed abonnieren

4 Kommentare zu “WordPress: Die Rosinen aus Twenty Fourteen in eigenes Theme übernehmen”

  1. Georg sagt:

    Kann ich die Google Fonts-Schriften auch ohne eine Google-Wanze nutzen? Im Prinzip sollte ich die .woff-Datei (http://fonts.googleapis.com/css?family=Lato) doch auch einfach auf meinen Server kopieren können, oder? Aufgrund der OSS-Lizenz sollte es ja legal sein.

  2. Michael Marheine sagt:

    Auch ich finde, dass es in Bezug auf den aktuellen Look von Magazinen hin endlich mal ein gutes WP Theme von Haus aus gibt. Bisher waren eigentlich alle frei, jährlich, gegebenen Themes eher sehr sehr aufgeräumt, eingeschränkt, eher zu sachlich. Nun kommt irgendwie mehr Farbe und Vielfalt ins Spiel, was ich deutlich begrüsse.

    War immer auf der Suche nach anderen Themes, wenn es um kleine Projekte für Freunde und Bekannte ging. Nun aber werde ich ersthaft mal eines auf der gelieferten Basis aufbauen. Ich denke, das sich das durchaus auch im Zeitgeist - mit dem aktuell von Lesern und Besuchern geforderten Anforderungen an Design und Typo - gut sehen lassen kann.

    der Michael

Antworten