Codeschnipsel für die Erstellung von WordPress Themes
Wie meine Stammleser wissen, schreibe ich von Zeit zu Zeit immer neue Themes für mein WordPress. Bei der Erstellung der Themes haben sich Funktionen gezeigt, die man für fast jedes Theme benötigt. Hiermit gebe ich also eine kleine Auswahl an Codeschnipseln, die ich immer wieder verwende.
Zunächst einmal möchte ich erwähnen, dass ich hier nicht die WordPress-Dokumentation ablösen möchte. Die vorgestellten Funktionen besitzen meist noch viele weitere Parameter. Zu diesem Zweck habe ich jeweils die Dokumentationen der verwendeten Funktionen oder weiterführende Seiten verlinkt.
Grundgerüst
Als Minimum für ein WordPress Theme muss man eine index.php und eine style.css anlegen. Da ich leider noch keine Zeit hatte, mich mit HTML5 auseinanderzusetzen, lege ich meinen Fokus noch auf XHTML 1.0 Strict. Meine index.php umfasst nicht nur die notwendigen XHTML-Angaben, sondern auch die Newsfeeds, das Stylesheet und die Pingback-Adresse. Zudem werden die Methoden wp_head() und wp_footer() benötigt, damit WordPress an den jeweiligen Stellen automatisch Code einfügen kann. Das ist vor allem für diverse Plugins wichtig.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes('xhtml'); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title(); ?></title>
<link rel="alternate" type="application/rss+xml" title="Artikel (RSS)" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/rss+xml" title="Kommentare (RSS)" href="<?php bloginfo('comments_rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<!-- Hier die Seitenausgabe -->
<?php wp_footer(); ?>
</body>
</html>
Die style.css muss am Anfang wichtige Angaben über das Theme enthalten, damit du es nutzen kannst:
/* Theme Name: Name des Themes Theme URI: Die URL zum Theme (z.B. deine Webseite) Description: Eine Kurzbeschreibung des Themes Version: Versionsmummer Author: Dein Name Author URI: Die URL deiner Webseite */
Dokumentation: Theme Development, language_attributes, bloginfo, wp_title, wp_head, wp_footer
Theme aufsplitten
Damit das Theme übersichtlich bleibt, solltest du am Besten nicht alles in die index.php packen, sondern dein Theme in mehrere Dateien aufsplitten. In die Datei header.php schreibst du alles, was auf sämtlichen Seiten oben eingebunden werden soll. Die footer.php sollte alles beinhalten, was am Ende der Seite immer mit eingebunden werden soll. Des Weiteren kannst du die Sidebar in die Datei sidebar.php auslagern. Um diese Elemente später einzubinden, benötigst du folgende Funktionen:
<?php // header.php einbinden get_header(); // sidebar.php einbinden get_sidebar(); // footer.php einbinden get_footer(); ?>
Deine index.php könnte demnach so aussehen (vorausgesetzt, die Seitenleiste soll rechts neben dem Inhalt eingebunden werden 
):
<?php get_header(); ?> <!-- Hier gibst du den Inhalt aus --> <?php get_sidebar(); get_footer(); ?>
Weiterhin gibt es viele Dateien, die automatisch für einen bestimmten Zweck bestimmt sind. So kümmert sich zum Beispiel die Datei single.php um die Ausgabe einzelner Artikel, die Datei page.php um die Anzeige einer Seite, die Datei search.php um die Darstellung von Suchergebnissen und die Datei 404.php um die Darstellung des Fehler 404 (Seite nicht gefunden). In den einzelnen Dateien musst du dann ebenfalls die gerade vorgestellten Codeschnipsel einsetzen (zumindest get_header() und get_footer() – wenn du auf bestimmten Seiten keine Seitenleiste einbinden möchtest).
Dokumentation: Theme Development, get_header, get_sidebar, get_footer
“Die Schleife”
Zum Ausgeben von Artikeln oder Seiten verwendest du die weitreichend in der WordPress Dokumentation erwähnte Loop:
<?php if(have_posts()) : while(have_posts()) : the_post(); ?> <!-- Hier den Inhalt ausgeben --> <?php endwhile; else : ?> <!-- Ausgabe, falls kein Artikel oder Suchergebnis vorhanden --> <?php endif; ?>
Dokumentation: The Loop
Daten ausgeben
Natürlich bringt dir die Schleife alleine nichts, sondern es müssen auch Inhalte ausgegeben werden. Hier stehen eine Vielzahl an Möglichkeiten zur Verfügung. Ein paar Beispiele gebe ich hier, weitere Funktionen findest du in der WordPress Dokumentation.
<?php
// Titel des Artikels
the_title();
// Link zum Artikel
the_permalink();
// Inhalt des Artikels ausgeben. Per Parameter kann der Text für den "weiterlesen"-Link übergeben werden.
the_content('? weiterlesen');
// Veröffentlichungsdatum des Artikels; Formatierung equivalent zu der date() Funktion in PHP
get_the_date('d.m.Y');
// Kommagetrennte Ausgabe der Kategorien
the_category(', ');
// Anzahl Kommentare mit direktem Link zum Kommentar-Abschnitt des Artikels
comments_popup_link('Keine Kommentare', 'Ein Kommentar', '% Kommentare', 'comments-link', 'Kommentare deaktiviert');
// Angemeldete Benutzer, die den Artikel bearbeiten dürfen, bekommen einen "Bearbeiten-Link" angezeigt
edit_post_link('bearbeiten');
?>
Dokumentation: the_title, the_permalink, the_content, get_the_date, the_category, comments_popup_link, edit_post_link
Kommentare ausgeben
Ein wesentlicher Bestandteil von Blogs sind natürlich die Kommentare. Um diese in dein Theme einzubinden, nutzt du folgenden Codeschnipsel:
<?php comments_template(); ?>
Damit bindest du die von WordPress vordefinierte Kommentarausgabe ein, es sei denn, du hast bereits eine Datei namens comments.php für dein Theme angelegt.
Dokumentation: comments_template
Individuelle Navigation
Seit WordPress 3 können individuelle Navigationen angelegt werden. Zunächst muss man dafür eine oder mehrere Navigationen registrieren. Um eine Navigation zu registrieren, schreibst du folgendes in die functions.php:
<?php register_nav_menu('navigation', 'Navigation'); ?>
Benötigst du mehrere Navigationen, schreibst du folgendes:
<?php
register_nav_menus(
array(
'navigation_oben' => 'Navigation oben',
'navigation_rechts' => 'Navigation rechts'
)
);
?>
Um die Navigationen einzubinden, brauchst du dann folgenden Codeschnipsel bei einer Navigation:
<?php wp_nav_menu(); ?>
Bei mehreren Navigationen musst du den Namen der Navigation mit angeben:
<?php wp_nav_menu(array('menu' => 'Navigation oben')); ?>
Dokumentation: register_nav_menu, register_nav_menus, wp_nav_menu
Seitenleisten
Um Seitenleisten einzubinden, musst du auch hier erst einmal Seitenleisten in der functions.php registrieren. Seitenleisten ist inzwischen nicht mehr ganz korrekt, da man diese Funktion auch gerne mal im Fußteil einer Webseite benutzt, aber man ist ja kreativ Für jede zu registrierende Seitenleiste gibst du folgenden Code ein:
<?php register_sidebar('name=Seitenleiste'); ?>
Einbinden kannst du die Seitenleisten dann wie folgt:
<?php dynamic_sidebar('Seitenleiste'); ?>
Dokumentation: register_sidebar, dynamic_sidebar
Artikel mit mehreren Seiten
Manche Artikel sind auf mehrere Seiten verteilt. Damit die Besucher auch zu den weiteren Seiten navigieren können, benutzt du folgenden Codeschnipsel:
<?php wp_link_pages(); ?>
Dokumentation: wp_link_pages
Artikel-Thumbnails
Wer Artikel-Thumbnails ausgeben möchte, muss zunächst die Funktion in der functions.php aktivieren:
<?php add_theme_support('post-thumbnails'); ?>
Um die Thumbnails dann anzuzeigen, brauchst du folgenden Codeschnipsel:
<?php the_post_thumbnail(); ?>
Dokumentation: add_theme_support, the_post_thumbnail
Suchfeld
Um ein Suchfeld in dein Design einzubinden, brauchst du folgende Funktion:
<?php get_search_form(); ?>
Damit wird die Standardsuche eingebunden. Möchtest du ein eigenes Suchformular einbinden, musst du eine Datei namens searchform.php anlegen.
Dokumentation: get_search_form
jQuery einbinden
Wer jQuery für sein Theme benötigt, sollte dies automatisch durch WordPress einbinden lassen:
<?php wp_enqueue_script('jquery'); ?>
Dokumentation: wp_enqueue_script
Verbesserungsvorschläge und Kritik
Ich hoffe, dass dieser Artikel dem ein oder anderen beim Erstellen von WordPress-Themes weiterhelfen kann. Falls noch Fragen auftreten, oder ihr positive als auch (hoffentlich keine) negative Kritik äußern möchtet, nutzt doch bitte die Kommentarfunktion
Veröffentlicht am 11.01.2011
Niljuha schrieb am 11. Januar 2011
WordPress Themes sind super geil. Danke für deinen Artikel. Ich hab mir sowas ähnliches mal woanders zugemüte geführt, werde deinen Artikel aber auf alle Fälle demnächst nochmal gründlich wälzen, damit ich Theme mäßig vielleicht auch mal was anständiges eigenes auf die Beine kriege
.
Thomas schrieb am 11. Januar 2011
Fehlt nur noch ein abschließendes Tutorial-Theme zum Download, damit sich der Retweet auch gelohnt hat
Patrick schrieb am 11. Januar 2011
Dazu kannst du dir ja das Twenty Ten Theme als Vorlage nehmen, da sollte auch alles drin verbaut sein
Thomas schrieb am 12. Januar 2011
Bevor ich mir ein neues Theme zulege, warte ich lieber auf ein HTML5-Tutorial
Tobi schrieb am 12. Januar 2011
Wenn du mal Zeit hast könntest du evtl. nen Artikel schreiben, was man beim Einsatz von WordPress als CMS beachten sollte bzw. ein paar nützliche Plugins dazu vorstellen.
Patrick schrieb am 12. Januar 2011
Kann ich demnächst mal in Angriff nehmen, wenn wieder viel Zeit zur Verfügung steht. Habe die E-Mail-Benachrichtigung für deinen Kommentar mal als wichtig markiert
Tobi schrieb am 14. Januar 2011
Super, danke schonmal!
Gernot schrieb am 7. April 2011
Hallo
Super Artikel der auf verständliche Weise beschreibt wie man sich WordPress zu Nutze machen kann.
Weiter So
Grüsse aus dem Glockenturm.
Gernot
auch Patrick schrieb am 25. April 2012
Wow!!!! Cool, soviel wissenswertes auf so kleinem Platz! Ich fühl mich schon fast bereit “hatch” an meine Bedürfnisse anzupassen. Sorry übrigens für den schrecklichen Link in meinem anderen Kommentar.
Dass kommt, wenn man jahrelang mit Java Desktop Applikationen entwickelt – man verliert das Wissen über Dinge die man mal kannte und die wichtig sind. Wie z.B. HTML :-} Sorry!
und nochmal vielen Dank
Patrick