NSC 2016 #3 – Anpassung des kostenlosen WordPress Themes „Twenty Thirteen“

Nischenseiten-Challenge 2016 - Bericht 3Das WordPress Theme „Twenty Thirteen“.

Es ist eines der kostenlosen Standard Themes von WordPress.

Inzwischen ist es schon drei Jahre alt, zählt aber immer noch zu einem meiner Lieblingsthemes. Ich nutze die WordPress Standard Themes sehr gerne.

Sie sind zum einen recht einfach gehalten und zum anderen kann man mithilfe eines Child Themes und zwei Plugins umfangreiche Anpassungen vornehmen.

Auch bei meiner neuen Nischenseite backlinks-generieren.de  (Update: Die Domain wurde inzwischen gelöscht und alle Inhalte von backlinks-generieren.de auf netztipps.org umgezogen) setze ich auf dieses Theme. In diesem Beitrag gehe ich darauf ein, wie ich ein Child Theme anlege, welche Änderungen ich darin vornehme und welche Anpassungen durch zwei weitere Plugins gemacht werden können.

Child Theme für Twenty Thirteen

Im ersten Schritt lege ich mir ein Child Theme für das Twenty Thirteen Theme an. Wenn du Änderungen im Code des Original Themes vornehmen würdest, werden diese bei jedem neuen Theme Update wieder überschrieben.

Das kannst du jedoch sehr leicht vermeiden, indem du ein Child Theme für das Standard Theme anlegst und aktivierst. Sämtliche Änderungen bleiben bei einem Update des Original Themes bestehen.

Ich habe mir das Child Theme für meine Nischenseite mit dem Plugin „Child Theme Configurator“ angelegt. Sobald das Child Theme angelegt ist, kannst du das Plugin wieder deaktivieren und löschen.

Anschließend habe ich in der style.css verschiedene Codes eingetragen. Ich muss dazu sagen, das ich bzgl. css-Code kein Experte bin. Die einzelnen Anleitungen bzw. Informationen, welche Codes wie geändert werden müssen, habe ich in Blogs, Foren und Facebookgruppen nachgelesen.

Folgende Änderungen habe ich vorgenommen:

1. Die Content Breite

Die Content Breite ist beim Standarttheme Twenty Thirteen in meinen Augen ein bisschen zu gering. Diese habe ich etwas breiter und passend zur Navigation eingestellt.

In die style.css des Child Themes habe ich dazu folgenden Code eingetragen:

.sidebar .entry-header,

.sidebar .entry-content,

.sidebar .entry-summary,

.sidebar .entry-meta {

max-width: 1040px;

padding: 0 376px 0 0px;

}

2. Anordnung der Bilder

Wenn bei der Standardversion Bilder in einzelne Seiten oder Beiträge eingefügt und die Ausrichtung dabei links oder rechts eingestellt ist, erscheinen diese nicht bündig mit dem Text, sondern werden immer ca. 1 cm nach außen verschoben.

Das gefällt mir jedoch gar nicht. Um das so zu ändern, dass die Bilder bündig mit dem Text angezeigt werden, muss der folgende Code in die style.css eingetragen werden:

.entry-content img.alignleft,

.entry-content .wp-caption.alignleft {

margin-left: 0px;

}

.entry-content img.alignright,

.entry-content .wp-caption.alignright {

margin-right: 0px;

}

3. Header verkleinern

Da mir der Header etwas zu groß ist, habe ich auch hier eine Änderung vorgenommen und den nachfolgenden Code in die style.css eingefügt:

.site-header {

position: relative;

}

.site-header .home-link {

color: #141412;

display: block;

margin: 0 auto;

max-width: 1080px;

min-height: 103px;

padding: 0 20px;

text-decoration: none;

width: 100%;

}

.site-header .site-title:hover {

text-decoration: underline;

}

.site-title {

font-size: 60px;

font-weight: bold;

line-height: 1;

margin: 0;

padding: 15px 0 10px;

4. Datum ausblenden

Bei allen WordPress Themes wird in der Regel das Datum der Veröffentlichung zu den einzelnen Beiträgen mit angezeigt. Bei einer kleinen Nischenseite ist die Anzeige des Datums allerdings nicht nötig.

Um das Datum im WordPress Standard Theme Twenty Thirteen auszublenden, musst du dir die Datei content.php vom Original Theme in deinen Child Theme Ordner kopieren.

Anschließend muss die folgende Code Zeile in der content.php einfach gelöscht werden:

<?php twentythirteen_entry_meta(); ?>

Die Plugins „Styles“ und „Styles: TwentyThirteen“

Für weitere Anpassungen installierst du dir die beiden Plugins „Styles“ und „Styles: Twenty Thirteen“.

Mit diesen Plugins kannst du das Theme so umgestalten, dass es kaum mehr zu erkennen ist, um welches Original Theme es sich handelt.

Du hast damit die Möglichkeit, ein Theme zu erstellen, das nahezu einzigartig ist. Somit ist der Wiedererkennungswert deutlich sichtbar.

Die Änderungen kannst du im WordPress Backend unter dem Menüpunkt: Design → Anpassen vornehmen.

Folgende Änderungen sind möglich:

  • Schriftarten: Egal ob es um die Schriftart im Header, im Contentbereich, in der Sidebar oder im Footer geht. Sämtliche Schriftarten, die auf der Seite angezeigt werden, können beliebig verändert werden. Ebenso können die Schriftarten bei den Überschriften H1, H2, H3 usw.  geändert werden.
  • Schriftfarben: Das gleiche gilt bei den Schriftfarben. Diese können, genauso wie die Schriftarten beliebig angepasst werden.
  • Schriftgröße: Ebenso gibt es bei der Schriftgröße keine Einschränkungen. Auch hier können die Größen überall nach Belieben eingestellt werden.
  • Farben: Jede Webseite sollte eine bestimmte Grundfarbe haben. Auch die Farbeinstellungen kannst du mit diesen beiden Plugins problemlos ändern. Hintergrundfarben oder auch die Farben für Widgets, Footer, Texte usw. lassen sich ganz nach den eigenen Wünschen realisieren.

Hier noch ein Kleiner Vorher / Nachher Vergleich:

Twenty Thirteen Theme angepasst
Es ist kaum mehr zu erkennen, dass es sich um das WordPress Standard Theme Twenty Thirteen handelt.

Weitere Plugins, die ich auf meiner Seite installiert habe

Kaum eine Webseite, die mit WordPress umgesetzt wurde, kommt ohne Plugins aus. Auf meiner Seite habe ich neben den beiden bereits genannten noch folgende Plugins installiert:

  • BackWPup – Sorgt dafür, dass alle erstellten Inhalte sowie die Datenbank gesichert werden
  • Cachify – Für schnellere Ladezeiten
  • Google Analyitcs by Monsterinsights – Um mein Google Analyitcs Konto zu verknüpfen und die IP-Adressen zu anonymisieren (wichtig für den Datenschutz)
  • Sharrif Wrapper – Für die Einbindung der Social Media Buttons
  • Table of Contents Plus – Erstellt automatisch bei jedem Artikel ein Inhaltsverzeichnis
  • WP Smush – Komprimiert automatisch die hochgeladenen Bilder, was sich ebenso positiv auf die Ladezeiten auswirkt
  • Yet Another Related Posts Plugin – Für die interne Verlinkung. Zeigt am Ende der Beiträge immer ähnliche Artikel an
  • Yoast SEO – Das bekannte und beliebte SEO-Plugin für die On Page Optimierung

Zusätzlich habe ich noch zwei Security Plugins installiert. Hier möchte ich demnächst allerdings noch zwei weitere Plugins testen.

Zudem ist diese Auswahl an Plugins nicht in Stein gemeiselt. Hier können durchaus im Laufe der Zeit noch weitere hinzukommen oder bestehende ausgetauscht werden.

Grundsätzlich versuche ich immer, die Anzahl der Plugins gering zu halten, da bei zu vielen die Performance der Seite darunter leiden könnte.

Was ich sonst noch gemacht habe

Leider nicht all zu viel. Es ist ein weiterer Artikel hinzugekommen. Zudem habe ich überprüft, ob die On Page Maßnahmen alle richtig umgesetzt und eingestellt sind.

Mein Hauptaugenmerk in den nächsten Wochen liegt auf der Erstellung von neuen Artikeln.

4 Gedanken zu „NSC 2016 #3 – Anpassung des kostenlosen WordPress Themes „Twenty Thirteen““

  1. Hallo Jens,

    tausend Dank für die tolle Anleitung! Besonders die Sache mit dem Ausblenden des Datums und der Anordnung der Bilder, ich suche schon ewig nach einer Lösung, Du hast mir gerade wirklich weitergeholfen.

    Viele Grüße

    Julia

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Test