So kannst du deine eigene Website erstellen – Teil 7: WordPress Theme (Template) aussuchen und WordPress Child-Theme erstellen

Wir wollen uns nun ein geeignetes Theme aussuchen und daraus ein WordPress Child-Theme erstellen.  Ein „Theme“ ist bei WordPress das, was du von deiner Textverarbeitung her vielleicht unter dem Namen „Format-Vorlage“ kennst. Also ein Design, das in gewissen Grenzen änderbar ist.

Themes gibt es für die unterschiedlichsten Themengebiete/Anwendungszwecke. Viele sind kostenlos, ganz hochwertige muss man in der Regel bezahlen. Das Problem (das man durchaus auch bei Plugins hat) ist, dass Themes von Fremdherstellern bei einem Release-Wechsel unter Umständen nicht mehr funktionieren.

Aus diesem Grund neige ich persönlich dazu, die Standard-Themes zu nutzen, die mit WordPress selbst automatisch installiert werden. Seit einiger Zeit wird nämlich jährlich ein Standard-Theme von den WordPress-Entwicklern programmiert und ausgeliefert. Die Namen dieser Themes entsprechen der Jahreszahl. Das in 2015 aktuelle Theme heißt also „Twenty Fifteen“.

Mein persönlicher Favorit ist allerdings das Theme „Twenty Fourteen“, mit dem ich auch in dieser Serie weiterarbeiten werde.

Wenn du dich als Administrator anmeldest und im Menü auf „Design“ und „Themes“ klickst, erhältst du einen Überblick über die verfügbaren Themes.

Übersicht Themes

Du siehst im Bild oben, dass das Theme „Twenty Fifteen“ aktiviert ist. Um das Theme „Twenty Fourteen“ zu aktivieren fährst du mit dem Mauszeiger auf dieses Theme-Symbol und klickst den dann erscheinenden Button „Aktivieren“ an.

TwentyFourteen aktivieren

Wir werden am Design dieses Themes noch einige Änderungen vornehmen. Z.B. möchte ich über das Menü ganz oben eine aussagekräftige Bildleiste einfügen. Auch der große schwarze Bereich im Theme gefällt mir nicht. Eine andere Farbe muss her. Auf andere Dinge, die wir ändern müssen, gehe ich später noch ein.

Nun ist es so, dass auch WordPress an den Themes im Laufe der Zeit Änderungen vornimmt und Updates ausliefert. Unglücklicherweise werden durch solche Updates unsere Änderungen wieder überschrieben und damit zunichte gemacht. Um das zu verhindern, legen wir eine Art Kopie unseres Themes an, ein sogenanntes „WordPress Child-Theme“. Wir geben diesem „Child“ (Kind) einen aussagekräftigen Namen und arbeiten dann nur noch damit. Das Original, das „Parent-Theme“ (Eltern-Theme), kann dann gefahrlos upgedatet werden, ohne dass unsere Änderungen verloren gehen.

Zuerst müssen wir ein Verzeichnis (einen Ordner) für unser Kind anlegen. Alle Ordner für Themes befinden sich im Verzeichnis „C:\xampp\htdocs\hwv-gey-strass\wp-content\themes“. Statt „hwv-gey-strass“ steht bei dir natürlich der Name deiner WordPress-Installation/deiner Website.

Ich habe hier den leeren Ordner „hwv_twentyfourteen“ angelegt.

hwv_twentyfourteen Child-Ordner anlegen

Nun öffnest du deinen Editor (notepad++) und erzeugst eine neue Datei mit folgendem Inhalt:

/*

Theme Name: HWV Twenty Fourteen

Description: Das Theme für den Heimat-, Wander- und Verkehrsverein Gey-Straß e.V.

Theme URI: http://www.hwv-gey-strass.de

Author: Ronald Wasserrab

Author URI: http://www.eifelpanorama.de

Template: twentyfourteen

Version: 1.0

Tags:

*/

@import url(‚../twentyfourteen/style.css‘);

Diese Datei speicherst du unter dem Namen „style.css“ im neu angelegten Ordner „C:\xampp\htdocs\hwv-gey-strass\wp-content\themes\ hwv_twentyfourteen“ ab.

Was du unter „Theme Name:“ eingetragen hast, erscheint später als Theme-Name in der Themes-Auflistung unter „Design – Themes“.

Unter „Template:“ muss der Name des Parent-Themes stehen und in der letzten Zeile der Verweis auf die style.css des Parent-Themes.

Alle anderen Einträge sind nicht so wichtig.

Noch etwas solltest du aus Sicherheitsgründen sofort tun: Rückmeldungen des Systems beim Einloggen unterdrücken.

Starte notepad++ und lege im Verzeichnis deines Child-Themes (bei mir „C:\xampp\htdocs\hwv-gey-strass\wp-content\themes\hwv_twentyfourteen“) eine functions.php an. Die Datei musst du mit folgendem Inhalt füllen:

<?php

add_filter(‚login_errors‘,create_function(‚$a‘, „return null;“));

?>

Wenn du nun deine Website als Administrator aufrufst, dann müsste unter „Design – Themes“ das neue „Child-Theme“ zu sehen sein. Allerdings als leerer Rahmen ohne Bild. Du kannst ein eigenes Bild dort einfügen, indem du eine Bilddatei im PNG-Format mit den Abmessungen 600×450 Pixel erzeugst. Sie muss den Namen „screenshot.png“ haben und in dem Verzeichnis stehen, in dem du gerade die neue style.css gespeichert hast. Also im neuen Child-Theme-Verzeichnis.

Unter „Design – Themes“ solltest du jetzt das neue Child-Theme aktivieren.

Wenn du nun deine Website aufrufst, erhältst du etwa folgendes Bild:

Erster Aufruf des Child-Themes

Niemand kann dir natürlich eine Garantie dafür geben, dass bei einem zukünftigen Update des Eltern(Parent)-Themes nicht doch etwas Unvorhergesehenes passiert. Bei mir war das bereits so. Nach einem Update des Themes Twenty Fourteen war eifelpanorama.de nicht mehr aufrufbar. Zum Glück hatte ich aber vom Theme-Twenty-Fourteen-Verzeichnis eine Kopie angelegt, die ich nur zurückspielen brauchte und damit das unglückselige Update rückgängig machen konnte. Lege also eine Kopie des Verzeichnisses „C:\xampp\htdocs\hwv-gey-strass\wp-content\themes\twentyfourteen“ an und nenn es z.B. „C:\xampp\htdocs\hwv-gey-strass\wp-content\themes\twentyfourteen – Eltern_Sicherheitskopie“.

Es ist nun an der Zeit, dass wir uns im nächsten Schritt die Struktur unserer Site überlegen. Das wollen wir im Teil 8 tun.

Teil 1: Grundsätzliches

Teil 2: Lokale Installation von XAMPP

Teil 3: (Lokale) Installation von WordPress

Teil 4: Vorkehrungen für eine sichere Website

Teil 5: WordPress konfigurieren

Teil 6: Nutzlose WordPress Plugins entfernen, nützliche installieren

Teil 7: WordPress Theme (Template) aussuchen und WordPress Child-Theme erstellen

 

Schreibe einen Kommentar

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