Codeschnipsel für die Erstellung von WordPress Themes

veröffentlicht am 11. Januar 2011

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

Kommentare

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 ;).

Kommentar #1 von Niljuha am 11. Januar 2011


Fehlt nur noch ein abschließendes Tutorial-Theme zum Download, damit sich der Retweet auch gelohnt hat ;)

Kommentar #2 von Thomas am 11. Januar 2011


Dazu kannst du dir ja das Twenty Ten Theme als Vorlage nehmen, da sollte auch alles drin verbaut sein ;)

Kommentar #3 von Patrick am 11. Januar 2011


Bevor ich mir ein neues Theme zulege, warte ich lieber auf ein HTML5-Tutorial ;)

Kommentar #4 von Thomas 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.

Kommentar #5 von Tobi 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 ;)

Kommentar #6 von Patrick am 12. Januar 2011


Super, danke schonmal!

Kommentar #7 von Tobi am 14. Januar 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

Kommentar #8 von Gernot am 07. April 2011


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

Kommentar #9 von auch Patrick am 25. April 2012


Hinterlasse einen Kommentar