WordPress Themes und Templates | Tutorial Teil 5

Von - 2019-09-12

Für Besucher ist vor allem die Funktionalität einer Webseite wichtig. Deshalb beschäftigt sich Teil 5 meines Tutorials für Anfänger und EU-Blogger mit WordPress Themes.

WordPress Themes
Grafik: eb / Logo: WordPress

Tutorial Teil 5 – WordPress Themes

Im Zusammenhang mit dem Erstellen von Webseiten 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 alle Webseiten. Sie bestimmen, welche Elemente du auf deiner Webseite 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.

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 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 ein Theme aktiviert. Normalerweise handelt es sich um das Neuste aus der „WordPress eigenen“ Theme-Reihe – momentan Twenty Nineteen. Vermutlich wirst du jedoch ein anderes, besser auf deine geplante Webseite 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 siehst du, welches aktiv ist. Einerseits gibt es keine Beschränkung für die Anzahl der heruntergeladenen Themes. Andererseits stellen zu viele inaktive Themes unnötigen Ballast dar. Deshalb reicht eigentlich ein (max. zwei) Ersatz-Theme(s) aus. Falls etwas mit deinem aktiven schief läuft, könntest du so relativ schnell wechseln (s. u.).

Theme-Suche

Ausgehend davon, dass du nicht bei Twenty Nineteen bleiben möchtest, müsstest du nach einem anderen Theme suchen. Hierzu klickst am oberen Rand dieses Fensters auf Hinzufügen (s. Abb. 20). 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 (s. Abb. 21). Zunächst

  • Vorgestellt
  • Populär
  • Neueste
  • Favoriten

Darüber hinaus hast du die Möglichkeit, nach Funktionen zu filtern (s. Abb. 22). 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 Themes, die deine 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 (s. Abb. 23 + 24).

5 Abbildungen

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 das Theme anklickst, erscheint eine ausführlichere Informationsseite. Einerseits findest du 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.

  • Design
  • Themes
  • Hinzufügen
  • Theme hochladen
  • 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 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 Envato Market (Theme Forest) oder aThemes zu nennen.

Wechsel des Themes

Wie bereits oben angedeutet, kannst du 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 gemacht hast, gehen verloren. Infolgedessen muss du 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 du die Abbildungen entsprechend optimieren müsstest.

Ein Wechsel will also gut überlegt sein und du solltest einige Zeit für die Neu-Einrichtung einplanen.

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 unter Umständen 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 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 erhältst du Informationen über den Funktionsumfang sowie die Kosten. Je nach Entwickler gibt es unterschiedliche Pakete. Manche bieten nur eine Pro-Version für eine Webseite an. Während du bei anderen zusätzlich eine Version für mehrere Webseiten bzw. eine Business-Variante zur Verwendung auf einer unbegrenzten Anzahl von Webseiten findest. Darüber hinaus unterscheiden sich die Angebote nicht nur beim Preis, sondern auch hinsichtlich 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 Webseiten, die über einen längeren Zeitraum online bleiben sollen, kein gute Idee.

Verwendung eines Premium Themes

Normalerweise legst du zunächst auf der Homepage 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. Genauere Hinweise zum Verfahren findest du ebenfalls auf der jeweiligen Homepage.

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 erhältst.

Child Theme

Falls du dein Theme ü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. Sobald es sich aber um längere Codes und größere Veränderungen handelt, solltest du ein Child Theme verwenden. Denn eine Änderung in den Original-Dateien hätte u. a. den Nachteil, dass diese bei einem Theme-Update überschrieben würde. Und folglich verschwände.

Die meisten Entwickler bieten den Download eines Child Themes an. Außerdem erklären sie i. d. R. auch, was du bei der Installation und Einrichtung beachten solltest. Nachdem du es in WordPress hochgeladen hast, 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 auch nicht deinstallieren.

Denn wenn deine Webseite 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 neuen Codes deines Child-Themes. Falls der Entwickler das Eltern-Theme aktualisiert, bleiben deine Änderungen im Child-Theme davon unberührt.

WordPress Tutorial weiterlesen …


android apple apps bloggen browser cloud dsl-wlan e-mail foto google internetsicherheit ios macOS meldungen messenger microsoft mobilfunk onlinedienste recht seo social updates windows wordpress

Schreibe einen Kommentar