Der Weg zum eigenen Blog – Ein Theme installieren

Wie WordPress installiert wird, habe ich in einem eigenem Beitrag bereits beschrieben. In diesem Beitrag geht es nun darum das Blog zu individualisieren. Was liegt da näher als ein eigenes Theme zu installieren?
wordpress-logo-notext-rgb
Bei WordPress sind Inhalte vom Design strikt getrennt. Alle Textinhalte (Beiträge, Kommentare etc.) sind in der Datenbank abgelegt und alle Bilddateien, die in den Beiträgen verwendet werden, sind auf dem Webspace abgelegt und werden in der Medienübersicht im Backend verwaltet.

Durch diese strikte Trennung ist es möglich am Design des Blogs jederzeit Änderungen vorzunehmen ohne Inhalte anzupassen.

WordPress liefert direkt mit der Installation Standard Themes mit, aber wenn man seinem Blog einen eigenen Look verpassen möchte geht eigentlich kein Weg an einem eigenem Theme vorbei. Hierbei gibt es zwei Möglichkeiten:

  1. Ein komplett eigenes Theme entwickeln. Unterstützen können hierbei auch verschiedene Frameworks wie zum Beispiel Thematic oder Gantry.
  2. Ein fertiges Theme nutzen und eventuell eigene Anpassungen an diesem Theme mit Hilfe eines Child Themes  vornehmen.

Für Leute wie mich, die keinerlei Begabung und oder Fähigkeiten in Sachen Design und grafische Gestaltung haben, scheidet Möglichkeit 1 eigentlich direkt aus. Daher konzentrieren wir uns in diesem Beitrag auf das Installieren eines fertigen Themes und erstellen darauf basierend ein Child Theme.

Woher bekomme ich mein Theme?

Als erstes stellt sich die Frage woher man ein Theme nehmen soll. Im offiziellen WordPress Themeverzeichnis gibt es eine große Auswahl an freien Themes. Im WordPress-Administrationsbereich unter dem Menüpunkt Design/Themes können Themes aus dem offiziellen Verzeichnis mit ein paar Klicks installiert und aktiviert werden. Es gibt aber auch Themes auf diversen Webseiten zum Download, diese müssen aber manuell installiert werden.

Ich bin zufällig beim Surfen im Netz auf der Webseite von Elmastudio gelandet und habe dort das Theme Tatami entdeckt. Das schlichte Design ist mir direkt ins Auge gesprungen, daher habe ich beschlossen mein Glück damit zu versuchen.

Die Installation des Themes

Die Installation ist kinderleicht und gilt auch für jedes andere Theme:

  • Theme Datei herunterladen.
  • Im Administrationsbereich Deiner WordPress Installation (Backend) klickst Du unter dem Menüpunkt Design auf den Unterpunkt Themes. Anschließend klickst Du auf den Button hinzufügen und wählst Hochladen aus.
  • Theme hochladenHier wählst Du dann die heruntergeladene Zip-Archiv aus und klickst auf Jetzt installieren.
  • Anschließend musst Du nur noch in der Themeübersicht das Theme aktivieren.

Child Theme erstellen

Nachdem Du jetzt ein Theme installiert hast, willst Du sicherlich eigene Anpassungen am Theme vornehmen. Zum Beispiel kann man eigene Funktionen schreiben oder Anpassungen an der CSS Datei vornehmen. Eigene Änderungen an einem Theme haben allerdings den Nachteil, dass die Änderungen bei einem Theme Update weg sind. Dieses müssten dann mühselig von Hand wieder eingebaut werden. An dieser Stelle hilft uns das Child Theme.

Ein Child-Theme, ist ein WordPress Theme, das auf einem übergeordneten Theme basiert. Das Child Theme erbt Funktionen und Template-Dateien vom Parent Theme. Dadurch kann man Änderungen für ein Theme durchführen, ohne das eigentlich Theme zu verändern. WordPress versucht, jede Datei, die es zur Darstellung der Inhalte einer Website benötigt, im Ordner des aktiven Themes zu finden. Wenn WordPress eine Datei dort nicht findet, sucht WordPress die benötigte Datei zusätzlich im Ordner des Parent-Themes. In der CSS Datei des Child Themes muss das originale CSS File inkludiert werden, eigene Änderungen werden darunter erfasst und überschreiben die Werte des originalen Themes.

Zum Erstellen eines eigenen Child Themes basierend auf dem Theme Tatami gehe ich wie folgt vor:

    • Ich lege per FTP im Themes Ordner (wp-content/themes/) einen Unterorder tatami_child an
    • In diesem Ordner lege ich eine CSS Datei mit dem Namen style.css an. In diese Datei gehört folgendes:
@charset "UTF-8";

/**
 * Theme Name: Tatami Child Theme
 * Description: Child theme for Tatami from Elmastudio. Realized to handle my changes to the theme.
 * Author: Elmar Meuthen
 * Author URI: http://just4testing.com
 * Template: tatami
 * Version: 1.0
 */

@import url('../tatami/style.css');

  • Jede dieser Zeilen kann angepasst werden. Die einzigen wirklich benötigten Zeilen sind Theme Name und Template. Template ist der Verzeichnisname des Parent Theme. In diesem Fall ist das Parent Theme das Theme Tatami. In meinem Fall wird hier außerdem im CSS das Stylesheet vom Parent Theme inkludiert. Ich muss also lediglich meine Änderungen am CSS in dieser Datei unterhalb der import Anweisung aufführen, damit die Originalwerte des Parent Themes überschrieben werden.
  • Zusätzlich kannst Du optional einen Screenshot für das Child-Theme erstellen. Dazu legst Du einfach eine PNG-Grafik mit 300 Pixel in der Breite und 225 Pixel in der Höhe an und nennst diese “screenshot.png”. Die Grafik kopierst Du in den Child-Theme-Ordner rein. Der Screenshot wird angezeigt, wenn Du im WordPress Backend auf die Themeübersicht gehst. Dort kannst Du das Child Theme dann auch aktivieren.

Child Theme

 

Das Child Theme bearbeiten

Nachdem Dein Child Theme erstellt ist, kannst Du nun zu Deinen eigenen Anpassungen übergehen. Änderungen im CSS des Themes kannst Du einfach in die Datei style.css des Child Themes eintragen. Wenn Du etwas in den Theme-Templates ändern möchtest, kopierst Du einfach das Template, das Du verändern möchtest, vom Parent-Theme-Verzeichnis in das Child Theme-Verzeichnis und editierst es dort. Bei einem zukünftigem Update des Parent Themes bleiben Deine Änderungen erhalten und Du hast eine Menge Arbeit gespart…

Eine super Anleitung zum Thema Child Themes und noch mehr Details findest Du übrigens in einem Blog Beitrag von Frank Bültge auf seiner Seite bueltge.de. Auch Nachteile (zum Beispiel Performanceeinbußen) von Child Themes werden dort behandelt.

Dieser Beitrag ist Teil der Artikelserie "Der Weg zum eigenen Blog". Besuche die Artikelseite für weitere Artikel:
zur Artikelserie

Elmar

Ich bin Elmar aus Aachen und habe erst vor kurzem mit dem Aufbau dieses Blogs begonnen! Eigentlich ist das hier so eine Art Spielwiese für mich. Ich mache mir hier und da ein paar Notizen und freue mich darüber, falls Andere davon profitieren sollten. Ich dokumentiere hier was mir irgendwie in den Sinn kommt oder was ich so treibe. Ich koche gerne, beschäftige mich mit IT nahen Themen, probiere und experimentiere alles mögliche aus und erkunde auch gerne mit dem Rennrad die Straßen der Region.

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.