WordPress Themes und Templates | Tutorial Teil 5

Tutorial Teil 5 – WordPress Themes

Im Zusammenhang mit dem Erstellen von Websites tauchen zwei Begriffe auf – Themes und Templates. Da diese beiden häufig in einen Topf geworfen bzw. verwechselt werden, hier eine kurze Erklärung.

Ein WordPress Theme ist verantwortlich für das komplette Design deiner WordPress Webseite. Es enthält Farben, Hintergründe für den Footer, Header, den Haupt- und jeden anderen Bereich. Auch ist das Theme verantwortlich für Layout-Elemente, z. B. welche Seitenleisten wir nutzen und wo sie sich befinden, die Seiten-Breite etc. (Quelle: Pixelemu, aus dem Englischen übersetzt)

Somit bilden WordPress Themes die Grundlage für die Websites. Sie bestimmen zunächst, welche Elemente du auf deiner Website nutzen kannst. Außerdem ermöglichen sie es u.a. den Kopf (Header)- und Fuß (Footer)-Bereich individuell anzupassen. Da jedes Theme andere Voraussetzungen mitbringt, variieren natürlich auch die Anpassungsmöglichkeiten.

Templates

Während also WordPress Themes das große Ganze festlegen, bestimmen Templates das Layout für einzelne Seiten. Leider geht es an dieser Stelle nicht ganz ohne Fachbegriffe.

„Template Dateien sind PHP Dateien im WordPress Theme und verantwortlich für die Ausgabe des HTML Markups zur Anzeige der Website. Meistens bestehen sie aus einem Mix von HTML und PHP Code. Grundsätzlich benötigt ein WordPress Theme nur eine einzige Template Datei: Die index.php. Die meisten Entwickler setzen jedoch spezialisierte Templates ein, um die Anzeige des Themes je nach Kontext anzupassen und häufig benötigte Template Blöcke in eigene Dateien auszulagern.“ » Theme Coder

PHP ist eine Skriptsprache, deren Code serverseitig verarbeitet und deren Quelltext nicht an den Browser übermittelt wird. Somit liefert der Server nur die darin enthaltenen HTML-Dateien an Browser aus. Wenn du dir deine WordPress Installation auf dem Server ansiehst, findest du neben der schon erwähnten index.php-Datei unter anderem auch eine

• single.php
• page.php
• archive.php
• search.php
• home.php
• header.php
• footer.php

Dagegen handelt es sich bei HTML nicht um eine Programmiersprache im klassischen Sinn. Sondern es ist eine Textauszeichnungssprache, die Elemente wie Überschriften oder Grafiken darstellt. HTML-Dokumente sind unabhängig vom Betriebssystem. So siehst du in jedem Browser (in etwa) die gleiche Darstellung einer Webseite.

Vorinstallierte WordPress Themes

Nach diesem kleinen Ausflug in die Welt des Programmierens und auf den Server, geht es auf dem WordPress Dashboard weiter. Sobald du WordPress auf deinem Server eingerichtet hast, ist bereits eines der WordPress Themes aktiviert. Normalerweise handelt es sich um das Neuste aus der „WordPress eigenen“ Theme-Reihe Twenty Twenty-….

Vermutlich wirst du jedoch ein anderes, besser auf deine geplante Website zugeschnittenes, Theme nutzen wollen. Um dieses zu finden, beginnst du wieder in der Seitenleiste des Dashboards: Design > Themes.

Anschließend öffnet sich ein Fenster mit allen bereits auf deinem Server installierten WordPress Themes. Außerdem ist das aktuell aktive Theme markiert.

Theme-Suche

Ausgehend davon, dass du nicht bei Twenty Twenty-… bleiben möchtest, musst du nach einem anderen Theme suchen. Hierzu klickst du am oberen Rand dieses Fensters auf Hinzufügen. Das neue Fenster zeigt zunächst eine Auswahl vorgestellter WordPress Themes. Bereits installierte Themes sind gekennzeichnet.

Da das Angebot ziemlich groß ist, kannst du einige Filter anwenden, um die Auswahl einzugrenzen.

• Vorgestellt
• Populär
• Neueste
• Favoriten

Darüber hinaus hast du die Möglichkeit, nach Funktionen zu filtern. Wenn du z. B. einen Blog über Essen & Trinken mit individuellem Logo und Raster-Layout haben möchtest, klickst du die entsprechenden Funktionen an. Daraufhin zeigt dir WordPress eine Auswahl an WordPress Themes, die diese Kriterien erfüllen.

Qualität des WordPress Themes

Nachdem du bei deiner Suche auf ein in Frage kommendes Theme gestoßen bist, solltest du es dir ansehen. Entweder klickst du auf Details & Vorschau oder auf Vorschau. Im sich nun öffnenden Fenster findest du am linken Rand eine kurze Beschreibung. Des weiteren erhältst du einen Eindruck, wie die Startseite in etwa aussehen würde.

Wesentlich › mehr Details siehst du direkt bei WordPress.org. Entweder gibst du in das Suchfeld den Namen des für dich interessanten WordPress Themes ein. Oder du verwendest dieselben Filterfunktionen wie in deinem Dashboard. Wenn du hier jedoch auf das Theme klickst, erscheint eine ausführlichere Informationsseite.

Einerseits findest du dort Angaben zu Version, Updates, Bewertung etc. sowie einen Link zur jeweiligen Theme-Homepage. Andererseits erfährst du auch, welche Elemente das Theme enthält sowie wie oft es pro Tag heruntergeladen wurde.

Installation

Am einfachsten ist es, WordPress Themes direkt über dein Dashboard zu installieren. Dazu klickst du bei dem ausgewählten Theme auf Installieren > Aktivieren.

Etwas umständlicher ist es, über WordPress.org oder die Homepage des Entwicklers zu gehen. In diesem Fall lädst du dein Theme zunächst auf deinen Computer herunter und speicherst es dort. Anschließend besuchst du wieder dein Dashboard.

1. Design
2. Themes
3. Hinzufügen
4. Theme hochladen
5. Durchsuchen

Nachdem du die zuvor gespeicherte .zip-Datei markiert hast, klickst du auf Installieren. Anschließend das Aktivieren nicht vergessen.

Weitere Bezugsquellen

Um ein passendes und gutes Theme zu finden, bietet sich auch eine Suche im Internet an. Dort gibt es zahlreiche Webseiten, die WordPress Themes vorstellen, beschreiben und bewerten. Nach dem Klicken auf den zugehörigen Link, landest du manchmal ebenfalls bei WordPress.org. Meistens jedoch auf der Theme-Homepage des Entwicklers.

Der Vorteil ist, dass du noch mehr über das Theme erfährst. Auch bekommst du einen besseren Eindruck von den Möglichkeiten, die das Theme bietet.

Des weiteren kannst du auch eines der Theme-Portale besuchen. Als vertrauenswürdige Anbieter qualitativ guter WordPress Themes wären beispielsweise Elma Studio, Envato Market (Theme Forest), aThemes oder Elegant Themes (wenn du unbedingt mit einem Page Builder arbeiten möchtest) zu nennen.

Wechsel des Themes

Wie bereits oben angedeutet, kannst du relativ schnell von einem zu einem anderen Theme wechseln. Dazu aktivierst du in deinem Themes-Fenster einfach ein anderes, bereits installiertes Theme. Auch hier kannst du zuerst die Vorschau-Funktion nutzen, um zu sehen, wie deine Startseite aussehen wird.

So problemlos wie es sich anhört, ist es jedoch leider nicht. Denn die Änderungen, die du bei deinem „alten“ Theme vorgenommen hast, gehen weitestgehend verloren. Infolgedessen musst du viele Anpassungen erneut vornehmen. Außerdem kann es passieren, dass bestimmte Elemente des alten im neuen nicht enthalten sind. Zuletzt passen auch unter Umständen auch die Bildgrößen nicht, so dass du die Abbildungen entsprechend neu optimieren müsstest.

WordPress Themes Premium

Als Anfänger bzw. für einen Probelauf bietet sich zunächst die Verwendung eines kostenlosen WordPress Themes an. Denn es ist einfach zu installieren, bringt alle Grundvoraussetzungen hinsichtlich Funktionalität und Design mit ohne überladen zu sein. Jedoch lässt es sich „out of the box“ nur recht eingeschränkt anpassen.

Falls du nicht zumindest über grundlegende CSS- und HTML-Coding-Kenntnisse verfügst, stößt du eventuell schnell an die Grenzen des Möglichen. Darüber hinaus erscheint im Footer deiner Webseite ein Hinweis auf WordPress und/oder den Theme-Entwickler. Diese Einblendung kannst du auch nicht so einfach entfernen.

Wenn dir also die kostenlose Version zu wenig ist, musst du dir das entsprechende Premium Theme besorgen. Dessen Installation erfordert entweder die für WordPress.org beschriebenen Schritte. Oder du lädst es mittels eines FTP-Clients auf deinen Server hoch.

Zunächst besuchst du die Theme-Homepage. Dort findest du die Informationen über den Funktionsumfang sowie die Kosten. Je nach Entwickler gibt es unterschiedliche Pakete. Manche bieten nur eine Pro-Version für eine Website an. Dagegen gibt es bei anderen zusätzlich eine Version für mehrere Website bzw. eine Business-Variante zur Verwendung auf einer unbegrenzten Anzahl von Websites.

Darüber hinaus unterscheiden sich die Angebote nicht nur beim Preis, sondern auch hinsichtlich der Nutzungs- und Supportdauer. So findest du häufig folgende Varianten

• Einmal zahlen: Support für 1 Jahr; Nutzung unbegrenzt
• Jährliche Zahlung: Nutzung und Premium Support solange du dafür bezahlst

Falls du dich für die kostengünstigste Variante entscheidest, solltest du bedenken, dass Support nicht nur Unterstützung bei Problemen bedeutet. Denn wesentlich wichtiger ist, dass dein Theme auf Dauer auch Updates erhält.

Einerseits stopfen diese immer wieder auftretende Sicherheitslücken. Andererseits passen sie die Funktionen an Veränderungen bei WordPress selbst an. Deshalb ist eine zeitliche Support-Begrenzung bei Websites, die über einen längeren Zeitraum online bleiben sollen, kein gute Idee.

Verwendung eines Premium Themes

Normalerweise legst du zunächst auf der Website des Entwicklers bzw. des Portals ein Konto an. Anschließend entscheidest du dich für ein Theme, gibst deine Zahlungsinformationen an und lädst es dann herunter. Alles Weitere entspricht dem unter „Installation“ beschriebenen. Genauere Hinweise zum Verfahren findest du ebenfalls auf der jeweiligen Website.

Manche Entwickler verteilen die Pro-Erweiterung(en) auch in Form von Plugins. Dann installierst du zunächst diese(s) WordPress Plugin(s). Danach fügst du in den Plugin-Einstellungen den Aktivierung-Code ein, den du beim Kauf des Themes vom Entwickler/Verkäufer erhalten hast.

Child Theme

Falls du dein WordPressTheme über die Premium-Möglichkeiten hinausgehend anpassen möchtest, bleibt dir nur noch, eigene Codes zu schreiben. Solange es sich nur um Kleinigkeiten handelt, reicht der meistens mitgelieferte Editor für zusätzliches CSS aus.

Die meisten Entwickler von WordPress Themes bieten jedoch auch den Download eines Child Themes an. Außerdem erklären sie normalerweise, was du bei der Installation und Einrichtung beachten solltest. Nachdem du es in WordPress hochgeladen hast (s. oben unter Installation), erscheint es wie alle anderen installierten Themes im Themes-Fenster.

Dort aktivierst du es, wie du es zuvor mit dem Eltern-Theme getan hast. Anschließend ist das Eltern-Theme zwar nicht mehr als Aktiv markiert, bleibt es aber trotzdem, nur eben im Hintergrund. Deshalb darfst du dieses nicht deinstallieren.

Denn wenn deine Website aufgerufen wird, lädt der Browser, vereinfacht gesagt, alle Funktionen des Eltern-Themes, lässt aber die von dir überschriebenen weg. Stattdessen nutzt er die veränderten / neuen Codes deines Child-Themes. Falls der Entwickler später das Eltern-Theme aktualisiert, bleiben deine Änderungen im Child-Theme davon unberührt.

WEITERE WORDPRESS-TUTORIALS

• WP Login und Einstellungen
• Benutzer & Kommentatoren
• Werkzeuge – Datenschutz
• Plugins installieren
• Design, Widgets, Menüs
• Mediathek
• Seiten & Beiträge

© eb | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.