Die Zeiten ändern sich.
Dieser Beitrag scheint älter als 16 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.
Inhalt:
- Teil 1 – Wir legen los,
Voraussetzungen,
Grundlagen, Layout - Teil 2 – Das statische
Design wird
WordPress-fähig - Teil 3 – Noch mehr Daten
aus dem Backend - Teil 4 -Der Loop
- . . .
Im ersten Teil des Tutorial zum erstellen eines WordPress-Themes haben wir Grundsteine gelegt. Ich hoffe, dass sich alle Teilnehmer mit den Markups und CSS-Styles der verschiedenen Layouts auseinander gesetzt haben?
Prinzipiell kann nun mit jedem beliebigen Layout weiter gearbeitet werden. Die Basis stellt immer eine statische HTML-Datei dar. So hat man die Möglichkeit das Layout in verschiedenen Browsern zu testen und einen Überblick über eventuelle Probleme zu erhalten.
Tipp:
Du hast einen Entwurf auf Papier bzw. einem Grafikprogramm gemacht, dann lade es als Hintergrundbild in deine neue Seite und baue die jeweiligen Container und Markup-Elemente mit Hilfe eines Editors nach. Zeichne die nötigen Container (div) auf das Papier, vergebe id und class und vermerke sie ebenso auf dem Papier.
Stehen alle wichtigen Container, dann kannst du beispielsweise im Browser Firefox und dem Add-on WebDeveloper das Deisgn live editieren, auf Basis der Grafikdatei die als Hintergrund hinterlegt ist.
Hat man später ausreichend Erfahrung muss sicher nicht auf Basis eines statische Layouts aufgebaut werden, aber so kann man eine Reihe von Problemen umgehen. Auch im Bezug auf professionelle Entwicklungen kann so im Vorfeld eine Reihe von Komplikationen umgangen werden. Der Kunde kann eine Layout sehen, ohne das spezifische Wissen über WordPress zu integrieren. In der Regel soll er erstmal einen Entwurf außerhalb des Papiers absegnen und das geht sicher mit einer statischen HTML-Seite scheller. Nun aber zum Umsetzen, so dass wie die simple HTML-Datei mit Daten von WordPress füttern.
Ich beziehe mich in den folgenden Abschnitten immer auf das absolut positionierte Layout. Warum? – ganz einfach, ich möchte Probleme mit CSS umgehen und eine Reihe von lieben Lesern meines Blogs möchten Layouts im Rahmen der CMS-Anwendung umsetzen. Aber wie gesagt, um WordPress zu verstehen, spielt es keine Rolle, das sind Grundlagen und Können im Rahmen von HTML und CSS.
Ich bin ein Amateur-Webdesigner. Im Allgemeinen unterstütze ich das Profi-Tun im Webdesign nicht, sobald es über das Vermitteln von „Basics” und eine lockerer Anleitung hinausgeht. Ich gebe mein Bestes und ich bin ein starker Verfechter der Methode sich selbst zu motivieren und selbst zu lernen. Frank Bueltge
Damit wir das komplette Layout nun aber sauber und standardisiert außerhalb des Markup haben, muss der interne Styleabschnitt in die style.css integriert werden. Dazu nehmt eines der Beispielmarkups, mit dem ihr das Tutorial weiter absolvieren wollt und kopiert den Inhalt zwischen
<style type="text/css" media="screen">
</style>
Die CSS-Anweisungen kopiert ihr in die bestehende style.css. Die beiden oben genannten Zeilen löscht ihr dann, inklusiver der Styleanweisungen. Somit steht nun nur noch die Anweisung für moderne Browser im Markup zum Laden des Stylesheets @import url( style.css );, gefolgt in von den Zeilen:
</head>
<body>
Für alle sparsamen Teilnehmer, der Code steht im Anschluss wieder zum Download bereit.
WordPress erkennt das Template
Im aktuellen Zustand haben wir unser Design lediglich als HTML-Datei vorliegen. Damit WordPress die Datei erkennt und damit arbeiten kann, müssen wir nun eine Reihe von Anpassungen vornehmen. Ich werde versuchen, es so einfach und nachvollziehbar wie möglich zu erläutern. Tipps, Kritik und Verbesserungen sind erwünscht. In diesem Teil wird es noch wenig Code sein, aber das ändert sich ab Teil 3 dieses Tutorial.
Nachdem wir die statische HTML-Datei in unserem Editor des Vertrauens geöffnet haben, werden nun einige Eckdaten so geändert, dass die Inhalte aus der Datenbank kommen und Einstellungen des Blog an das Template übergeben werden. Nur so kann das Frontend, die eigentliche Seite für den Leser, sauber vom Backend, dem Administrationsbereich, angepasst werden.
Dazu speichern wir als erstes die HTML-Datei als PHP-Datei unter dem Namen index.php ab, im gleichen Verzeichnis wp-content/themes/wp_tutorial/, in dem wir schon im ersten Teil gearbeitet haben. Dort liegt auch das Stylesheet der verschiedenen HTML-Layout-Vorschläge.
Nun könnt ihr schon das Theme im Backend von WordPress aktivieren und das Layout bewundern.
Ein nicht sonderlich schöner Anblick, denn es fehlt die Zuordnung des Stylesheets. Bisher wurde die Datei direkt zugewiesen @import url( style.css );. Das müssen wir nun im Sinne von WordPress tun und damit erscheint dann auch die Seite im Design des Stylesheets. Ändert also diese Anweisung in den folgenden Syntax: @import url( <?php bloginfo('stylesheet_url'); ?> );.
Wichtig, das Stylesheet wird nur dann von WordPress als solches erkannt, wenn die Datei style.css heißt und die entsprechenden Kommentarfelder in der Datei vorhanden sind.
/*
Theme Name: WordPress Tutorial
Theme URI: https://bueltge.de
Description: Das Theme zum WordPress Tutorial
Version: 1.0
Author: Frank Bueltge
Author URI: https://bueltge.de
*/
Template Tag
Durch die Anpassung der index.php haben wir nun auch unseren ersten Template-Tag genutzt. Ein Grund, um ein wenig mehr darüber zu schreiben und zu verstehen.
Mit Hilfe der Template Tags werden Informationen aus der Datenbank an das Frontend, im Gewissen Maße auch an das Backend von WordPress übergeben. Im Grunde sind Template Tags PHP-Funktionen, welche in den Dateien der WordPress-Installation liegen. Einige dieser Template Tags können Parameter aufnehmen. Wobei die Parameter durch Variablen übergeben werden. Diese Variablen bekommen in den meisten Template Tags schon Werte mit und so können die Funktionen, die Template Tags unkompliziert eingesetzt werden.
Template Tags werden nach den Regeln von PHP in HTML eingebunden: <?php bloginfo('stylesheet_url'); ?>. Es wird also jeder Tag nach SGML Processing Instructions in HTML integriert: <?php ?>.
Es gibt eine ganze Reihe von Template Tags und am besten man gewöhnt sich an die Arbeit mit dem Codex, der Dokumentation rund um WordPress, denn dort werden alle Template Tags erläutert und aktuell gehalten. Denn im Rahmen von neuen Versionen kommen neue Tags hinzu und ab und zu werden auch bestehende Tags verändert oder werden gar nicht mehr unterstützt.
Tipp:
Du bist schon mit Template Tags vertraut und muss nicht mehr jeden Tag nachschlagen, dann nutze zum Beispiel das WordPress Cheat Sheet, zur schnellen Übersicht der Tags, sortiert nach ihrem Einsatzbereich. Für die Inhaber meines Buches, im Anhang ist diese Übersicht beigefügt.
Nun sind aber Template Tags nicht gleich Template Tag. Es gibt drei Arten von Tags:
- Tags ohne Parameter
- Tags mit PHP-Funktion-Style-Paramtern
- Tags mit Quera-Style-Parametern
Was ist das nun wieder und muss ich das wissen? Die Unterscheidung ist bei der Arbeit an einem Theme sicher nicht von expliziter Bedeutung, Hauptsache man kann die Tags einsetzen und versteht die Anwendung. Trotzdem ist ein solides Hintergrundwissen niemals verkehrt und sorgt für mehr Verständnis beim Einsatz der Template Tags. Deshalb im folgenden kurz und knapp die Erläuterungen.
Tags ohne Parameter
Einige Funktionen benötigen keine Parameter und sind einfach und unkompliziert eingesetzt. Diese Tags werden lediglich mit Namen und folgender Klammerpaar eingesetzt. Ein typisches Beispiel ist the_meta(). Dieser Template Tag listet lediglich den Schlüssel und den Wert aus den benutzerdefinierten Feldern aus.
<?php the_author(); ?>
Tags mit PHP-Funktion-Style-Parametern
Ein große Anzahl der Template Tags akzeptiert Parameter. Diese Parameter werden genauso wie in PHP-Funktion eingesetzt und daher kommt auch der Name. Werden mehrere Parameter übergeben, so sind diese per Kommata zu trennen. Alle Parameter werden immer in ein Klammerpaar eingeschlossen. Und damit schließe ich auch wieder den Kreis zu unserem verwendeten Template Tag bloginfo(). Dieser Tag ist ein klassisches und viel verwendeter Tag mit PHP-Funktion-Style-Parametern. Er akzeptiert eine große Anzahl von Parametern und gibt je nach Parameter das entsprechende Ergebnis. In unserem aktuellen Fall die URl zur Stylesheet-Datei bloginfo('stylesheet_url').
<?php the_content('Weiterlesen ...'); ?>
Tags mit Query-Style-Parametern
Damit aber nicht genug, denn es gibt noch ein drittes Model der Templates Tags. Diese Form nutzt den Query-String und entspricht damit der GET-Methode des HTTP-Protokolls. Dadurch kann man Template Tags, die eine besonders große Anzahl von Parametern besitzen, mit Hilfe eines Wrapper – einer Hülle nutzen. Dies führt dazu, dass man einen Template Tag schnell und einfach nutzen kann. Es müssen nur die Parameter übergeben werden, die man auch benötigt, nicht die benötigen der Funktion.
Es gibt nur eine Auswahl von Template Tags mit Wrapper. Am Syntax kann man einige Tags erkennen. In der Regel sind Tags, die einen Wrapper besitzen mit wp_ am Anfang gekennzeichnet. Leider gilt das nicht ausnahmslos. Ein typisches Beispiel ist der Aufruf des Archiv wp_get_archives(). Dieser Tag mit Wrapper beruht auf der Funktion get_archives('type', 'limit', format, 'before', 'after', 'show_post_counter'). Benötigt man also nur eine oder wenige Paramater, so ist die Anwendung mit Wrapper wesentlich einfacher – wp_get_archives('limit=5')
<ul>
<?php wp_tag_cloud('smallest=8&largest=22'); ?>
</ul>
WordPress und das Theme
Nach unserem Ausflug zu den Template Tags und der verschiedenen Arten, hoffe ich, dass alles ein wenig verständlicher ist. In diesem Teil des Tutorial ging es ja darum, dass wir WordPress im kleinsten Abschnitt dazu bringen, dass es unser Layout versteht. In diesem Sinne ist uns das auch gelungen. Aber es ist natürlich noch einiges an Arbeit und Veränderungen in der entstandenen index.php notwendig, damit es zu einem echten und mächtigen Theme wird, denn derzeit holen wir keinerlei Daten aus der Datenbank außer die Zuordnung der Stylesheet-Datei.
Da ich diesem Teil nicht weiter auf die Anpassung eingehen möchte und das Ergebnis so stehen soll, werde ich noch ein wenig das Theme im Sinne von WordPress erläutern. Denn um ein Layout für WordPress zu entwickeln, sollten die Grundlagen und das Wissen rund um das Theme bekannt sein.
WordPress Themes müssen bzw. sollten sich in einem Ordner befinden. Man kann mit einigen Lösungen den Ordner umgehen, aber das ist nicht sinnvoll und sorgt nur für zusätzliche Probleme. Sie liegen im Ordner wp-content/themes/. Damit WordPress mit den Dateien im Ordner des jeweiligen Themes etwas anfangen kann, muss man sich an entsprechende Konventionen halten.
Im Theme-Ordner liegen alle benötigten Dateien, dazu zählen in erster Linie die Templates und das Stylesheet. Im kleinsten und einfachsten Fall gehören die index.php und die style.css zu einem Theme. Damit könnte WordPress schon arbeiten. Allerdings wird damit die Übersicht im Theme sehr schnell schlecht überschaubar und so unterstützt WordPress eine ganze Reihe weitere Dateien, die im Standard erkannt und genutzt werden. Zwingend im Theme sind also lediglich die index.php und die style.css. Werden die folgend vorgestellten Templates, außer die index.php, nicht gefunden, so wird immer die index.php als Darstellungsdatei genutzt.
index.phpDas Hauptindex-Template die in der Regel als Startaufruf genutzt wird und bei allen Aktionen genutzt wird, die nicht anders definiert sind. Diese Datei muss vorhanden sein.home.phpDas Template für eine Startseite, wenn eine extra Startseite gewünscht ist, die sich dann beispielsweise im Inhalt und Design von anderen Seiten unterscheidet.single.phpEinzelne (single) Beiträge mit diesem Template geladen.page.phpDie Seiten (page) werden mit diesem Template dargestellt.category.phpEgal um welche Kategorie es sich handelt, es wird mit dieser Datei dargestellt.author.phpDie Autoren der Webseite wollen sich vorstellen, dann kann mit dieser Datei ein entsprechendes Template genutzt werden.date.phpDas Datum/Zeit-Template wird immer gezogen, wenn Ausgaben zu Jahr, Monat, Tag, Stunde Minute oder Sekunde geholt werden.archive.phpDas Archiv ist ein klassisches Merkmal von WordPress und wird mit diesem Template unterstützt.search.phpDas Suchergebnis, ob erfolgreich oder nicht, wird mit diesem Template in die richtige Form gebracht.404.phpError 404 - nicht gefunden, dann zieht WordPress dieses Template.comments_popup.phpDiese Art der Kommentare, das Anzeigen mit Hilfe eines Popup ist kaum genutzt. Zur Verfügung steht trotzdem das Template und WordPress unterstützt es.
header.phpDas Header-Template sollte sämtliche Informationen enthalten, die im Bereichheaddes HTML-Dokumentes anfallen.sidebar.phpDas klassische Sidebar, ein Merkmal von Bloglayouts, wird mit diesem Template uterstützt.footer.phpDas Footer-Template übernimmt alle Daten aus dem Fußbereich der Webseite und Daten, beispielsweise JavaScript, die im Anschluss an den klassischen Inhaltsaufbau geladen werden.comments.phpDie Kommentare haben sich in der Blogosphäre etabliert und werden mit diesem Template innerhalb von WordPress unterstützt.
Nun ist dem einen oder anderen vielleicht schon aufgefallen, die letzten 4 Templates unterscheiden sich ein wenig von den anderen in ihrer Aufgabe. Sie sind nicht eigenständig nutzbar, sie werden in bestehenden Templates integriert (include) und genutzt. Dabei gibt WordPress dem Anwender eine besondere Form der Integraion in die Hand, die Include Tags.
Include Tags
Die Include Tags sorgen für die Integration der Dateien müssen nicht über den kompletten Pfad eingebunden werden. Es müssen lediglich die entsprechenden Tags im entsprechenden Theme gesetzt werden. Es stehen folgende Include Tags zur Verfügung, wobei sich deren Funktion im Bezug auf die angesprochenen Templates sicher selbst erklärt.
get_header()get_sidebar()get_footer()get_comments()
Die Integration im Template erfolgt wieder über die oben angesprochene PHP in HTML Regel: <?php ?>.
Sollen weitere Dateien integriert (included) werden, so gibt es zwei Möglichkeiten, da es dafür keine Include Tags gibt. Die erste Möglichkeit geht davon aus, dass die Dateien innerhalb des Theme-Ordners liegen. Dafür steht die Konstante TEMPLATEPATH zur Verfügung.
<?php include (TEMPLATEPATH . '/example.php'); ?>
Die zweite Möglichkeit integriert Dateien die in jedem anderen Verzeichnis von WordPress liegen können. Die Konstante ABSPATH stellt das root-Verzeichnis von WordPress zur Verfügung.
<?php include (ABSPATH . 'wp-content/themes/default/example.php'); ?>
Download:
Ist die Arbeit nicht 1 Euro wert?
Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.
Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.
Download als php-Datei: wp_tutorial_teil2.zip - 1 kByte
Fazit und Ausblick
Auch in diesem Teil 2 des Tutorial sind nur wenige Codezeilen geflossen, trotzdem denke ich, dass Mann/ Frau nicht um ein gewisses Maß an Grundlagen des Themas herum kommt. Nur so kann man selbstständig und zuverlässig Layouts für WordPress entwickeln. Es soll nicht darum gehen, dass ich meine Artikelanzahl in die Höhe treibe, ich möchte, dass Leser nach dem Tutorial in der Lage sind ein eigenes Theme zu erstellen, auf Basis ihrer eigenen Vorlage die sie mit Kenntnissen im Bereich HTML und CSS erstellt haben.
Im kommenden Teil 3 werden wir die entstandene Datei index.php mit weiteren Daten aus der Datenbank füttern und den berühmten Loop integrieren. Auch dazu werde ich wohl wieder ein wenig erläutern müssen, denn auch in diesem Bereich gibt es einiges an Hintergrundwissen. Trotzdem kommen wir damit dem Theme, dem eigentlichen Ziel, wieder eine wenig näher und lernen dazu.
Gleichzeitig werden wir die derzeitige index.php in drei Bestandteile zerlegen, so dass es an die Anforderungen und Empfehlungen von WordPress und den im oberen Abschnitt erläuterten Templates näher kommt.
Ich freue mich auf Kommentare, Feedbacks und den kommenden Abschnitt. Wann und wie er aussehen wird, das weis ich auch nicht, denn er entsteht wie immer in der Freizeit und mit viel Schlafmangel. In diesem Sinne wünsche ich mir, dass man es nicht nur überfliegt, sondern, dass jeder interessierte Leser mit dem Willen zu einem eigenen Theme das Tutorial sorgfältig liest und nach vollzieht.
Hallo Frank,
habe den ersten Teil und nun auch den zweiten verschlungen, ich hoffe du bist nicht böse wenn ich immer mal drauf zurück komme 🙂 Seit heute nachmittag hab ich auch dein Buch, wenn alle Themen in naher Zukunft so gut behandelt werden, steht glaube ich einer qualifizierten deutschen WordPress Community nichts im Wege (und mit Hilfe des Forums natürlich).
An dieser Stelle mal ein großes DANKESCHÖN, ich weiss wie viel Arbeit im Buch und der Seite steckt. Aber bitte bitte mach weiter so!
Grüße V.