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”.
- body_class()
- post_class()
- comment_class()
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.
Interessante Beiträge:
Wordpress – Child –Theme erstellen