WordPress-Themes - der große Ratgeber mit Tipps und Tricks

Sowohl für die Eigenentwicklung eines Blogs mit Hilfe von WordPress.Org als auch bei WordPress.Com, das Ihnen Platz für ein eigenes Blog zur Verfügung stellt, sind WordPress-Themes eine gute Grundlage für die Gestaltung und Funktionalität Ihrer Blog-Seiten. Wir zeigen Ihnen, wie Sie vorhandene Themes nutzen und an Ihre eigenen Anforderungen anpassen. Außerdem vermitteln wir Ihnen die Grundlagen, um eigene Vorlagen zu entwickeln.

Wir haben zu Ihrer Unterstützung vier kleine Programme geschrieben. Deren Funktion ist im Kasten am Ende des Beitrags beschrieben. Außerdem enthält jedes Programm eine Infoseite, die mit der F1-Taste ein- und ausgeblendet werden kann. Starten Sie als erstes den hfh-mini-starter. Mit ihm kommen Sie mit einem Klick auf wichtige Offline- und Online-Adressen und starten die anderen drei Tools.

Wenn Sie einen individuellen, Ihren eigenen Wünschen entsprechenden Blog ins Netz stellen wollen, liegt es nahe, dafür ein eigenes Theme zu kreieren. Aber bevor Sie daran gehen, das Rad ein weiteres Mal selbst zu erfinden, sehen Sie sich erst einmal im vorhandenen kostenlosen Angebot um. Direkt nach der Installation von WordPress finden Sie die drei Themes : TwentyTen, TwentyEleven und TwentyTwelve in drei Unterordnern von C.

Obwohl die Namen sehr ähnlich klingen, haben Sie hier schon einmal drei unterschiedliche Vorlagen. Übrigens: Auch TwentyThirteen ist bereits in Arbeit und wird wohl dem nächsten WordPress-Paket hinzugefügt. Um nach weiteren Themes zu suchen, gehen Sie auf die Seite wordpress.org/extend/themes.

Das geht einfach durch Klick auf den Button WordPress themes im Ministarter. Dort stehen zurzeit über 1700 vorgefertigte Themes zum Download bereit. Mit größter Wahrscheinlichkeit sind schon viele Ihrer Wünsche, wenn nicht gar alle, in einem der Themes realisiert.

Haben Sie ein Theme gefunden, das Ihren Vorstellungen nahe kommt, verschaffen Sie sich einen kurzen Einblick in die Funktionalität. Klicken Sie erst im Themes Directory auf das zugehörige Bild und dann auf das Bild auf der Seite des Themes. Wenn Sie eines der Themes in Ihr WordPress einfügen wollen, laden Sie es aus dem Netz und entpacken Sie es einfach in den Themes-Ordner.

Hier wird ein neuer Unterordner mit dem Namen des Theme erstellt. Jedes in einem dieser Unterordner stehende Themes-Paket wird automatisch in der WordPress-Oberfläche bei den Themes angezeigt. Bei der Vielzahl von Themes finden Sie sehr wahrscheinlich eines, das Ihnen die Arbeit der Neuerstellung erspart.

Aber auch wenn Sie kein vollständig Ihren Vorstellungen entsprechendes Theme gefunden haben, reicht oft die Erweiterung eines vorhandenen Themes. Dafür geben wir Ihnen hier Anregungen und Tipps. Kenntnisse in HTML, XHTML und vor allem PHP und CSS helfen Ihnen dabei. Dazu finden Sie später im Abschnitt Erstellen Sie ein Kind-Theme weitere Informationen.

Die Grundstruktur eines Themes aufgeschlüsselt

Bevor Sie sich an die Umgestaltung eines fertigen Themes oder gar die Gestaltung eines eigenen machen, müssen Sie wissen, wie ein Theme in WordPress funktioniert. Ein Theme besteht aus einer Vielzahl von php-Dateien und weiteren vor allem css-Dateien, alle in einer genau definierten Ordnerstruktur abgelegt.

Gelegentlich finden Sie auch txt-Dateien. Das sind z.B. readme.txt oder license. txt. Letztere enthält in der Regel die GPL, unter der alle freien Themes veröffentlicht werden. Diese Lizenz erlaubt es, Teile oder ein ganzes Theme für eigene Entwicklungen zu nutzen. So können wir uns ein eigenes Theme auch zusammenbasteln.

Zwei Dateien sind die Kerndateien, für jedes Theme unabdingbar. Bei jedem Start des Blogs wird als Erstes index. php aufgerufen. Die Datei entspricht der in den meisten Programmiersystemen erforderlichen Main-Datei bzw. Prozedur. Sie ist wie eine Kommandozentrale, von der aus die Abläufe gesteuert werden.

Ein Begriff taucht hier auf, den Sie immer wieder im Zusammenhang mit Themes hören: "The Loop" (die Schleife). Dabei handelt es sich um die Hauptfunktion von Wordpress, die alle weiteren Aktionen zum Laden und Anzeigen des Blogs ausführt. Es kann auch sein, dass The Loop in einer oder mehreren php-Dateien steht.

In dieser Schleife erfolgt die Hauptarbeit im Blog: Die Datenbank, in der die Seiten, Artikel, Bilder, Archive und sonstigen Elemente des Blogs abgelegt sind, wird nach den Einzelelementen durchforstet. Dazu werden weitere Unterschleifen genutzt.

Das ist auch eine Besonderheit von WordPress: die Dateihierarchie. Der index.php ordnen sich gestaffelt weitere Dateien unter. Fehlt eine dieser Dateien, übernimmt die nächsthöhere deren Aufgaben. Die zweite unbedingt erforderliche Datei ist style.css. In ihr und, zumeist, weiteren css-Dateien ist das Design des Blogs, Formatierung und Layout definiert.

Ein Blick ins Innere

Die einfachste Methode, sich mit der Materie WordPress-Themes vertraut zu machen, ist, sich die Ordner- und Dateistruktur einmal näher anzusehen. Das geht ganz einfach mit dem hfh-mini-filefinder.

Für die vergleichende Betrachtung der drei Themes TwentyTen, TwentyEleven und TwentyTwelve benötigen Sie eine Anwendung, in der Sie die dazugehörigen Dateiinhalte öffnen können.

Das ist zunächst einmal recht einfach, denn alle WordPress-Dateien sind reine Textdateien. Die korrekte Darstellung hängt lediglich von dem verwendeten Texteditor ab. Haben Sie keinen gesonderten Texteditor installiert, ist es bei php-Dateien zumeist der Notepad genannte Microsoft-Texteditor.

Doch dieser stellt Ihnen die Texte fast aller in WordPress anfallenden Dateien schwer lesbar dar. Verwenden Sie alternativ PSPad -Editor. Dieser Editor ist ein sehr komfortabler Code-Editor und nicht nur für php-Dateien geeignet, sondern auch HTML, Perl, C und weitere Programmiersprachen.

Er ist mit vielen Features ausgestattet, die Ihnen die Arbeit in den Themes erleichtern.

Templates, Plug-ins und Hooks

Sehen Sie sich jetzt einmal die Dateien eines Themes mit diesem Editor näher an. Sie können dafür Ihren neuen Editor verwenden. Wir benutzen dafür den hfh-minieditor, der einfachere Codedarstellung ermöglicht. Gehen Sie in die Datei index.php. Sie ist die Datei, mit der ein Theme startet. Das vollständige Tag - man nennt solche Zeilen Template Tag - sieht so aus

<?php get_header(); ?>

Dieses Tag bindet header.php ein und besteht aus WordPress-spezifischen PHP-Schnippseln (Snippets). Sie rufen Funktionen auf oder laden Elemente aus der Datenbank. In unserem Beispiel ruft das Tag den Header ab. In dieser Form werden sie auch als Template Include Tags bezeichnet. Als gewöhnliches PHP-Tag würde das so aussehen:

<?php include(,header.php') ?>

Sie sollten in WordPress aber auf jeden Fall Template Tags verwenden, da sie flexiblere Funktionen ermöglichen.

Das nachfolgende Tag enthält die Schleife The Loop, auch hier wieder mit eingeschlossenen Kommentarzeilen.

<?php get_template_part( ,loop', ,in dex' ); ?>

Es folgen dann die Template Include Tags für die Sidebar und Fußzeilenaufrufe.

<?php get_sidebar(); ?><?php get_footer(); ?>

Die Schleife umfasst hierbei den Code, mit dem die verschiedenen Seiten und Artikel Ihres Blogs und alle weiteren Informationen wie Zeitangaben, Kommentare ausgegeben werden.

Dieser kurze Einstieg muss hier genügen, da eine ausführliche Analyse den Rahmen dieses Artikels sprengen würde. Leider ist auch die Zahl der deutschsprachigen Lehrbücher zum Thema nicht gerade Legion, so dass Sie auf die zumeist englischsprachigen Seiten im Netz zugreifen müssen.

Nutzen Sie den hfh-mini-starter um z.B. auf den englischsprachigen Codex-Seiten weitere Information zu bekommen z.B. zum Thema Hooks, mit deren Hilfe Plug-ins an WordPress andocken. Eine Liste der aktuellen Hooks finden Sie unter adambrown.info/p/wp_hooks/version/3.5 . Leider ist das Deutsche Handbuch noch nicht so weit, dass es auf alle Stichworte etwas zu sagen hat.

Erstellen Sie ein eigenes Child-Theme zu einem vorhandenen

Sie müssen, um ein individualisiertes Theme zu erhalten, nicht ein völlig neues erstellen. Erweitern Sie stattdessen die Funktionalität des WordPress-Themes durch ein so genanntes Child Theme. Das ursprüngliche Theme wird in diesem Zusammenhang logischerweise als Parent Theme bezeichnet. Das Child erbt die Funktionalität seines Parent. Dieses wird nicht verändert.

Nur muss das Parent Theme immer gleichzeitig vorhanden sein, da das Child auf die Funktionalität des Parent zugreift. Es wird nur in wp-content/themes ein zusätzlicher Ordner mit dem Namen des Child Theme erstellt. Nehmen wir an, Sie wollen ein Child zu TwentyTwelve erstellen. Dann müssen Sie als erstes einen Ordner im Themes-Hauptordner anlegen.

Diesen könnten Sie z.B. TwentyTwelve_Child nennen. In diesem Ordner muss eine funktionsfähige style.css stehen. Diese Datei ersetzt die im Parent vollständig. Deshalb können Sie aber auch einfach die stylesheet.css des Parent in den Child-Ordner kopieren. Nur müssen Sie im Header zusätzlich die unten gezeigte Template-Zeile einfügen.

Der Header der Datei könnte so aussehen wie im Parent Theme.

/* Theme Name: Twenty Twelve Child Theme URI: https://example.com/ Description: Child theme für das Twenty Twelve theme Author: Autorenname Author URI: https://xxxxx.de/about/ Template: twentytwelve Version: 0.1.0 */

Die Bedeutung der Parameter finden Sie in der Tabelle.

Nach dem abschießenden */ folgt der reguläre StyleSheet-Code. Wollen Sie keine großen Änderungen vornehmen, können Sie auch darauf verzichten, die Parent-style.css in Ihren Child-Ordner zu übernehmen. In diesem Fall müssen Sie die Datei importieren. Das geschieht mit diesem Code in Ihrer style.css:

/* Theme Name: Twentytwelve Child Description: Child theme für das twen tytwelve theme Author: Autorenname Template: twentytwelve */ @import url("../twentytwelve/style. css"); h1.site-title a { color: #FF0000; }

Wichtig ist, dass die import-Zeile die erste Anweisung nach dem Header ist. Hier ändern wir mit der h1...Zeile die Farbe der Überschrift. Jetzt müsste Ihr Child im Themes-Bereich des WordPress-Dashboard zu sehen sein. Aktivieren Sie es.

Weitere Informationen zum Wordpress-Thema Child finden Sie hier.

Exklusive Hilfsprogramme

• hfh-mini-filefinder

Mit dem Programm erstellen Sie Listen aller Dateien oder Ordner im von Ihnen vorgegebenen Bereich. Es werden immer die ganzen Pfade festgehalten. Das Programm ist ohne große Einweisungen zu benutzen. Wichtig ist, dass Sie auch bei komplexen Strukturen nur wenige Mausklicks benötigen. Es ist, wie die anderen, mit VB.NET programmiert und kann auf Windows-Rechnern ohne Installation verwendet werden.

• hfh-mini-editor

Dieses Programm ist ein einfacher Texteditor mit einem integrierten Merkzettel. Wichtig für WordPress-Entwickler ist, dass mit einem Mausklick das Problem des fehlenden ASC(13) (Beschreibung im Artikel) gelöst wird. Eine Batch-Bearbeitung mehrerer Dateien ist gleichfalls integriert.

• hfh-mini-colorfinder

Der optimale Colorfinder für alle Programmierer:. Er listet die benannten Farben auf, gibt die per Schieberegler festgestellten AR GB-Werte aus und die Grauwerte.

• hfh-mini-starter

Der hfh-mini-starter wurde speziell für Leser erstellt, die sich die lästige Adress-Suche und ständige Eingabe im Browser ersparen wollen. Wenn Sie WordPress lokal installiert haben, dienen die Buttons links dem direkten Zugang zu XAMPP, phpMyAdmin und dem WP-Login.