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)

Somit bilden WordPress Themes die Grundlage für die Websites. Sie bestimmen, welche Elemente Sie auf Ihrer Website nutzen können. 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.

Quelle: › 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 Sie sich Ihre WordPress Installation auf dem Server ansehen, finden Sie 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 sehen Sie 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 Sie WordPress auf Ihrem Server eingerichtet haben, ist bereits eines der WordPress Themes aktiviert. Normalerweise handelt es sich um das Neuste aus der „WordPress eigenen“ Theme-Reihe – momentan Twenty Twenty-Three.

Vermutlich werden Sie jedoch ein anderes, besser auf Ihre geplante Website zugeschnittenes, Theme nutzen wollen. Um dieses zu finden, beginnen Sie 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 sehen Sie, welches aktiv ist.

Theme-Suche

Ausgehend davon, dass Sie nicht bei Twenty Twenty-One bleiben möchten, müssten Sie nach einem anderen Theme suchen. Hierzu klicken Sie 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, können Sie einige Filter anwenden, um die Auswahl einzugrenzen.

• Vorgestellt
• Populär
• Neueste
• Favoriten

Darüber hinaus haben Sie die Möglichkeit, nach Funktionen zu filtern. Wenn Sie z. B. einen Blog über Essen & Trinken mit individuellem Logo und Raster-Layout haben möchten, klicken Sie die entsprechenden Funktionen an. Daraufhin zeigt Ihnen WordPress eine Auswahl an WordPress Themes, die Ihre Kriterien erfüllen.

Qualität des WordPress Themes

Nachdem Sie bei Ihrer Suche auf ein in Frage kommendes Theme gestoßen sind, sollten Sie es sich ansehen. Entweder klicken Sie auf Details & Vorschau oder auf Vorschau. Im sich nun öffnenden Fenster finden Sie am linken Rand eine kurze Beschreibung. Des weiteren erhalten Sie einen Eindruck, wie die Startseite in etwa aussehen würde.

Wesentlich › mehr Details sehen Sie direkt bei WordPress.org. Entweder geben Sie in das Suchfeld den Namen des für Sie interessanten WordPress Themes ein. Oder Sie verwenden dieselben Filterfunktionen wie in Ihrem Dashboard. Wenn Sie hier jedoch auf das Theme klicken, erscheint eine ausführlichere Informationsseite.

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

Installation

Am einfachsten ist es, WordPress Themes direkt über Ihr Dashboard zu installieren. Dazu klicken Sie 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 laden Sie Ihr Theme zunächst auf Ihren Computer herunter und speicherst es dort. Anschließend besuchen Sie wieder Ihr Dashboard.

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

Nachdem Sie die zuvor gespeicherte .zip-Datei markiert haben, klicken Sie 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, landen Sie manchmal ebenfalls bei WordPress.org. Meistens jedoch auf der Theme-Homepage des Entwicklers.

Der Vorteil ist, dass Sie noch mehr über das Theme erfahren. Auch bekommen Sie einen besseren Eindruck von den Möglichkeiten, die das Theme bietet.

Des weiteren können Sie 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 Sie unbedingt mit einem Page Builder arbeiten möchten) zu nennen.

Wechsel des Themes

Wie bereits oben angedeutet, können Sie schnell von einem zu einem anderen Theme wechseln. Dazu aktivieren Sie in Ihrem Themes-Fenster einfach ein anderes, bereits installiertes Theme. Auch hier können Sie zuerst die Vorschau-Funktion nutzen, um zu sehen, wie Ihre Startseite aussehen wird.

So problemlos wie es sich anhört, ist es jedoch leider nicht. Denn die Änderungen, die Sie bei Ihrem „alten“ Theme vorgenommen haben, gehen weitestgehend verloren. Infolgedessen müssen Sie alle Anpassungen erneut vornehmen. Außerdem kann es passieren, dass bestimmte Elemente des alten im neuen nicht enthalten sind. Zuletzt passen auch häufig die Bildgrößen nicht, so dass Sie die Abbildungen entsprechend neu optimieren müssten.

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 Sie nicht zumindest über grundlegende CSS- und HTML-Coding-Kenntnisse verfügen, stoßen Sie unter Umständen schnell an die Grenzen des Möglichen. Darüber hinaus erscheint im Footer Ihrer Webseite ein Hinweis auf WordPress und/oder den Theme-Entwickler. Diese Einblendung können Sie auch nicht entfernen.

Wenn Ihnen also die kostenlose Version zu wenig ist, müssen Sie sich das entsprechende Premium Theme besorgen. Dessen Installation erfordert entweder die für WordPress.org beschriebenen Schritte. Oder Sie laden es mittels eines FTP-Clients auf ihren Server hoch.

Zunächst besuchen Sie die Theme-Homepage. Dort erhalten Sie 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. Während Sie bei anderen zusätzlich eine Version für mehrere Website bzw. eine Business-Variante zur Verwendung auf einer unbegrenzten Anzahl von Websites finden.

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

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

Falls Sie sich für die kostengünstigste Variante entscheiden, sollten Sie bedenken, dass Support nicht nur Unterstützung bei Problemen bedeutet. Denn wesentlich wichtiger ist, dass Ihr 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 legen Sie zunächst auf der Homepage des Entwicklers bzw. des Portals ein Konto an. Anschließend entscheiden Sie sich für ein Theme, geben Ihre Zahlungsinformationen an und laden es dann herunter. Genauere Hinweise zum Verfahren finden Sie ebenfalls auf der jeweiligen Homepage.

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

Child Theme

Falls Sie Ihr WordPressTheme über die Premium-Möglichkeiten hinausgehend anpassen möchten, bleibt Ihnen 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 Sie bei der Installation und Einrichtung beachten sollten. Nachdem Sie es in WordPress hochgeladen haben, erscheint es wie alle anderen installierten Themes im Themes-Fenster.

Dort aktivieren Sie es, wie Sie es zuvor mit dem Eltern-Theme getan haben. Anschließend ist das Eltern Theme zwar nicht mehr als Aktiv markiert, bleibt es aber trotzdem, nur eben im Hintergrund. Deshalb dürfen Sie dieses nicht deinstallieren.

Denn wenn Ihre Website aufgerufen wird, lädt der Browser, vereinfacht gesagt, alle Funktionen des Eltern-Themes, lässt aber die von Ihnen überschriebenen weg. Stattdessen nutzt er die veränderten / neuen Codes Ihres Child-Themes. Falls der Entwickler später das Eltern-Theme aktualisiert, bleiben Ihre Ä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

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