Theme Entwicklung

Der folgende Artikel beschreibt das Erstellen eines neuen WordPress Themes. Mehr über das Installieren und Anwenden von Themes erfährst du auf Themes benutzen.

Einführung

WordPress verfügt über eine ausgereifte Template Engine, die bestehend aus einzelnen PHP- und CSS- Dateien für das Aussehen von WordPress verantwortlich ist. Für die einzelnen Elemente (Kopf der Seite, Navigation, Fußzeile usw.) kann jeweils eine eigene Vorlage erstellt werden. Darüber hinaus kann durch verschiedene Funktion und Tags bestimmt werden, wo was erscheinen soll.

Nur warum sollte man bei der Vielzahl von bestehenden Templates sein eigenes erstellen?

  • Um sein eigenes und ein einzigartiges Aussehen seiner Seite zu haben.
  • Um die WordPress an seine eigenen Anforderungen speziell anzupassen.
  • Um Designs zu erstellen und der WordPress Gemeinschaft zur freien Verfügung zu stellen. Du nutzt ja auch immerhin eine Software, die dir auch frei zur Verfügung gestellt wurde.

Die Nutzung von Themes in WordPress hat natürlich auch einige Vorteile.

  • Es wird zwischen Design und Content unterschieden. d.h. egal welcher Content und welche WordPress Version installiert ist (bis auf einige Abweichungen) wird die Optik der Seite nicht beeinflussen. Dadurch können auch Updates der Software erfolgen, ohne Auswirkungen auf das Design.
  • Es gibt die Möglichkeit spezielle Anforderungen an eine Webseite hinzuzufügen.
  • Es erlaubt schnelle und einfache Eingriffe in das Design.
  • WordPress Betreiber müssen nicht zwingend CSS, HTML, und PHP können und eine gut aussehende Webseite zu erstellen.

Es bringt einem selbst aber auch Vorteile ein eigenes Theme zu erstellen:

  • Es ist eine Möglichkeit mehr über CSS, HTML/XHTML und PHP zu lernen.
  • Es ist eine Möglichkeit das bestehende Wissen anzuwenden.
  • Man ist kreativ.
  • Es macht Spaß (meistens zumindest).
  • Falls du dich entscheidest, das Theme dann öffentlich anzubieten, ist es ein guter Beitrag zu der WordPress Community. (Sehr gut fürs Ego ;) )

Theme Templates

Es gibt ein paar Basisdateien, die die komplette HTML-Seiten erzeugen. Man erkennt diese Dateien daran, dass sie am Anfang eine <?php get_header(); ?> und am Ende eine <?php get_footer(); ?> Funktion einbinden. Diese Basic Templates “inkludieren” dann weitere Elemente, wie zum Beispiel einen ergänzenden Bereich (sidebar.php) der zum Beispiel als Navigation genutzt werden kann oder bestimmte Layouts in den Kommentaren (comments.php).

Ab der Version 2.0 aufwärts sind das die Dateien

<code>index.php</code>
<code>page.php</code>
<code>single.php</code>
<code>search.php</code>
<code>archive.php</code>

 

Basic Templates

Es ergibt sich dadurch eine ineinander verschachtelte Template Hierarchie. Das minimalistischte Template sollte aber zumindest eine index.php, ein style.css besitzen sowie folgende modularen Templates inkludieren.

header.php
sidebar.php
footer.php
comments.php
comments-popup.php

Eine sehr gute Hilfe ist es erst einmal das Standardtemplate “default” zu kopieren. Die Templates befinden sich unterhalb des Ordners wp-content/themes/. Also erst mal den ganzen Ordner “default” nach “test_template” kopieren. Am Anfang und am Ende der .php Dateien kann man erst mal ein <!--templatename.php--> einfügen. So sieht man später im HTML-Quelltext, an welcher Stelle welches Template geladen wird.

Das default-Template ist im Box-Modell erstellt und die optische Trennung zwischen Navigation und Content wird durch ein sich wiederholendes Hintergrundbild erzeugt. Wer sich mit dem Boxenlayout unsicher ist kann alles sehr detailliert unter http://de.selfhtml.org/css/layouts/index.htm nachlesen.

Innerhalb der einzelnen Templates findet Ihr dann die sogenannten Template Tags. Das sind Funktionen die an der entsprechenden Stelle dynamischen Inhalt ausgeben, wie z.B. den Seitentitel <?php wp_title('sep', display); ?> oder den Autor <?php the_author('idmode', display) ?>. Bestimmt Tags gelten hier für die komplette Seite, andere wiederum nur für den sogenannten Loop, also der Teil im Contentbereich, der in einer Schleife die Übersicht der Artikel aus der Datenbank generiert.

 

Query-based Templates

  • style.css - Das Hauptstylesheet. Es muss in dein Theme mit eingebunden werden.
  • index.php - The main template. If your theme provides its own templates, index.php must be present.
  • comments.php - The comments template. If not present, wp-comments.php is used.
  • comments-popup.php - The popup comments template. If not present, wp-comments-popup.php is used.
  • single.php - The single post template. Used when a single post is queried. For this and all other query templates,index.php is used if the query template is not present.
  • page.php - The page template. Used when a individual or single post page is queried.
  • category.php - The category template. Used when a category is queried.
  • author.php - The author template. Used when an author is queried.
  • date.php - The date/time template. Used when a date or time is queried. Year, month, day, hour, minute, second.
    • year.php - Year template. Used when a year is queried.
    • month.php - Month template. Used when a month is queried.
    • day.php - Day template. Used when a day is queried.
    • time.php - Time template. Used when a time is queried.
  • archive.php - The archive template. Used when a category, author, or date is queried. Note that this template will be overridden by category.php, author.php, and date.php for their respective query types.
  • search.php - The search template. Used when a search is performed.
  • 404.php - Dies ist das 404 Not Found Template. Es wird genutzt, wenn eine Seite nicht gefunden wurde.

Referencing Files From a Template

  • <?php bloginfo('template_directory'); ?> - URL des Template Verzeichnis
  • <?php bloginfo('stylesheet_directory'); ?> -
  • <?php $examplevar=get_template_directory(); ?> - Absoluter Pfad des Template Verzeichnis

 

 

 

Siehe auch