Wordpress Theme selbst erstellen

 

Dieser Artikel beinhaltet alle wichtigen Informationen über die Entwicklung eines WordPress Themes. Es werden die ersten Schritte für Design, Layout und Funktionen beim Bau eines Templates erklärt. In dieser Beschreibung erfahren Sie mehr über die technischen Details der Codierung und der Template-Hirarchie um ein eigenes Theme selbst zu erstellen.

 

Was sind WordPress Themes

WordPress Themes sind Dateien, die benötigt werden, für das Design und die Funktionalität einer WordPress-Seite. Sie bieten viele Möglichkeiten das Aussehen der Webseite zu verändern. Jedes Theme kann unterschiedlich gestaltet werden.

 

Ein WordPress Theme trennt das Design von den System-Dateien, so dass bei einer Aktualisierung des Systems das Design erhalten bleibt. Es ermöglicht eine einzigartige Seitengestaltung.

 

Themes sind im Unterverzeichnis wp-content/themes/. Das Theme-Unterverzeichnis enthält alle benötigten Dateien für Funktionen und Design. Als Beispiel, das Theme mit dem Namen “test”, würde sich im Verzeichnis “wp-content/themes/test” befinden. Es sollten keine Zahlen für den Namen verwendet werden, dies kann zu Fehlern führen. Wordpress enthält bereits bei der Installation ein Standard-Theme. Es kann als Orientierung für ein eigenes Theme dienen.

 

Themes bestehen hauptsächlich aus drei Arten von Dateien. Aus der “style.css” für das Layout, der “functions.php” für zusätzliche Funktionen und den Template-Dateien, die die Informationen aus der Datenbank generieren und an die gewünschte Position bringen. Zusätzlich können noch Dateien für Bilder und JavaScript eingefügt werden.

 

style.css

Das Theme benötigt Informationen, die in der style.css im Kopfbereich in Form von Kommentaren hinterlegt sein müssen. Hier ist der eindeutige Name des Themes definiert. Wenn ein eigenes Theme durch kopieren eines anderen erstellt werden soll, sollte der Name als erstes geändert werden. Zwei Themes mit dem gleichen Namen würden zu einem Problem im Theme-Auswahlfeld führen.

 

Ein Beispiel mit dem Theme-Namen “Mein Theme”. Die Kommentare müssen als erstes vor dem eigentlichen Stylesheet stehen.

 

/*

Theme Name: Mein Theme

Theme URL: http://www.tipps.1st-tec.de/

Description: Mein erstes selbsterstelltes Theme.

Author: Ich

Version: 1.0

*/

 

WordPress benötigt diese Information in der style.css um das Theme identifizieren zu können. Es wird Im Administrations-Bereich unter Design > Themes mit anderen verfügbaren Themes angezeigt.

 

functions.php

Ein Theme kann optional eine Funktions-Datei haben. Diese wirkt wie ein Plugin und wird automatisch geladen.

 

Die functions.php ist für Funktionen die in mehreren Dateien verwendet werden. Funktionen im Admin-Bereich (benutzerdefinierter Header und Hintergrund, Navigationsmenü, Optionsmenü für Farben, Stile und vieles mehr).

 

Template – Dateien

Template-Dateien sind PHP-Quelldateien, die für die HTML-Ausgabe benötigt werden. Sie sind für das Aussehen und die Funktionen zuständig. Es muss mindestens eine “index.php” vorhanden sein. Verschiedene Template-Dateien ermöglichen eine optimale Anpassung.

 

Template Dateien Liste (Special-Template-Dateien)

Diese Dateien haben eine besondere Bedeutung für Wordpress.

 

  • style.css
    Diese Datei muss im Theme vorhanden sein, und die Informationen des Themes im Kopfbereich haben.
  • rtl:css
    Sie wird automatisch benutzt, wenn es sich um eine Seite mit RTL-Richtung handelt.
  • index.php
    Das Haupt-Template
  • comments.php
    Das Kommentar-Template
  • Front-page.php
    Wird nur für eine Statische Start-Seite benutzt.
  • home.php
    Startseite mit den letzten Artikeln.
  • single.php
    Einzelne Artikel
  • page.php
    Für einzelne Seiten
  • category.php
    Wird verwendet, wenn eine Kategorie abgefragt wird
  • tag.php
    wenn ein Tag abgefragt wird.
  • taxonomy.php
    wenn ein Begriff in einem benutzerdefinierten Taxonomie abgefragt wird.
  • author.php
    Wenn ein Autor abgefragt wird.
  • date.php
    Wenn ein Datum oder die Uhrzeit abgefragt wird
  • archive.php
    Wenn eine Kategorie, Autor oder Datum abgefragt wird. Die Datei wird überschrieben von category.php, author.php, date.php
  • search.php
    Wird verwendet, wenn eine Suche durchgeführt wird.
  • attachment.php
    Bei einer einzelnen Anlage.
  • image.php
    Beim Betrachten eines einzelnen Images. Falls nicht vorhanden, wird attachment.php verwendet.
  • 404.php
    Wenn ein Artikel oder eine Seite nicht gefunden wird.

 

Diese Dateien ersetzen die index.php, wenn sie vorhanden sind.

 

 

Als absolutes Minimum besteht ein Theme aus zwei Dateien:

  • style.css
  • index.php

Die index.php kann für sämtliche Funktionen benutzt werden.

 

 

Ein typisches Theme besteht aus weiteren Dateien:

  • comments.php
  • header.php
  • sidebar.php
  • footer.php

Um die Dateien in die index.php einzufügen werden folgende Befehle(template tags) verwendet.

get_header (), get_sidebar (), get_footer (), get_search_form ()

 

Beispiele:

<?php get_sidebar(); ?>

<?php get_footer(); ?>

 

Query-basierte Template-Dateien

Für verschiedene Query(Abfrage)-Typen, kann Wordpress verschiedene Template-Dateien laden. Es gibt zwei Möglichkeiten, als Teil der integrierten Template-Hirarchie, und durch die Benutzung von "Conditional Tags" innerhalb von "The Loop" in einer Template-Datei.

 

Bei der Verwendung der Template Hirarchie wird die index.php automatisch von den Special-Template-Dateien überschrieben. Wenn zum Beispiel die category.php vorhanden ist und eine Kategorie abgefragt wird, wird statt der index.php die category.php verwendet.

 

Die Template-Hirarchie kann erweitert werden wenn man z.B. eine category-3.php hinzufügt. diese Datei wird benutzt, wenn die Kategorie mit der ID-Nummer 3 abgefragt wird. Die ID-Nummer der Kategorien findet man im Admin-Bereich unter Artikel – Kategorien. Bei einer Kategorie auf bearbeiten klicken und es erscheint in der Browser-Adress-Leiste die ID-Nummer. (…=category&post_type=post&tag_ID=3)

 

Will man das Theme noch genauer definieren, können "Conditional Tags" verwendet werden. Das Conditional Tag überprüft, ob eine bestimmte Bedingung erfüllt ist und läd ein dafür zugewiesenes Template oder gibt einen bestimmten Text aus.

 

Ein Beispiel für Beiträge in einer bestimmten Kategorie

<? php

if (is_category('3')) {

    get_template_part ('single2');

} else {

    get_template_part ('single1');

}

?>

 

Oder mit einer Query-Abfrage

<? php

$post = $ wp_query-> post;

if (in_category('3')) {

    get_template_part ('single2'); // Für Beiträge in der Kategorie mit der ID 3

} else {

    get_template_part ('single1'); // Für alle anderen Beiträge

}

?>

 

Query-Bedingungen sind nicht auf Kategorien begrenzt.

 

Mit dem Wordpress-Plugin-System können noch zusätzliche Templates nach eigenen Kriterien erstellt werden. Diese erweiterte Funktion kann mit dem template_redirect “action hook” verwendet werden.

 

Vorlagen in Templates einfügen

Um ein anderes Template in ein bereits vorhandenes Template zu laden, kann “get_template_part()” benutzt werden. (außer header, footer, sidebar, diese Befehle sind vordefiniert wie “get_header()” ).

 

Datei - Pfade

Für Verweise auf Dateien innerhalb des Themes sollten keine Hardcore Urls verwendet werden. Datei-Pfade werden mit “bloginfo()” angegeben.

 

Urls im Stylesheet beziehen sich nicht auf die Seite, sondern auf das Stylesheet. Wenn ein Images-Verzeichnis im Theme existiert, muss in der style.css ,der relative Pfad angegeben werden.

Beispiel:

#header {

    background: url ("images/mein-bild.jpg");

}

 

 

Plugin API Hooks

Ein Theme sollte so entwickelt werden, dass alle Plugins installiert werden können. Plugins erweitern die Funktionalität von Wordpress mit “Action Hooks”.

 

Viele Action Hooks sind im Kern-php-code von Wordpress, so muss nicht jeder spezielle Tag ins Theme eingebaut werden. Ein paar Action Hooks müssen allerdings eingebaut werden, um Plugins zu ermöglichen, Informationen direkt in den header, footer, sidebar oder page body zu schicken.

 

Hier eine Liste der Special Action Hook Template Tags, die eingefügt werden sollten.

  • wp_head()
    In das <head> Element des Themes in der “header.php”. Beispiel: JavaScript, css
  • wp_footer()
    In die footer.php, vor dem schließenden </body>. Beispiel: Für Web-Statistiken, Google Analytics.
  • wp_meta()
    Geht in den  <li>Meta</li> Abschnitt eines Menüs in der sidebar.php.
  • comment_form()
    Für die comments.php, vor dem schließenden “</form>”. Beispiel-Plugin: Anzeige einer Kommentar-Vorschau.

 

Klassen

Bei der Implementierung der folgenden Template-Tags generiert Wordpress Klassen für Body, Post und Kommentar. Post-Klassen gelten nur für Elemente innerhalb “The Loop”.

 

Template Datei Checkliste

Bei der Entwicklung eines Themes, können anhand der folgenden Standards , die Template-Dateien überprüft werden.

 

Document Head - header.php

  • Verwendung des richtigen DOCTYPE.
  • Das Öffnen des <html> mit language_attributes().
  • Der “content-type” meta element sollte als erstes, zusammen mit dem title element plaziert werden.
  • Für Titel und Beschreibung “bloginfo()” verwenden.
  • “wp_head” hinzufügen. Plugins benutzen diesen Action Hook um Scripte, Stylesheets und andere Funktionen einzufügen.

 

Beispiel:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?> <?php bloginfo( 'name' ); ?></title>
<link rel="stylesheet" href="/ <?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
<link rel="pingback" href="/ <?php bloginfo( 'pingback_url' ); ?>"/>
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>

Achtung: Einige Browser interpretieren einen Schrägstrich nach href="/, dieser muss im Code entfernt werden.


Navigations-Menü – header.php

Für ein benutzerdefiniertes Hauptmenü wird der Befehl “wp_nav_menu()” eingefügt. Bei Design und Layout sollten viele Menü-Einträge und lange Link-Titel berücksichtigt werden.

 

Widgets – sidebar.php

Das Theme widget-fähig machen. Es ermöglicht die Darstellung von Kategorielisten etc. in der Sidebar.

 

footer.php

Den Befehl “wp_footer()” direkt vor dem schließenden “</body>” einfügen.

 

index.php

Anzeige einer Liste der Artikel in Kurzform oder in voller Länge. Das Einfügen von “wp_link_pages()” ermöglicht die Navigation innerhalb von Beiträgen.

 

archive.php

Anzeigen der Archiv-Titel, sortiert nach Artikel, Kategorien, Datum oder Autor usw. Anzeige der Beiträge in Auszügen oder in voller Länge. “wp_link_pages()” einfügen.

 

pages.php

Anzeige des Titels und des Inhaltes. Anzeige der Kommentare und und dem  Kommentarformular wenn die Funktion im Admin-Bereich nicht ausgeschaltet wurde. “wp_link_pages()” einfügen. Metadaten wie Kategorien sollten hier nicht angezeigt werden.

 

single.php

“wp_link_pages()” einfügen für die Navigations-links auf der Artikel-Seite. Anzeige des Titels und der Inhalte. Das Datum des Artikels mit “the_time(get_option('date_format'))”. Die Ausgabe basiert auf die benutzdefinierten Einstellungen im Admin. Anzeige des Autors, Kategorien, Tags. Anzeigen des Links bearbeiten für angemeldete Benutzer mit Berechtigung. Anzeige der Kommentar-Liste und dem Kommentar-Formular.

 

JavaScript

JavaScript sollte möglichst in externen Dateien gespeichert werden. Mit “wp_enqueue_script” wird das Script geladen.

 

Screenshot

Der Screenshot muss mit dem Namen screenshot.png in das Hauptverzeichnis des Themes gespeichert werden. PNG- und JPG-Formate sind möglich.

 

 

Fertige Wordpress-Themes können im Download-Bereich heruntergeladen werden.

 

 

Interessante Beiträge:

Wordpress – Child –Theme erstellen

index.php erstellen

Navigationsmenü einbauen

Sidebar oder Footer-Widget erstellen

Formatvorlagen Post Formats

Kommentare   

0 #5 Steffen 2015-03-30 07:49
Sehr nütlzliche Informationen leider etwas dünne ausgefallen ;-)
0 #4 Jens 2012-09-28 22:11
Sehr gut und ausführlich geschrieben.
Hat mir sehr geholfen, danke!
+5 #3 Jürgen 2012-02-26 18:03
Auf der Suche nach einer relativ akuellen Anleitung bin ich auf diese Seite gestossen. Hätte nicht gedacht, dass man deine Anleitung so schnell abarbeiten kann. Werde mir auch deine weiteren Beiträge durch lesen.
+1 #2 Oliver 2011-08-18 19:13
Echt super erklärt ich habe so paar Post gelesen das war auf jeden Fall der Beste.

Wo man am meisten gelernt hat.
+4 #1 David Werthmüller 2011-04-15 08:47
Wunderbar! Klar und Übersichtlich. Danke :-)