Tutorial: Eigenes WordPress-Theme erstellen

by Carsten 2/08/2011 | 10:12 1 Posted in PHP, Tutorials, Webdesign, Wordpress

In dem heutigen Gastartikel erklärt Maximilian Schmitt anschaulich wie Ihr Euer erstes eigenes WordPress-Theme selber erstellen könnt.

Hierbei behandelt er alle grundlegenden Befehle und Strukturen, die hierfür nötig sind. Viel Spaß!

Der Tutorial-Autor

Mein Name ist Maximilian Schmitt und ich betreue für Macks it! Media mehrere Webseiten in verschiedenen Nischen, die allesamt mit eigenen Themes auf WordPress-Basis arbeiten.

Carsten war so nett, mir die Möglichkeit gegeben zu haben, heute für dich einen Gastartikel in seinem Blog schreiben zu dürfen. Vielen Dank dafür. 🙂

Standard-Wordpress-Dateien

Legen wir los. Um ein funktionstüchtiges Theme zu erstellen, benötigst du fünf Dateien:

style.css
header.php
index.php
sidebar.php
footer.php

style.css

In dieser Datei nimmst du alle CSS-Definitionen vor. Wichtig ist vor allem, dass du sie nicht anders benennst, weil WordPress immer eine style.css-Datei in deinem WordPress-Theme erwartet.

Dennoch gehen wir heute nicht genauer auf diese Datei ein, weil es heute nur um die technischen Aspekte und Anforderungen an ein WordPress-Theme geht.

header.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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>
		<?php wp_title('-',true,'right'); ?>
		<?php bloginfo('name'); ?>
	</title>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> Feed" href="<?php bloginfo('rss2_url'); ?>" />
	<?php wp_head(); ?>
</head>
<body>
	<h1><?php bloginfo('name'); ?></h1>

Das ist die header-Datei – auf‘s Allernötigste beschränkt. Unser Seitentitel wird dynamisch generiert – je nachdem, ob wir einen Blogpost lesen, uns auf einer statischen Seiten oder auf der Homepage befinden.

Auch unsere CSS-Datei wird per PHP ausgelesen. Zudem geben wir eine Pingback- und eine RSS-Feed-URL an.

Wichtig ist die Funktion „wp_head();“, die ich vor dem abschließenden </head>-Tag eingefügt habe. Diese erlaubt es WordPress, in Headerinformationen einzugreifen, was für sehr viele Funktionalitäten und Plugins gebraucht wird.

Anschließend öffnen wir den Body-Bereich unserer Webseite und geben den Blognamen in <h1>-Tags aus. Das ist erster Linie rein exemplarisch. Aus SEO-Sicht wirst du vielleicht etwas anderes in <h1>-Tags schreiben wollen.

index.php

Die index.php ist der zentrale Schaltpunkt unseres Themes. Die minimalsten Anforderungen an den Code sehen so aus:

<?php get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
	<h2><a href="<?php the_permalink(); ?>" title="Permalink zu <?php the_title(); ?>"><?php the_title(); ?></a></h2>
	<div class="content">
		<?php the_content(); ?>
	</div>
<?php endwhile; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Damit binden wir die header.php ein und geben Blogposts mit Titel und Inhalt aus. Falls wir uns auf einer statischen Seite befinden, wird der Inhalt der Seite ausgegeben. Diese index.php funktioniert auch für die Ansicht einzelner Blogbeiträge, Kategorien- und Archiv-Seiten, Suchergebnisse und mehr.

Anschließend binden wir Sidebar und den Footer ein. Diese Templates wollen wir jetzt angehen.

sidebar.php

<ul>
		<?php wp_list_categories(); ?>
		<?php wp_list_pages(); ?>
</ul>

Diese sidebar.php-Datei gibt uns unsere Blogkategorien und statischen Seiten als Listen aus. Selbstverständlich sind die Funktionen an sich noch extrem anpassungsfähig, wenn man die Parameter kennt. Hier hilft einem am besten die WordPress-Dokumentation weiter, die einem mit ausführlichen Beispielen jede Eigenheit jeder Template-Tags erklärt.

footer.php

<?php wp_footer(); ?>
</body>
</html>

So karg sieht unsere footer.php aus. Vergiss nicht: wir arbeiten mit Minimal-Anforderungen, um eine passende Vorlage für jedes WordPress-Theme zu schaffen. Vielleicht willst du hier noch einen Copyright-Hinweis einfügen oder ein WordPress-Menü einbauen.

In der Theorie ist die Entwicklung unseres Themes nun abgeschlossen. Wir speichern alle Dateien in einem Ordner und laden diesen in das Verzeichnis /wp-content/themes/ in deiner WordPress-Installation hoch.

Anschließend aktivieren wir das Theme im Admin-Backend. Voila, geschafft. 🙂

Grundtheme erweitern

Nun muss ich zugeben, dass dieses Theme in der Praxis wohl nur sehr wenigen Ansprüchen gerecht wird. Ich nutze aber beispielsweise fast identischen Code – gut, hier und da noch ein div-Tag (dafür keine Sidebar) – für klassische Landingpages.

Klar, du musst dich gut mit PHP, HTML und CSS auskennen, um von Hand ein funktionstüchtiges und elegantes Theme zu schreiben. Wenn das auf dich zutrifft, würdest du dir nun folgende Dateien vornehmen wollen:

single.php – die Template-Datei für einzelne Blogbeiträge
page.php – die Template-Datei für statische Seiten
functions.php – hier kannst du dein Theme z.B. menüfähig machen oder die Admin-Bar ein-/ausblenden
comments.php – füge deinem WordPress Kommentarfunktionen hinzu
category.php – Template-Datei für Kategorie-Seiten
archive.php – Template-Datei für Archiv-Seiten
404.php – Falls man nicht findet, was man sucht oder auf einen fehlerhaften Link geklickt hat
search.php – Suchergebnisse der hauseigenen WordPress-Suchfunktion

Als Referenz, wie man solche Seiten aufbaut, kannst du immer das WordPress-Standardtheme zur Hand nehmen, auch wenn es mittlerweile recht komplex geworden ist.

Zum Schluss

Ich freue mich, dass du mir diese paar Minuten deiner Aufmerksamkeit geschenkt hast. Du wirst es nicht bereuen, zu lernen, wie man WordPress-Themes entwickelt, denn bald wirst du fast jede Webseite auf WordPress-Basis aufbauen können und dann in den Genuß kommen, den schnellen, sicheren, freundlichen WordPress-Kern in den Mantel deines eigenen Designs wickeln zu dürfen.

An dieser Stelle hat mir Carsten freundlicherweise erlaubt, ein eigenes Projekt zu nennen, das mit WordPress aufgebaut wurde. Es ist ein Gitarrenportal, das „halt auch“ einen Blog hat. Ich setze mit der Macht der WordPress-Template-Tags Gitarrenkurse und Ressourcen-Seiten um. Vielleicht schaust du mal vorbei: Gitarre spielen lernen

Wenn Du auch einen Gastartikel auf „Der Softwareentwickler Blog“ veröffentlichen möchtest, dann melde Dich unter info[at]der-softwareentwickler-blog.de

Carsten

Carsten ist seit mehreren Jahren als Spieleentwickler und Softwareentwicklung tätig. Er ist Gründer von hummelwalker.de und Autor des Buches "Spiele entwickeln mit Unity".

Comments

Jörg Hinrichs 10/08/2011 | 12:34

Hallo Maximilian,

ich habe auch vor kurzem ein eigenes Theme für WordPress gebaut, weil ich das Design aus meiner kommerziellen Website übernehmen wollte. Ich benutze WordPress 3.1 und fand die admin-Bar eigentlich ganz praktisch. Leider hat sie mir mein Design ein bisschen zerschossen, weil sie im Content-Bereich einen Rand einrichtet, im übrigen Hintergrundbereich aber nicht.
Daraufhin habe ich eine Reihe von php-Bedingungen eingefügt, die letzten Endes nichts anderes tun als das Stylesheet auszutauschen, wenn ein User angemeldet ist (nur dann wird die admin-Bar angezeigt). So richtig schön finde ich das aber nicht :???:.
Muss das wirklich sein oder gibt es da noch einen besseren Workaround?

Viele Grüße

Jörg Hinrichs