Entwicklung & Design

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

Seite 3 / 4

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:

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:

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“:

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

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

3 Kommentare
Internetagentur Netshake

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

Max
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.

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.