Anzeige
Anzeige
UX & Design
Artikel merken

In wenigen Schritten zum individuellen Blog-Design: Eigene WordPress-Themes entwickeln

WordPress wurde nicht zuletzt auf Grund seiner einfachen Bedienbarkeit zu einem der populärsten Blog-Systeme. Es lässt sich schnell und unkompliziert installieren und dank zahlreicher Plugins und Themes anpassen. Ebenso einfach ist es, ein eigenes Theme für WordPress zu schreiben.

7 Min. Lesezeit
Anzeige
Anzeige

Wer ein Theme für WordPress sucht, steht vor der Qual der Wahl. Zahlreiche Quellen [1] bieten eine beachtliche Auswahl von Themes an. Seit Version 2.8 von WordPress können Anwender direkt im Backend nach Themes suchen und diese automatisch installieren. Eine Alternative zu Themes von der Stange: ein eigenes Theme schreiben. Hierfür sind keine PHP-Kenntnisse nötig.

Themes, Templates & Dateien

Anzeige
Anzeige

Oft werden die Begriffe Theme und Template im Zusammenhang mit WordPress synonym verwendet, obwohl es einen deutlichen Unterschied gibt. Das führt zu Missverständnissen – eine schlechte Grundlage für die Entwicklung eines eigenen Themes. Was ist also ein Theme, was ein Template und was sind Template-Dateien?

Template
Ein Template ist ein logisch zusammenhängender Block von PHP-Code, der
eine bestimmte Aufgabe erfüllt.
Template-Datei
Die Template-Datei besteht aus einem oder mehreren Blöcken von Code
(Templates). Innerhalb der Template-Datei können weitere
Template-Dateien eingebunden werden.
Theme
Ein Theme ist eine Sammlung von Dateien, also Templates und
CSS-Dateien, aber auch Grafiken, die das Erscheinungsbild des Weblogs
beeinflussen. Durch das Zusammenspiel der einzelnen Dateien und der
Anweisungen in den Templates wird die Ausgabe der Inhalte im Frontend
von WordPress festgelegt.

Schnelleinstieg in die Theme-Erstellung

Beim Stöbern im Installationsverzeichnis von WordPress stößt man auf den Ordner „themes“, der sich im Verzeichnis „wp-content“ befindet. In diesem Ordner liegen alle Themes, die im Rahmen der WordPress-Installation verfügbar sein können, sofern sie die Mindestvoraussetzungen an ein Theme erfüllen. Dabei besteht jedes Theme aus einem Ordner und einer Datei oder mehreren Dateien. Neue Themes werden immer im Ordner „themes“ installiert.

Anzeige
Anzeige

Wenn man im Themes-Verzeichnis einen neuen Ordner anlegt, ist bereits der erste Schritt zur Erstellung eines eigenen Themes gemacht. Dabei sollte der Ordner einen eindeutigen Namen (ohne Umlaute und Sonderzeichen) haben. Bereits in diesem frühen Stadium wird das Theme im Backend von WordPress als Theme erkannt und angezeigt. Allerdings fehlt noch ein weiterer Grundstein auf dem Weg zum eigenen Theme, denn WordPress warnt mit einer Fehlermeldung, dass das Theme beschädigt ist. Das liegt daran, dass im Theme benötigte Elemente noch nicht vorhanden sind. Für WordPress besteht ein Theme immer aus mindestens zwei Dateien:

Anzeige
Anzeige
  • index.php
  • style.css
Die Auswahl an fertigen WordPress-Themes ist zwar riesig, doch oft erfüllt nur ein eigenes Thema sämtliche Wünsche.

Die Auswahl an fertigen WordPress-Themes ist zwar riesig, doch oft erfüllt nur ein eigenes Thema sämtliche Wünsche.

Werden diese beiden Dateien in dem gerade erstellten Ordner angelegt, erkennt WordPress das Theme und es lässt sich im Backend aktivieren. Da die beiden Dateien derzeit noch keinen Inhalt haben und von WordPress nur auf Grund ihres Namens erkannt werden, ist das Ergebnis beim Aufruf des Blogs mit dem frisch erstellten Theme mit einer weißen Seite ernüchternd. Wird in der Datei „index.php“ zum Beispiel „Hallo Welt“ hineingeschrieben, so zeigt WordPress genau diesen Satz an ohne weitere Formatierung. Fügt man innerhalb der gleichen Datei einen PHP-Befehl ein, so führt WordPress diesen Befehl aus.

PHP
<?php echo 15+27; ?>

Listing 1

Innerhalb einer Template-Datei lassen sich HTML und PHP beliebig miteinander kombinieren. Gerade das ermöglicht einen sehr flexiblen Aufbau eigener Themes. Man sollte unbedingt verstehen, wie WordPress mit Themes umgeht, denn ein Theme wird nicht eingelesen und verarbeitet, sondern direkt an das Frontend weitergereicht. Sämtliche Bestandteile einer Blogseite müssen somit innerhalb eines Themes vorhanden sein. Das gilt auch für den HTML-Header, der nicht eigens von WordPress erstellt wird. Soll ein Theme ein vollständiges HTML-Dokument erzeugen, muss dies in den Dateien des Themes gelöst werden.

Anzeige
Anzeige

Funktionsweise eines Themes

Ein WordPress-Theme besteht aus einem HTML-Gerüst, das über PHP-Anweisungen mit Inhalt gefüllt wird. Dabei wird das gesamte Ergebnis über CSS in Form gebracht. Was dann im Frontend zu sehen ist, demonstriert das Default-Theme von WordPress. Das Verzeichnis des Themes enthält diverse Dateien, die einzelne Aspekte des Blogs abdecken.

Neben diesen Dateien, die die Funktionslogik eines Themes enthalten, finden sich Style-Dateien und ein Ordner mit Grafiken und Dateien, die für die Lokalisierung eines Themes benötigt werden. Abgerundet wird ein Theme durch die Datei „screenshoot.png“, die im Backend von WordPress ein Thumbnail des Themes anzeigen soll. Zentraler Eintrittspunkt eines Themes ist stets die Datei „index.php“. Sofern neben der Datei „style.css“ keine weiteren Dateien im Ordner des jeweiligen Themes vorhanden sind, erwartet WordPress, dass sämtliche Darstellungsmöglichkeiten des Blogs von „index.php“ geregelt werden.

Damit bei der Entwicklung eines Themes nicht jedes Mal das Rad neu erfunden werden und die Abfrage der Datenbank von WordPress mühsam mittels eigenem PHP-Code erfolgen müssen, stellt WordPress eine ganze Reihe von vorgefertigten, leicht zu konfigurierenden Funktionen und Methoden zur Verfügung, die so genannten Template-Tags [2]. Diese Template-Tags lassen sich innerhalb eines Themes verwenden und sorgen für die Anzeige der Inhalte, die dann mittels HTML und CSS gestaltet werden können.

Anzeige
Anzeige

Dateien eines Themes

Auch wenn sich ein Theme mit lediglich zwei Dateien erstellen lässt, ist es übersichtlicher, unterschiedliche Elemente und Funktionen einer Seite in separate Dateien auszulagern. WordPress kennt bereits einige Dateien, die sich einbinden lassen, ohne dass dafür explizit der Pfad zur Datei angegeben werden muss. Drei dieser besonderen Dateien sind „header.php“, „sidebar.php“ und „footer.php“. Die Namen der Dateien liefern einen Hinweis darauf, für welchen Zweck sie gedacht sind. Werden diese Dateien innerhalb des Themes-Ordners angelegt, lassen sie sich mittels des entsprechenden Template-Tags in der „index.php“-Datei einbinden:

PHP
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Listing 2

Wenn die Reihenfolge der Template-Tags im Theme geändert wird, bindet WordPress die Dateien entsprechend dieser neuen Reihenfolge ein. Neben den bereits vorgestellten drei Include-Tags gibt es noch eine vierte Anweisung, mit der üblicherweise Kommentare in einem Theme eingebunden werden:

PHP
<?php get_comments(); ?>

Listing 3

Wie bei den vorangegangenen Tags gilt auch hier, dass damit vorerst nur eine Datei eingebunden wird. Für die tatsächliche Darstellung der Kommentare sind weitere Template-Tags notwendig. Sofern noch weitere Dateien eingebunden werden sollen, muss dies über eine reguläre include-Anweisung in PHP erfolgen. WordPress stellt dabei den relativen Pfad zum Theme in Form der Konstante
TEMPLATEPATH zur Verfügung:

Anzeige
Anzeige
PHP
<?php include (TEMPLATEPATH . "example.php"); ?>

Listing 4

Voraussetzung für die erfolgreiche Einbindung ist dabei, dass sich die Datei im Verzeichnis des aktuell aktiven Themes befindet. Sollte es notwendig sein, eine Datei außerhalb des Theme-Ordners einzubinden, stellt WordPress auch dafür eine Konstante zur Verfügung:

PHP
<?php include(ABSPATH . "wp-content/plugins/example/functions.php"); ?>

Listing 5

Auf diese Vorgehensweise sollte jedoch nach Möglichkeit verzichtet werden – insbesondere dann, wenn das fertige Theme öffentlich zur Verfügung gestellt werden soll.

Die Loop

Ein zentraler Teil jedes WordPress-Themes ist die so genannte Loop. Diese Abfrageschleife dient der Darstellung der Inhalte aus der Datenbank. Eine ganze Reihe von Template-Tags funktioniert ausschließlich innerhalb der Loop. Eine Minimalvariante der Loop sieht folgendermaßen aus:

Anzeige
Anzeige
PHP
<?php if (have_posts()) : ?>
		<?php while (have_posts()) : the_post(); ?>
		<?php the_content(); ?>
		<?php endwhile; ?>
<?php endif; ?>

Listing 6

Neben dem eigentlichen Beitragsinhalt, der mittels „the_content()“ ausgegeben wird, lassen sich per Template-Tag weitere Informationen ausgeben, wie zum Beispiel der Titel des Blogbeitrags mittels „the_title()“ und „the_time()“. Bei letztgenanntem Tag sollte man jedoch wissen, dass dieser Datum und Uhrzeit so ausgibt, wie sie in den Konfigurationseinstellungen von WordPess festgelegt wurden. Alternativ kann ein anderes Format [3] angegeben werden.

Bereits mit diesen wenigen Zeilen ist das WordPress-Theme lauffähig. Die Loop holt über das Template-Tag „the_content()“ den Inhalt der aktuellen Beiträge aus der Datenbank. Schaut man sich bei einem Aufruf des Blogs im Frontend den Quelltext der Ausgabe an, ist zu erkennen, dass WordPress formatiertes HTML ausgibt. Die einzelnen Formatierungsoptionen stehen dabei im WYSIWYG-Editor von WordPress zur Verfügung.

Ein vollständiges HTML-Dokument

Damit das Theme auch ein vollständiges und valides HTML-Dokument ausgibt, muss es noch etwas erweitert werden. Zunächst erfolgt die Anpassung der Datei „header.php“:

Anzeige
Anzeige
PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" />
   <head>
      <meta http-equiv="Content-Type"
            content="text/html; charset=utf-8" />
      <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
            type="text/css" media="screen" />
      <title>WordPress-Buch-Basis-Theme</title>
   </head>
   <body>

Listing 7

Durch den Template-Tag „bloginfo“ mit der Option „stylesheet_url“ wird die CSS-Datei des Themes, also „style.css“, eingebunden. Als nächstes wird das Ende des HTML-Dokuments in der Datei „footer.php“ angelegt:

HTML
   </body>
</html>

Listing 8

Eingebunden werden beide Dateien in der„index.php“, sodass sich der Inhalt der Loop im Body-Bereich des HTML-Dokuments befindet. Die vollständige Datei „index.php“ sieht jetzt folgendermaßen aus:

PHP
<?php get_header(); ?>
<?php if (have_posts()) : ?>
		<?php while (have_posts()) : the_post(); ?>
		<?php the_content(); ?>
		<?php endwhile; ?>
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Listing 9

Stylesheet

Die im Header eingebundene Stylesheet-Datei wurde zwar eingebunden, entspricht aber noch nicht den formalen Vorgaben. Damit WordPress das Theme im Backend nicht nur erkennt, sondern auch noch zusätzliche Metainformationen anzeigt, muss die Datei „style.css“ erweitert werden. Die notwendigen Informationen werden dabei in einem Kommentarblock hinterlegt. Dabei sollte darauf geachtet werden, die passenden Schlüssel innerhalb des Kommentarbereichs zu verwenden, da WordPress die Werte andernfalls nicht auslesen kann. Im Anschluss an die offiziellen Schlüssel kann der Block durch weitere Informationen ergänzt werden.

Anzeige
Anzeige
CSS
/*
Theme Name: Name des Themes
Theme URL: URL, unter der es Informationen zum Theme gibt
Description: eine kurze Beschreibung
Version: die Versionsnummer Ihres Themes
Author: Name des Autors
Author URL: URL des Autors
Tags: Tags zu diesem Theme

	Zusätzliche Informationen, Danksagungen oder Lizenz-Infos.
*/

Listing 10

Fazit

In diesem Artikel haben Sie anhand eines einfachen Beispiels erfahren, auf was Sie bei der Erstellung eines eigenen WordPress-Themes in Bezug auf den grundlegenden Aufbau achten müssen. Mit diesem Rüstzeug sollte es gelingen, eigene Themes für WordPress zu entwickeln [4]. Der Kreativität sind dabei dank der Flexibilität von WordPress fast keine Grenzen gesetzt.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
3 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Internetagentur Netshake

Was ist der Sinn eines Onlineteasers wenn man den Inhalt nicht ansehen kann?

Antworten
Max

Sehe ich auch so wie mein Vorgänger. Was soll das?
Man sucht unter Google – findet „Eigene WordPress-Themes entwickeln“
und dann soll man kaufen.

Antworten
Jan Tißler

Der Sinn des Teasers ist vor allem, dass die Leser des Magazins eine Möglichkeit haben, über die Inhalte des Artikels zu diskutieren und direkte Fragen an den Autor zu stellen. Das ist also ein zusätzlicher Service zum gedruckten Heft.

Daneben ist der Teaser natürlich auch eine Werbung für unser Heft – logisch.

Die gute Nachricht ist: Wir stellen alle Artikel nach und nach kostenlos online. Mit vielen hundert Beiträgen haben wir das schon getan. Wann genau das mit diesem Beitrag der Fall sein wird, kann ich allerdings noch nicht sagen.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige