Kurs-Serie: Wordpress Themes erstellen
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Kurs-Serie: Wordpress Themes erstellen Von der HTML-Vorlage zum fertigen WordPress-Theme von Vladimir Simovic akademie.de asp GmbH & Co. Betriebs- & Service KG Lehrter Straße 16-17, 10557 Berlin Tel: (030) 61655-0 Fax: (030) 61655-120 http://www.akademie.de E-Mail: info@akademie.de Online auf akademie.de: http://workshops.akademie.de/direkt?pid=68612
02 Von der HTML-Vorlage zum fertigen WordPress-Theme -2- Inhaltsverzeichnis Von der HTML-Vorlage zum fertigen WordPress-Theme ............ 3 Grundlagen und Vokabular ...................................................................... 3 Die Vorbereitung .................................................................................... 13 Der Kopfbereich (header.php) .................................................................. 14 Die Seitenleiste (sidebar.php) .................................................................. 16 Der Fußbereich (footer.php) ..................................................................... 19 Die Hauptdatei (index.php) ...................................................................... 20 Die comments.php .................................................................................. 23 Ein paar Kleinigkeiten zum Ende der Woche .............................................. 29 Über akademie.de ..................................................................... 33 © Copyright akademie.de 1996-2012 - info@akademie.de
02 Von der HTML-Vorlage zum fertigen WordPress-Theme -3- Von der HTML-Vorlage zum fertigen WordPress- Theme Im ersten TEil unserer WordPRess-Themes Kurs-Serie haben Sie gelernt, wie man auf der Basis einer grafischen Vorlage ein HTML-Template erstellt. In dieser Woche werde ich Ihnen zeigen, wie Sie anschließend aus der HTML- Vorlage ein einsatzbereites WordPress-Theme machen. Dieses Theme ist zwar einsatzbereit und funktionstüchtig, aber es ist noch nicht wirklich fertig. Dem Feinschliff und der Erweiterung dieses WordPress- Themes werden wir uns dann im dritten Kurs-Teil zuwenden. Grundlagen und Vokabular Bevor wir konkrete Schritte unternehmen, wenden wir uns zuerst der Theorie zu, damit Sie etwas mehr über das Template-System von WordPress und dem dazugehörigen Vokabular erfahren. Wie sind Themes aufgebaut? Themes bestehen aus einem Unterordner, der sich innerhalb des Ordners wp- content befindet. Innerhalb des jeweiligen Themes-Ordners befinden sich Dateien - Template-Dateien - und evtl. weitere Unterordner, z. B. für Bilder. In der folgenden Abbildung sehen Sie den Aufbau des Default-Themes. Dieses ist Teil der Standardinstallation. Die Dateien des Default-Themes Die verschiedenen Template-Dateien haben unterschiedliche Funktionen. Manche Dateien müssen auf jeden Fall vorhanden sein, andere sind optional. Im weiteren Verlauf werde ich Ihnen folgende Begriffe erklären: • Template-Dateien © Copyright akademie.de 1996-2012 - info@akademie.de
02 Von der HTML-Vorlage zum fertigen WordPress-Theme -4- • Include-Tags • Template-Tags • Template-Hooks • Conditional-Tags • The Loop • Seiten-Templates Nun werde ich auf die einzelnen Begriffe näher eingehen und erklären, welche Rolle sie in einem Theme spielen. Welche Template-Dateien gibt es? Ein WordPress-Theme ist das komplette Design einer Website. Stellen Sie sich einfach das Theme wie eine HTML-Seite vor, die verschiedene Zustände abdeckt: Übersicht, Einzelansicht, Kommentar etc. Diese HTML-Datei "zerschneiden" Sie in mehrere Einzeldateien (Template- Dateien). An den entsprechenden Stellen in diesen Dateien fügen Sie Template Tags ein, die an der Stelle, wo sie eingebunden sind, bestimmte Inhalte ausgeben: Auflistung der Kategorien, das Datum, der Artikel, Archiv etc. Anmerkung: Die HTML-Datei dient auch weiterhin als Grundgerüst und die auszugebenden Inhalte werden durch das Einbinden der Temlpate-Tags realisiert. Die Template-Dateien lassen sich in drei Gruppen aufteilen. Zum einen sind das Dateien, die zum Einsatz kommen, wenn ein bestimmter Zustand abgefragt wird: Auflistung der Suchergebnisse, Ansicht der einzelnen Beiträge etc. Die andere Gruppe sind Template-Dateien, die lediglich dazu dienen, den Code auszulagern (z. B. header.php für den Kopfbereich) und somit auch die Pflege des Themes erleichtern. In die dritte Gruppe fallen alle restlichen Dateien, wie z. B. die screenshot.png, die lediglich dazu dient, im Admin-Bereich die Vorschau auf ein Theme zu präsentieren. Hier folgt eine Auflistung möglicher Template- Dateien: Template-Dateien für bestimmte Zustände • index.php - die Hauptdatei eines Themes. Diese Datei muss vorhanden sein. • style.css - die Stylesheet-Datei. Diese Datei muss vorhanden sein. © Copyright akademie.de 1996-2012 - info@akademie.de
02 Von der HTML-Vorlage zum fertigen WordPress-Theme -5- • category.php - die Datei für die Ausgabe der Kategorieübersicht. Diese Datei ist optional, wenn sie fehlt, wird die index.php eingesetzt. • comments.php - das Kommentar-Template. Diese Datei ist eigentlich optional. Wenn sie nicht vorhanden ist, wird die Kommentardatei aus dem Default-Theme genutzt. Falls man ein eigenes Theme erstellt, ist es daher empfehlenswert, auch die comments.php zu erstellen. • page.php - die Datei ist zuständig für die Ausgabe der Seiten (Pages). Diese Datei ist optional, wenn sie fehlt, wird die index.php eingesetzt. • single.php - diese Datei ist zuständig für die Ausgabe eines Beitrags in der Einzelansicht. Diese Datei ist optional, wenn sie fehlt, wird die index.php eingesetzt. • archive.php - diese Datei ist zuständig für die Ausgabe des Archivs. Diese Datei ist optional, wenn sie fehlt, wird die index.php eingesetzt. • search.php - mit dieser Datei wird die Ausgabe der Suchergebnisse beeinflusst. Diese Datei ist optional, wenn sie fehlt, wird die index.php eingesetzt. • 404.php - wenn WordPress einen Beitrag nicht finden kann, wird eine Meldung ausgegeben. Ist die 404.php vorhanden, greift WordPress auf diese Datei zu. Auch diese Datei ist optional, wenn sie fehlt, wird die index.php eingesetzt. • author.php - steuert die Ausgabe, wenn nach einem bestimmten Autor gesucht wird. Diese Datei ist optional, wenn sie fehlt, wird die index.php eingesetzt. • date.php - steuert die Ausgabe, wenn nach einem bestimmten Zeitabschnitt gesucht wird. Diese Datei ist optional, wenn sie fehlt, wird die index.php eingesetzt. • image.php - ist zuständig für die Anzeige der einzelnen Bilder, wenn die Galerie-Funktion von WordPress zum Einsatz kommt. Template-Dateien mit Auslagerungsfunktion • header.php - hier wird der Kopfbereich der Seite ausgelagert. • sidebar.php - hier wird die Seitenleiste (Sidebar) der Website ausgelagert. • footer.php - hier wird der Fußbereich der Website ausgelagert. • comments.php - das Kommentar-Template. Nein, das ist kein Fehler. Die comments.php ist eine Ausnahme, sie ist sowohl für einen bestimmten Zustand verantwortlich (Kommentarbereich), hat aber auch eine auslagernde Funktion. Sonstige Template-Dateien © Copyright akademie.de 1996-2012 - info@akademie.de
02 Von der HTML-Vorlage zum fertigen WordPress-Theme -6-
• screenshot.png - diese Grafik dient bei der Auswahl des Themes als
Vorschaugrafik.
5
• functions.php - diese Datei ist zuständig für die Widget -Funktion (auch
bekannt als dynamische Sidebar). Hier werden auch, zusätzlich, die selbst
definierten Funktionen ausgelagert.
Include-Tags
Wenn Sie den Inhalt der Template-Dateien in die Auslagerungsdateien
(header.php, sidebar.php, comments.php und footer.php) auslagern, müssen
Sie diese in der jeweiligen Template-Datei auch "verlinken" bzw. dem System
zu verstehen geben, dass Sie an der bestimmten Stelle den Code aus der
Auslagerungsdatei einbinden wollen. Dafür haben die Entwickler spezielle
Include-Tags erstellt:
• - an der Stelle wird die header.php
eingebunden.
• - an der Stelle wird die sidebar.php
eingebunden.
• - an der Stelle wird die comments.php
eingebunden.
• - an der Stelle wird die footer.php
eingebunden.
Diese speziellen Include-Tags erfüllen die gleiche Funktion wie die Include-
6
Anweisung von PHP. Mit dem Unterschied, dass man sich bei den Include-
Tags von WordPress keine Sorge um den Pfad und den Dateinamen machen
muss, wenn man die Dateien alle im dafür vorgesehenen Ordner belässt.
Selbstverständlich kann man auch "selbstgestrickte" Template-Dateien
in die "offiziellen" Template-Dateien einbinden, z. B.: . Der Wert TEMPLATEPATH gibt
dann die absolute Adresse des Theme-Ordners auf dem Server wider. Mit
"selbstgestrickt" bezeichne ich Template-Dateien, die nicht zum "offiziellen"
Umfang gehören.
Anmerkung:
Wenn Sie "selbstgestrickte" Template-Dateien einsetzen, sollten Sie darauf achten,
sie nicht wie die "offiziellen" Template-Dateien zu benennen, weil dies zu Problemen
führen kann. Es ist keine gute Idee, eine "selbstgestrickte" Template-Datei sidebar.php
oder archive.php zu benennen, besser ist es solche Dateien als kopfbereich.php oder
mein-archiv.php zu benennen.
5) http://de.wikipedia.org/wiki/Widget
6) http://de.php.net/include/
© Copyright akademie.de 1996-2012 - info@akademie.de02 Von der HTML-Vorlage zum fertigen WordPress-Theme -7-
Was sind Template-Tags?
7
Template-Tags sind Code-Schnipsel bzw. PHP-Funktionen, die WordPress
anweisen, entweder etwas zu tun oder einen bestimmten Inhalt bzw.
bestimmte Informationen anzuzeigen. So gesehen kann man sagen, dass
Template-Tags "WordPress-Befehle" sind.
Momentan existieren mehr als 130 gültige Template-Tags, die auch für die
Version 2.8.x einsetzbar sind. Es existieren eigentlich noch ein paar mehr,
allerdings handelt es sich dann um Template-Tags, die nicht mehr gültig sind
oder sehr bald nicht mehr gültig sein werden (engl. deprecated).
Keine Sorge, keiner erwartet von Ihnen, dass Sie alle Template-Tags
auswendig kennen und das ist auch nicht notwendig, wenn Sie Themes für
WordPress entwerfen wollen. Die Zahl von mehr als 130 Template-Tags wirkt
vielleicht beängstigend, aber einen großen Teil werden Sie sehr wahrscheinlich
kaum oder nur äußerst selten nutzen. Wie in vielen Lebenslagen, ist es
auch hier nicht unbedingt wichtig, alles zu wissen, aber wichtig zu wissen,
8
wo es steht. Die Auflistung der Template-Tags finden Sie in der offiziellen
Dokumentation.
Zwei Template-Tags innerhalb einer Template-Datei (header.php)
In der Zeile 7 sehen Sie zwei Template-Tags:
1
Diese zwei Template-Tags befinden sich innerhalb des title-Elements. Der
Inhalt des title-Elements ist sehr wichtig, da er in den Suchergebnissen
7) http://codex.wordpress.org/Template_Tags
8) codex.wordpress.org/Template_Tags
© Copyright akademie.de 1996-2012 - info@akademie.de02 Von der HTML-Vorlage zum fertigen WordPress-Theme -8-
und für die Lesezeichen als Überschrift dient. Zudem erscheint der Inhalt des
title-Elements in der Kopfleiste des Browsers. An diesem zufällig gewählten
Beispiel sehen Sie sehr gut, wie und in welcher Art man die Template-Tags
innerhalb der Template-Datei unterbringt.
Was Sie auch sehen, ist die Tatsache, dass der erste Tag auch einen
Parameter mit sich führt: 'name' ist der Parameter-Wert des Tags
bloginfo();. Dieser Tag, wie eine Reihe von weiteren Template-Tags, besitzt
mehrere Parameter, mit denen man die Ausgabe des Tags beeinflussen kann.
Template-Hooks
Wenn Sie ein bestehendes Theme bearbeiten oder ein neues erstellen, sollten
Sie darauf achten, dass Sie die Template-Hooks (Hook = engl. für Haken)
nicht löschen bzw. dass Sie diese einbauen. Speziell, wenn Sie ein Theme für
die breite Öffentlichkeit erstellen, ist dies immens wichtig. Die Template-Hooks
werden auch als Plugin-Hooks, WordPress-Hooks oder sogar nur als Hooks
bezeichnet.
Diese Hooks werden von einigen Plugins benötigt, damit sie richtig bzw.
überhaupt funktionieren können. Man kann sich die Funktion der Plugin-Hooks
auch bildlich als "Haken" vorstellen, die den Plugins einen Punkt bieten, an
dem sie ansetzen können. Einige Statistik-Plugins nutzen in der footer.php
den Hook wp_footer(); um an der Stelle ihren Code einzufügen.
Im Classic-Template z. B. befinden sich folgende Hooks:
• - Zeile 22 in der Datei header.php
• - Zeile 67 in der
Datei comments.php
• - Zeile 36 in der Datei sidebar.php
• - Zeile 10 in der Datei footer.php
Wenn Sie nun ein neues Theme erstellen oder ein bestehendes anpassen
wollen, reicht es zu wissen, dass Sie diese Hooks nicht löschen sollten.
Detaillierte Informationen sind nur für Plugin-Entwickler interessant und die
finden Sie hier:
9
• codex.wordpress.org/Plugin_API#Current_hooks_for_filters
10
• codex.wordpress.org/Plugin_API#Current_Hooks_For_Actions
Conditional-Tags
Bei den Conditional-Tags handelt es sich um Code-Fragmente, die eine
Bedingung aufstellen: "Wenn dies und das erfüllt ist, dann handle so und so."
9) http://codex.wordpress.org/Plugin_API#Current_hooks_for_filters
10) http://codex.wordpress.org/Plugin_API#Current_Hooks_For_Actions
© Copyright akademie.de 1996-2012 - info@akademie.de02 Von der HTML-Vorlage zum fertigen WordPress-Theme -9- Angenommen, Sie erstellen ein WordPress-Theme und wollen nur auf der Startseite etwas einblenden: 1 2 3 Willkommen in meinem Weblog 4 5 Wenn Sie etwas nur auf den Seiten (Pages) einblenden wollen: 1 2 3 Dies ist eine Seite 4 5 Sie haben selbstverständlich auch die Möglichkeit, Conditional-Tags bestimmte Parameter mitzugeben: 1 2 3 Impressum und Kontaktdaten 4 5 In diesem Fall stellen Sie eine Seite (Page) als Bedingung, die als Titel "Impressum" hat. Sie können auch mehrere Bedingungen durch logische Operatoren verknüpfen: 1 2 3 Lorem ipsum... 4 5 Hier wird als Bedingung "entweder Seite oder einzelner Beitrag" gestellt. Folgende logische Operatoren (die eigentlichen Operatoren sind hervorgehoben) sind zugelassen: a || b = a oder b a or b = a oder b a && b = a und b © Copyright akademie.de 1996-2012 - info@akademie.de
02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 10 -
a and b = a und b
!a = nicht a
a xor b = entweder a oder b, aber nicht beide
Wie Sie sehen, gibt es für die Bedingungen "und" und "oder" jeweils zwei
Schreibweisen. Es hängt von Ihnen ab, für welche Sie sich entscheiden.
Auf jeden Fall haben Sie mit den Conditional-Tags eine Möglichkeit, die
Position im Weblog abzufragen und entsprechende Elemente auszugeben.
Die Möglichkeiten sind vielfältig, z. B. verschiedene Bilder bzw. Inhalte in
der Seitenleiste, je nachdem, ob es sich um die Startseite, eine Seite oder
einen Einzelbeitrag handelt. Sie können eine Begrüßung nur auf der Startseite
einfügen oder für das Archiv eine spezielle Einleitung hinzufügen u.v.m.
Weitere Informationen zu Conditional-Tags gibt es in der offiziellen
11
Dokumentation .
Der Loop - das Herzstück eines WordPress-Themes
The Loop oder auch der Loop ist so gesehen das "Herzstück" von WordPress.
Der Loop ist dafür zuständig, dass die Beiträge und die Inhalte einer Seite
ausgegeben werden. Der Loop wird in der Datei index.php und in jeder
Template-Datei eingebunden, die für die Ausgabe der Beiträge und Inhalte
verantwortlich ist, z. B. page.php und single.php.
Sehen wir uns einmal den Loop in der Datei index.php des Classic-Themes an.
Den Anfang und das Ende habe ich hervorgehoben:
1 09
2
3 10
4
5 11
6
7 12
8
9 1302 Von der HTML-Vorlage zum fertigen WordPress-Theme - 11 - 14 15 16 16 17 17 18 19 18 20 21 19 22 23 20 24 25 21 26 27 22 28 29 23 30 31 24 32 33 25 34 35 26 36 37 27 38 39 28 40 41 29 42 43 30 44 45 31 46 47 32 Innerhalb der hervorgehobenen Stellen sind Bereiche untergebracht, die in jedem Beitrag vorkommen sollen: Überschrift des Beitrags (Zeile 14), Anzahl der Kommentare (Zeile 23), Verweis zum Kommentarbereich (ebenfalls Zeile 23), der eigentliche Beitrag (Zeile 18) etc. Wenn Sie z. B. einen kleinen Hinweis unterbringen wollen, der nur einmal auf einer Seite vorkommen soll, ist der Loop der falsche Ort dafür. In der folgenden Grafik habe ich versucht, die Zusammenhänge zwischen den verschiedenen Template-Dateien, den Template- und Conditionals-Tags sowie den Template-Hooks bildlich darzustellen: © Copyright akademie.de 1996-2012 - info@akademie.de
02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 12 - WordPress-Themes komprimiert Seiten-Templates Angenommen ihre Datei page.php unterscheidet sich von der Datei index.php (Haupttemplate) dadurch, dass bei der Ausgabe der Seiten (page.php) die Sidebar andere Inhalte aufweist, dann würden Sie diesen Bereich in der page.php entsprechend ändern. Wenn Sie dann mehrere Seiten erstellt haben, könnte es z. B. sein, dass Sie auf einer Seite, beispielsweise im Impressum, die Sidebar ganz anders gestalten oder sie total ausblenden möchten. Dann öffnen Sie die Datei page.php in einem Texteditor und speichern Sie sie als impressum.php im gleichen Ordner ab. Danach fügen Sie in dieser neuen Datei (impressum.php) ganz am Anfang folgenden Kommentar-Prolog ein: 1
02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 13 - 8 9 ?> Es handelt sich um einen PHP-Kommentar, der dem System signalisiert, dass es sich hierbei um ein Seiten-Template handelt. Führen Sie nun an der entsprechenden Stelle die gewünschten Änderungen durch, speichern Sie die Datei ab und laden Sie sie hoch. Nun haben Sie innerhalb des Bereichs "Seiten" » "Neue Seite" die Möglichkeit dem Impressum oder auch anderen Seiten dieses neue Template zuzuweisen. Box: Fragen zur Selbstprüfung 1. Was ist der Unterschied zwischen Template- und Conditional-Tags? 2. Was charakterisiert den Loop? Die Vorbereitung Bevor wir mit der ersten Template-Datei anfangen, ist es wichtig, sich Gedanken zu machen, welcher Teil des Layouts in welche Template-Datei eingefügt wird. In der folgenden Abbildung sehen Sie die Aufteilung, die ich vornehmen werde: © Copyright akademie.de 1996-2012 - info@akademie.de
02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 14 - Aufteilung der Vorlage in Template-Dateien Der Kopfbereich und die Hauptnavigation werden der header.php zugeordnet, die Seitenleiste der sidebar.php, der Fußbereich der footer.php und der eigentliche Inhalt der index.php. Hinzukommen wird später noch die comments.php welche in den jetzt nicht sichtbaren Kommentarbereich übernehmen wird. Anmerkung: An dieser Stelle möchte ich noch einmal kurz darauf hinweisen, dass wir in diesem zweite Teil der WordPress-Themes Kurs-Serie zwar das Theme erstellen werden, aber das es noch nicht ganz fertig sein wird. Es ist zwar funktionstüchtig und einsatzbereit, aber es fehlt noch der Feinschliff. Wichtig ist erstmal, dass das Theme "steht" und wir etwas zu schauen und auch das erste Erfolgserlebnis haben. Daher werde ich in diesem Kurs-Teil z. B. nach Möglichkeit die Template-Tags ohne Parameter einsetzen und mit einer minimalen Anzahl von Template-Dateien arbeiten. Im dritten Kurs-Teil werden wir das Theme erweitern (Widgets, zusätzliche Dateien etc.) und Feinschliff betreiben. Der Kopfbereich (header.php) Die Template-Datei header.php wird nicht nur die Angaben im Dokumentkopf beherbergen, sondern auch einen Teil des sichtbaren Bereiches der Website: Kopfgrafik und die Hauptnavigation. Ich werde Ihnen zuerst die komplette Datei zeigen und dann werde ich Ihnen Schritt für Schritt die erklärungsbedürftigen Passagen erläutern. Hierbei werde ich nur in Ausnahmefällen auf schon erklärte Codefragmente eingehen. 1 2 3 4 5 6 7 8
02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 15 - 10
02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 16 -
• bloginfo('pingback_url'); - Die Adresse zur xmlrpc.php
14
Am Ende der header.php sehen Sie den Template-Hook wp_head(); , welcher
einer Reihe von Plugins als Orientierungspunkt dient, die z. B. im Kopfbereich
Code hinzufügen.
Anmerkung: Aktueller Menüpunkt in der Navigation
Wie man den aktuellen Menüpunkt in der Hauptnavigation kennzeichnet und wie man
dort auch den Startseiten-Link einfügt erfahren Sie im dritten Kurs-Teil. An diese Stelle
wäre das im Moment zu viel des Guten.
Die Seitenleiste (sidebar.php)
Nachdem wir die header.php fertig gestellt haben, wenden wir uns einer
weiteren Auslagerungsdatei des WordPress-Themes zu:
1
2 Suchen
302 Von der HTML-Vorlage zum fertigen WordPress-Theme - 17 -
22
23
24
25
26
27
28
Die Suche
Im ersten Abschnitt sehen Sie den Code für das Suchformular, welches
sehr einfach gestrickt ist. Das komplette Formular besteht aus reinem
HTML, lediglich für die Übergabe des Suchwortes wird der alte bekannte
15
bloginfo('url'); bemüht. Suche ich z. B. auf www.perun.net nach dem
Suchwort "Test", dann wird folgende URL aufgerufen:
16
http://www.perun.net/?s=test&submit=Suchen
Auflistung der Kategorien
Im zweiten Abschnitt werden die Kategorien aufgelistet. Dafür wird dann
17
der Template-Tag wp_list_categories(); eingesetzt. Der Auflistung von
Kategorien habe ich drei Parameterwerte gegeben:
• orderby=name - Die Kategorien werden alphabetisch aufgelistet.
• show_count=1 - Neben dem Kategorienamen wird die Anzahl der jeweiligen
Beiträge ausgegeben.
• title_li= - Entfernt die automatische Überschrift und das Listenelement
(), welches den kompletten Kategorie-Block umschließt.
Die einzelnen Parameter werden durch das kaufmännische und (&) verbunden.
So schaut das dann im Frontend aus, wenn man einige Artikel verfasst hat:
15) http://www.perun.net
16) http://www.perun.net/?s=test&submit=Suchen
17) http://codex.wordpress.org/Template_Tags/wp_list_categories
© Copyright akademie.de 1996-2012 - info@akademie.de02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 18 -
Auflistung der Kategorien: alphabetisch und mit Anzahl der Blog-Artikel
Das Monatsarchiv
Die Auflistung der einzelnen Monate in der Sidebar erreichen wir durch den
18
Einsatz von wp_get_archives(); . Auch dieser Template-Tag verfügt über
eine Reihe von Parametern und den dazugehörigen Werten. Aber auch in der
Standardausführung - also ohne den Einsatz von Parametern tut dieser Tag
genau das was wir möchten: die Auflistung der einzelnen Monate:
Monatsarchiv in der Sidebar
Klickt man jetzt auf diesen Link, werden alle Blog-Artikel aufgelistet, die im
Monat März 2009 verfasst wurden und die auch noch online sind.
Der Rest der Sidebar
Zum Schluss der Seitenleiste kommen drei weitere Code-Fragmente zum
Einsatz.
18) http://codex.wordpress.org/Template_Tags/wp_get_archives
© Copyright akademie.de 1996-2012 - info@akademie.de02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 19 -
19
• wp_register(); - Dieser Tag erzeugt für Besucher einen Registrierungslink
- wenn die Registrierung erlaubt ist - und für den eingeloggten Nutzer
einen Link zum Backend.
20
• wp_loginout(); - Dieser Link erzeugt einen Anmelden-Link für den nicht-
und einen Abmelden-Link für den angemeldeten Nutzer.
• wp_meta(); - Hierbei handelt es sich um einen weiteren Template-Hook.
Der Fußbereich (footer.php)
Nachdem wir bereits die header.php und die sidebar.php erstellt haben,
wenden wir uns dem Fußbereich und der Datei footer.php zu:
1
2
3
4
5 Copyright © Dein Name 2009 - Alle Rechte vorbehalten -
Angetrieben von WordPress
6
7
8
9
10
11
12
13
Ja, ich gebe es zu. Die footer.php ist unspektakulär. Das einzige, was noch
zu erwähnen wäre, ist der Template-Hook wp_footer(); und die Tatsache,
dass Sie hier zwischen dem abschließenden body und html z. B. die Code-
Fragmente der diversen Statistik-Dienste (z. B. Google Analytics) platzieren
können bzw. auch sollen, wenn Sie sich für den manuellen Weg entscheiden.
19) http://codex.wordpress.org/Template_Tags/wp_register
20) http://codex.wordpress.org/Template_Tags/wp_loginout
© Copyright akademie.de 1996-2012 - info@akademie.de02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 20 - Die Hauptdatei (index.php) Nach drei Auslagerungsdateien wenden wir uns nun dem Herzstück eines WordPress-Themes zu: der index.php. Diese Datei muss in einem Theme vorhanden sein. Hier der Code unserer index.php: 1 2 3 4 5 6 7
02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 21 -
Am Anfang sehen Sie schon den Include-Tag get_header();. Mit diesem
bindet man den kompletten Code der header.php an der entsprechenden
Stelle ein. Danach folgt der Loop.
Der Loop
Die Stellen, an denen der Loop anfängt und endet, habe ich hervorgehoben.
Der Loop fängt mit der Abfrage an, ob es Beiträge gibt (if (have_posts()).
Wenn ja, wird die while-Schleife gestartet und es werden alle Beiträge
aufgelistet. Die Funktion the_post(); ist dafür zuständig, dass die einzelnen
Beiträge innerhalb des Loops verfügbar sind, und erst durch den Einsatz
dieser Funktion können etliche Template-Tags überhaupt funktionieren.
21
Bei dieser Notierung handelt es sich um die alternative Syntax für Kontroll-
Strukturen. Die Zeile könnte man auch folgendermaßen in der "konservativen"
Schreibweise notieren:
102 Von der HTML-Vorlage zum fertigen WordPress-Theme - 22 -
Beitragsinformationen
In der Zeile danach befindet sich ein div-Block, dem man das Klassen-Attribut
beitrags-info zugewiesen hat. Hier befinden sich einige Informationen
zu dem jeweiligen Beitrag. Zum einen wäre dies der Name des Autors*
22 23
the_author(); , zum zweiten das Datum the_time('d. F Y'); und zum dritten
wäre dies die Uhrzeit the_time('H:i'); an dem der Beitrag publiziert wurde.
(*Hiermit ist der Name des Autors gemeint, welchen man in der
Benutzerverwaltung unter "Name im Blog" einstellen kann.)
Wie Sie sehen, habe ich zwei Mal den Template-Tag the_time(); eingesetzt.
Einmal für das Datum und einmal für die Uhrzeit. Es existiert zwar ein
24
eigener Template-Tag für das Datum (the_date(); ), allerdings hat dieser Tag
einen Nachteil: er wird nur einmal pro Kalendertag angezeigt. Haben Sie am
gleichen Tag mehrere Beiträge verfasst, wird das Datum in der Übersicht nur
bei dem obersten Beitrag des gleichen Tages angezeigt.
25
Am Ende des div-Blocks sehen Sie den Template-Tag edit_post_link(); .
Dieser Tag erstellt einen Bearbeitungslink, welcher nur von den
eingeloggten Nutzern, welche die entsprechenden Rechte haben (Admin,
Redakteur und Autor) gesehen werden kann. Wenn Sie diesen Link anklicken,
gelangen Sie in den Bearbeitungsmodus des jeweiligen Blog-Artikels oder der
Seite.
Der eigentliche Beitrag
Der eigentliche Beitrag - egal ob Blog-Artikel oder Seite - wird durch den
26
Template-Tag the_content(); ausgegeben. Das war's. Dieser Tag hat zwar
auch Parameter, aber diesen und einigen weiteren werden wir uns im dritten
Kurs-Teil widmen.
Die Anzahl der Kommentare und der Kommentarbereich
Die Anzahl der Kommentare eines Beitrages gibt man durch den Tag
27
comments_popup_link(); aus. Eigentlich ist die Angabe der Parameter
zwar nicht zwingend notwendig, aber wenn man auf die Angabe der Paramter
verzichtet, wird der Text nicht übersetzt und es steht dann im Frontend z.
B. "1 Comment". Da wir es aber deutsch haben möchten, setzen wir drei
Parameterwerte ein:
'Kommentare (0)', 'Kommentare (1)', 'Kommentare (%)'
22) http://codex.wordpress.org/Template_Tags/the_author
23) http://codex.wordpress.org/Template_Tags/the_time
24) http://codex.wordpress.org/Template_Tags/the_date
25) http://codex.wordpress.org/Template_Tags/edit_post_link
26) http://codex.wordpress.org/Template_Tags/the_content
27) http://codex.wordpress.org/Template_Tags/comments_popup_link
© Copyright akademie.de 1996-2012 - info@akademie.de02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 23 -
Die Funktionsweise dürfte recht klar sein. Der erste Wert wird ausgegeben,
wenn ein Beitrag keinen Kommentar besitzt. Der zweite Wert kommt zum
Einsatz, wenn der Blog-Artikel einen und der dritte Wert ist zuständig, wenn
der Artikel mehrere Kommentare hat.
Den Kommentarbereich binden wir durch den Include-Tag
comments_template(); ein, so als ob wir hier die comments.php eingebunden
hätten ... welcher wir uns im nächsten Abschnitt annehmen werden.
Mit posts_nav_link(' - ', '« Zurückblättern', 'Weiterblättern
»'); wird die Weiterblättern-Funktion realisiert. Diese Funktion wird am
Ende jeder Seite eingebunden, wo die Blog-Artikel aufgelistet werden,
vorausgesetzt es existiert eine Mindestanzahl an Beiträgen. Wenn Sie zum
Beispiel in "Einstellungen" » "Lesen" » " Blogseiten zeigen maximal" den Wert
5 eingegeben haben, dann müssen mindestens sechs Blog-Artikel existieren,
damit die Weiterblättern-Funktion angezeigt wird.
Dieser Template-Tag verfügt über drei Parameter. Diese Zeichen, die man im
ersten Parameter einträgt dienen als Trennung zwischen "Zurückblättern" und
"Vorblättern". Die anderen beeiden Parameter sind die Texte des Zurück- bzw.
des Vor-Links.
Die comments.php
Da die comments.php recht umfangreich ist, habe ich sie in zwei Teile
aufgeteilt. Hier der erste Teil:
1
2 Tippe dein Passwort ein um die Kommentare zu lesen.
3
4
5
6
7 »»
8
9
10
11
12
13
14
© Copyright akademie.de 1996-2012 - info@akademie.de02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 24 - 15
02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 25 -
28
Überschrift wird durch den Template-Tag comments_number(); erzeugt.
Dieser Template-Tag überprüft, ob und wie viele Kommentare abgegeben
wurden. Auch Track- und Pingbacks werden als Kommentare gezählt. Dieser
Tag bekommt drei Parameterwerte für keine, für einen und für mehrere
abgegebene Kommentare.
Anschließend folgt innerhalb der Überschrift eine weitere Abfrage: if
( comments_open() ). Mit dieser wird geprüft, ob die Kommentarfunktion in
diesem Beitrag noch aktiv bzw. offen ist. Wenn ja, wird ein Verweis zum Anker
postcomment eingebunden: zum Formular um einen Kommentar abzugeben.
Mit if ( $comments ) wird abgefragt, ob schon Kommentare abgegeben
wurden, wenn ja, werden diese auch innerhalb einer nummerierten Liste
() aufgelistet. Die eigentliche Auflistung wird durch eine foreach-
Schleife realisiert und jeder einzelner Kommentar wird dann als ein
Listenelement () ausgegeben. Jedes einzelne Listenelement bekommt
einen eindeutigen ID-Wert zugewiesen. Dieser Wert besteht aus dem Wert
29
comment- und der Nummer (comment_ID(); ) des Kommentars, z. B.:02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 26 -
Und dadurch, dass wir vorher dafür gesorgt haben, dass jeder einzelner
Kommentar eindeutig adressiert wurde (durch die Vergabe der ID) gelangt der
Besucher, der einen solchen Link anklickt, zum richtigen Kommentar.
Anschließend wird die Schleife für die Auflistung der abgegebenen
Kommentare beendet (endforeach;) und es kommt die Meldung, die
ausgegeben wird, wenn noch keine Kommentare abgegeben wurden.
Kommentar-Feed, Trackback-URL und Passwortabfrage
Darunter folgt dann der Link zum Kommentar-Feed des jeweiligen Beitrags
32
(post_comments_feed_link(); ) und wenn das Weblog das Pingen erlaubt,
33
wird auch die Trackback-Adresse (trackback_url(); ) des jeweiligen Beitrags
ausgegeben, so dass andere Blogger wissen, welche Adresse sie anpingen
müssen.
(Pingen: Wenn das Weblog die Annahme von Track- und Pingbacks anderer
Weblogs zulässt.)
Anschließend startet eine verschachtelte if-Abfrage. Zuerst wird per if
( comments_open() ) geprüft, ob die Kommentar-Funktion bei diesem
Beitrag zugelassen ist. Weiter oben hatten wir schon mal die gleiche Abfrage.
Wenn ja, wird eine Überschrift ("Einen Kommentar abgeben") ausgegeben.
Direkt nach der Überschrift öffnet sich eine weitere if-Abfrage, in der geprüft
wird, ob eine Registrierung notwendig ist aber der Kommentator noch nicht
eingeloggt ist. Dann kommt die Meldung: "Du musst dich einloggen um
Kommentare abzugeben".
Ist man eingeloggt oder kann man ohne Anmeldung kommentieren, erscheint
das Kommentarformular:
102 Von der HTML-Vorlage zum fertigen WordPress-Theme - 27 - 10 11 12 13 14 15 16 17 26 27 28 29
02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 28 - 47
02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 29 - befindet. Das ist u. a. für einige Plugins von Bedeutung, die ihre Funktionalität innerhalb des Formulars ausüben. Ganz zum Schluss kommt die Meldung, dass die Kommentarfunktion für diesen Beitrag geschlossen ist. Ein paar Kleinigkeiten zum Ende der Woche Damit das Theme erkannt und im Backend (Admin-Bereich) auch richtig angezeigt wird, müssen einige Angaben am Anfang der style.css getätigt werden: 1 /* 2 Theme Name: WordPress-Workshop 3 Theme URI: http://www.akademie.de 4 Description: Das WordPress-Theme für den Workshop 5 Version: 1.0 6 Author: Vladimir Simovic aka Perun 7 Author URI: http://www.perun.net 8 */ Die Angaben dürften selbsterklärend sein. Anschließend müssen Sie noch eine Abbildung des Frontend erstellen und diese als screenshot.png im Themes- Ordner abspeichern. Die Ausmaße der Datei sollten 300x225 Pixel betragen. Zusammen mit den Angaben im Kopf der CSS-Datei, kann WordPress damit eine Übersicht im Backend kreieren: © Copyright akademie.de 1996-2012 - info@akademie.de
02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 30 - Themes-Übersicht im Backend So sollte am Ende dieses zweiten Kurs-Teils unseres WorPress-Themes-Kurses Ihr Themes-Ordner ausschauen: Die Template-Dateien Die Erweiterung der CSS-Datei In der style.css habe ich drei weitere Regeln erstellt und diese in den entsprechenden Unterabschnitten einsortiert. © Copyright akademie.de 1996-2012 - info@akademie.de
02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 31 -
1 /* Der Inhaltsbereich */
2
3 ...
4
5 #inhalt .feedback {
6
7 text-align: right;
8
9 margin: 1px 0 45px 0;
10
11 background: url(img/rahmen-linie.gif) repeat-x bottom;
12
13 text-transform: uppercase;
14
15 }
16
17 /* Der Fußbereich */
18
19 ...
20
21 #footer a {
22
23 color: #fff; text-decoration: none; border-bottom: 1px solid
#b0b693;
24
25 }
26
27 #footer a:hover {
28
29 color: #bbc0a2; text-decoration: none; border-bottom: 1px solid
#a8c02e;
30
31 }
Ergebnis des zweiten Teils unserer WordPress-Themes Kurs-Serie
So sollte das Endergebnis am Ende des zweiten Teils unserer WordPress-
Themes Kurs-Serie ausschauen:
© Copyright akademie.de 1996-2012 - info@akademie.de02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 32 - Das vorläufige Endergebnis Das Theme funktioniert und Sie haben in diesem Kurs-Teil die Grundlagen zum Erstellen von WordPress-Themes gelernt. Im dritten Kurs-Teil werden wir das Theme erweitern, feintunen, polieren, pimpen und was sonst noch so ansteht. :-) © Copyright akademie.de 1996-2012 - info@akademie.de
02 Von der HTML-Vorlage zum fertigen WordPress-Theme - 33 -
Über akademie.de
1
akademie.de bietet Praxis-Wissen in Form von Artikeln, ausführlichen
Ratgebern, verständlichen Anleitungen und praxiserprobten Mustervorlagen.
Bei uns finden Sie Beiträge zu über 2.400 Einzelthemen: von
Existenzgründung bis Umsatzsteuervoranmeldung, von Marketing bis
Forderungsmanagement, von Soft Skills bis digitale Bildbeabeitung - und noch
viel mehr.
2
An unseren Online-Workshops können Sie bequem von jedem Rechner mit
Internetzugang aus teilnehmen: von Experten angeleitet, mit persönlichem
Feedback, bei freier Zeiteinteilung.
3
Testen Sie akademie.de zwei Wochen lang kostenlos !
Nutzungshinweise und Copyright: Was darf ich
mit diesem Text machen?
Sie dürfen unsere Texte, Bilder, Programmcodes und Musterdateien speichern
und für Ihren eigenen Gebrauch ausdrucken und nutzen.
Dagegen dürfen Sie unsere Inhalte nicht vervielfältigen, veröffentlichen oder
als Unterrichtsmaterial o.ä. nutzen. Verstöße gegen das Urheberrecht können
4
teuer werden. Besser: einfach fragen - per E-Mail: service@akademie.de
oder Telefon: (030) 616 55 - 0.
1) https://www.akademie.de/
2) https://www.akademie.de/online-workshops
3) https://www.akademie.de/user/mitglied-werden
4) mailto:service@akademie.de
© Copyright akademie.de 1996-2012 - info@akademie.deSie können auch lesen
