Kurs-Serie: Wordpress Themes erstellen

Transcrição

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: [email protected]
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 - [email protected]
-3-
Von der HTML-Vorlage zum fertigen WordPressTheme
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 HTMLVorlage 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 WordPressThemes 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 wpcontent 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
-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 (TemplateDateien). 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 TemplateDateien:
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.
-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
-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:
• <?php get_header(); ?> - an der Stelle wird die header.php
eingebunden.
• <?php get_sidebar(); ?> - an der Stelle wird die sidebar.php
eingebunden.
• <?php comments_template(); ?> - an der Stelle wird die comments.php
eingebunden.
• <?php get_footer(); ?> - an der Stelle wird die footer.php
eingebunden.
Diese speziellen Include-Tags erfüllen die gleiche Funktion wie die Include6
Anweisung von PHP. Mit dem Unterschied, dass man sich bei den IncludeTags 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.: <?php include
(TEMPLATEPATH . "/deine-datei.php"); ?>. 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)
6)
http://de.wikipedia.org/wiki/Widget
http://de.php.net/include/
-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 <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
Diese zwei Template-Tags befinden sich innerhalb des title-Elements. Der
Inhalt des title-Elements ist sehr wichtig, da er in den Suchergebnissen
7)
8)
http://codex.wordpress.org/Template_Tags
codex.wordpress.org/Template_Tags
-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:
• <?php wp_head(); ?> - Zeile 22 in der Datei header.php
• <?php do_action('comment_form', $post->ID); ?> - Zeile 67 in der
Datei comments.php
• <?php wp_meta(); ?> - Zeile 36 in der Datei sidebar.php
• <?php wp_footer(); ?> - 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:
• codex.wordpress.org/Plugin_API#Current_hooks_for_filters
9
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
-9-
Angenommen, Sie erstellen ein WordPress-Theme und wollen nur auf der
Startseite etwas einblenden:
1 <?php if ( is_home()) { ?>
2
3 <h2>Willkommen in meinem Weblog</h2>
4
5 <?php } ?>
Wenn Sie etwas nur auf den Seiten (Pages) einblenden wollen:
1 <?php if ( is_page()) { ?>
2
3 <h2>Dies ist eine Seite</h2>
4
5 <?php } ?>
Sie haben selbstverständlich auch die Möglichkeit, Conditional-Tags bestimmte
Parameter mitzugeben:
1 <?php if ( is_page('Impressum')) { ?>
2
3 <h2>Impressum und Kontaktdaten</h2>
4
5 <?php } ?>
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 <?php if ( is_page() || is_single()) { ?>
2
3 <p>Lorem ipsum...</p>
4
5 <?php } ?>
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
- 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 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
2
3 10
4
5 11 <?php the_date('','<h2>','</h2>'); ?>
6
7 12
8
9 13 <div class="post" id="post-<?php the_ID(); ?>">
10
11 14 <h3 class="storytitle"><a href="<?php the_permalink() ?>"
rel="bookmark"><?php the_title(); ?></a></h3>
12
13 15 <div class="meta"><?php _e("Filed under:"); ?> <?php
the_category(',') ?> — <?php the_author() ?> @ <?php
the_time() ?> <?php edit_post_link(__('Edit This')); ?></div>
11) http://codex.wordpress.org/Conditional_Tags
- 11 -
14
15 16
16
17 17 <div class="storycontent">
18
19 18 <?php the_content(__('(more...)')); ?>
20
21 19 </div>
22
23 20
24
25 21 <div class="feedback">
26
27 22 <?php wp_link_pages(); ?>
28
29 23 <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'),
__('Comments (%)')); ?>
30
31 24 </div>
32
33 25
34
35 26 </div>
36
37 27
38
39 28 <?php comments_template(); // Get wp-comments.php template ?>
40
41 29
42
43 30 <?php endwhile; else: ?>
44
45 31 <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
46
47 32 <?php endif; ?>
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:
- 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 <?php
2
3 /*
4
5 Template Name: Impressum
6
7 */
- 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:
- 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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
3 <head profile="http://gmpg.org/xfn/11">
4
5
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
6
7
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
8
<link rel="stylesheet" type="text/css" media="screen" href="<?
php bloginfo('stylesheet_url'); ?>" />
9
10
- 15 -
<link rel="alternate" type="application/rss+xml" title="RSS 2.0"
href="<?php bloginfo('rss2_url'); ?>" />
11
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /
>
12 <?php wp_head(); ?>
13 </head>
14
15 <body>
16 <div id="container">
17
18
<h1 id="kopfbereich"><a href="<?php bloginfo('url'); ?>"><?php
bloginfo('name'); ?></a></h1>
19
20
21
22
23
24
<div id="hauptnavi">
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
25
26
<div id="mittelbereich">
27 
Schauen wir uns mal die erste Stelle an, wo die Template-Tags zum Einsatz
kommen:
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
Innerhalb des title-Elementes kommen zwei Template-Tags zum Einsatz:
12
13
bloginfo('name'); und wp_title(); . Der erste Tag gibt allgemeine
Informationen zu der WordPress-Installation wieder und hat mehrere
Parameterwerte - in diesem Fall den Namen des Blogs. Dieser Template-Tag
wird uns mehrfach begegnen.
Der zweite Tag wp_title(); gibt den Titel bzw. die Überschrift der Pages, der
Blog-Beiträge oder die Namen der Kategorien in der Übersicht wieder.
Wenn wir uns den Rest der header.php anschauen, dann sehen wir an drei
Stellen den Template-Tag bloginfo(); im Einsatz:
• bloginfo('stylesheet_url'); - Die Adresse der CSS-Datei (style.css)
• bloginfo('rss2_url'); - Die Adresse des RSS2-Feeds (/feed/)
12) http://codex.wordpress.org/Template_Tags/bloginfo
13) http://codex.wordpress.org/Template_Tags/wp_title
- 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
<div id="sidebar">
2
<h2><label for="s">Suchen</label></h2>
3
<form id="searchform" method="get" action="<?php
bloginfo('url'); ?>/">
4
<div>
5
<input name="s" id="s" size="20" type="text" />
6
<input name="submit" value="Suchen"
type="submit" class="such-button" />
7
8
</div>
</form>
9
10
<h2>Kategorien</h2>
11
<ul>
12
<?php
wp_list_categories('orderby=name&show_count=1&title_li='); ?>
13
</ul>
14
15
<h2>Monatsarchiv</h2>
16
<ul>
17
18
<?php wp_get_archives(); ?>
</ul>
19
20
<h2>Sonstiges</h2>
21
<ul>
14) http://codex.wordpress.org/Hook_Reference/wp_head
22
<?php wp_register(); ?>
23
<li><?php wp_loginout(); ?></li>
24
25
- 17 -
<?php wp_meta(); ?>
</ul>
26
27
</div>
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
(<li>), 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
- 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
- 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 nichtund 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
<div class="clearer"></
div>
2
</div>
3
4
<div id="footer">
5
<p>Copyright © Dein Name 2009 - Alle Rechte vorbehalten Angetrieben von <a href="http://wordpress.org">WordPress</a></p>
6
</div>
7
8 </div>
9
10 <?php wp_footer(); ?>
11 </body>
12
13 </html>
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 CodeFragmente 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
- 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 <?php get_header(); ?>
2
3
<div id="inhalt">
4
5 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
6
7
<h2><a href="<?php the_permalink() ?>" rel="bookmark"
title="Der Verweis (Permalink) zu: <?php the_title(); ?>"><?php
the_title(); ?></a></h2>
8
<div class="beitrags-info">Von <?php the_author(); ?>
am <?php the_time('d. F Y'); ?> um <?php the_time('H:i'); ?><?php
edit_post_link(); ?></div>
9
10
<div class="der-beitrag">
11
12
<?php the_content(); ?>
</div> 
13
14
<div class="feedback">
15
<?php comments_popup_link('Kommentare (0)',
'Kommentare (1)', 'Kommentare (%)'); ?>
16
</div>
17

18 <?php comments_template();
/* Der Kommentarbereich */ ?>
19
20 <?php endwhile; else: ?>
21
<p>Tut mir leid, es wurde kein passender Beitrag
gefunden.</p>
22 <?php endif; ?>
23
24
<p><?php posts_nav_link(' - ', '« Zurückblättern',
'Weiterblättern »'); ?></p>
25
26
</div>
27
28 <?php get_sidebar(); ?>
29 <?php get_footer(); ?>
- 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 KontrollStrukturen. Die Zeile könnte man auch folgendermaßen in der "konservativen"
Schreibweise notieren:
1 <?php
2
3 if (have_posts()) {
4
5
while(have_posts())) {
6
7
the_post();
8
9
}
10
11 }
12
13 ?>
Bezüglich der alternativen Syntax steht in der PHP-Dokumentation Folgendes:
Box: Zitat:
PHP bietet eine alternative Syntax für einige seiner Kontroll-Strukturen, als da sind
if, while, for, foreach und switch. Die öffnende Klammer muss immer durch
einen Doppelpunkt ":" und die schließende Klammer entsprechend durch endif;,
endwhile;, endfor;, endforeach; oder endswitch; ersetzt werden.
Nach dem Loop-Anfang wird der eigentliche Titel des Beitrages mit einer
Überschrift der zweiten Ordnung (<h2>) ausgezeichnet. Den Verweis
bzw. den Permalink des Beitrages erhält man durch den Template-Tag
the_permalink(); und der Inhalt der Überschrift wird durch the_title();
generiert.
21) http://de3.php.net/manual/de/control-structures.alternative-syntax.php
- 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)
23)
24)
25)
26)
27)
http://codex.wordpress.org/Template_Tags/the_author
http://codex.wordpress.org/Template_Tags/the_time
http://codex.wordpress.org/Template_Tags/the_date
http://codex.wordpress.org/Template_Tags/edit_post_link
http://codex.wordpress.org/Template_Tags/the_content
http://codex.wordpress.org/Template_Tags/comments_popup_link
- 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 <?php if ( !empty($post->post_password) && $_COOKIE['wp-postpass_' .
COOKIEHASH] != $post->post_password) : ?>
2 <p>Tippe dein Passwort ein um die Kommentare zu lesen.</p>
3 <?php return; endif; ?>
4
5 <h2 id="comments"><?php comments_number('Keine Kommentare', 'Ein
Kommentar', '% Kommentare'); ?>
6 <?php if ( comments_open() ) : ?>
7
<a href="#postcomment" title="Hinterlasse ein
Kommentar">»»</a>
8 <?php endif; ?>
9 </h2>
10
11 <?php if ( $comments ) : ?>
12 <ol id="commentlist">
13
14 <?php foreach ($comments as $comment) : ?>
15
<li id="comment-<?php comment_ID(); ?>">
16
<?php comment_text(); ?>
17
<p><cite><?php comment_type('Kommentar', 'Trackback',
- 24 -
'Pingback'); ?> von <?php comment_author_link(); ?> - <?php
comment_date(); ?> um <a href="#comment-<?php comment_ID(); ?>"><?
php comment_time(); ?></a></cite> <?php edit_comment_link(); ?></p>
18
</li>
19
20 <?php endforeach; ?>
21
22 </ol>
23
24 <?php else : // Es wurden noch keine Kommentare abgegeben ?>
25
<p>Bis jetzt noch keine Kommentare</p>
26 <?php endif; ?>
27
28 <p><?php post_comments_feed_link('RSS-Feed für Kommentare dieses
Beitrags'); ?>
29 <?php if ( pings_open() ) : ?>
30
- <a href="<?php trackback_url(); ?>" rel="trackback">Die
Trackback-Adresse</a>
31 <?php endif; ?>
32 </p>
33
34 <?php if ( comments_open() ) : ?>
35 <h2 id="postcomment">Einen Kommentar abgeben</h2>
36
37 <?php if ( get_option('comment_registration') && !$user_ID ) : ?>
38 <p><?php printf('Du musst dich <a href="%s">eingeloggen</a> um
Kommentare abzugeben.', get_option('siteurl')."/wp-login.php?
redirect_to=".urlencode(get_permalink()));?></p>
39 <?php else : ?>
40
Passwortschutz: ja oder nein?
In der ersten Zeile wird geprüft, ob der Beitrag, zu dem die Kommentare
gehören, durch ein Passwort geschützt ist. Wenn dies der Fall sein sollte
und der Besucher das Passwort noch nicht eingegeben hat, soll die Meldung
erscheinen: "Tippe dein Passwort ein um die Kommentare zu lesen."
Die Anzahl und die Auflistung der Kommentare
Wurden ein Beitrag und seine Kommentare nicht durch ein Passwort geschützt
oder hat man sein Passwort eingegeben, wird der Code weiter ausgeführt.
Und zwar mit einer Überschrift zweiter Ordnung (<h2>). Der Inhalt der
- 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
(<ol>) aufgelistet. Die eigentliche Auflistung wird durch eine foreachSchleife realisiert und jeder einzelner Kommentar wird dann als ein
Listenelement (<li>) 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.: <li
id="comment-55272"... Durch die Vergabe eines eindeutigen ID-Wertes ist
jeder einzelne Kommentar durch eine eindeutige URL erreichbar, z. B.:
www.perun.net/2009/08/31/css-hacks-vs-conditional-comments/
30
#comment-57228
Der eigentliche Kommentar wird durch den Template-Tag
31
comment_text(); ausgegeben. Dieser Template-Tag gehört zu den Tags,
die keine Parameter haben. Unter dem Kommentar befinden sich einige
Kommentar-Informationen:
• comment_type(); - Die Art des Kommentars: Kommentar, Trackback oder
Pingback.
• comment_author_link(); - Der Link zu der Website des Kommentators,
welche im Kommentar-Formular eingegeben wurde.
• comment_date(); - Das Datum an dem der Kommentar abgegeben wurde.
• comment_time(); - Die Uhrzeit zu der der Kommentar abgegeben wurde.
Wie Sie aus dem Code herauslesen können, ist die Uhrzeit verlinkt, so dass
man sich einfach die Adresse des Kommentars herauskopieren kann, wenn
man auf einen interessanten Kommentar verweisen möchte, z. B. wenn Sie
beim Lesen eines Weblogs so einen interessanten Kommentar entdecken und
sich dann in Ihrem Blog-Artikel auf diesen dann beziehen.
28) http://codex.wordpress.org/Template_Tags/comments_number
29) http://codex.wordpress.org/Template_Tags/comment_ID
30) http://www.perun.net/2009/08/31/css-hacks-vs-conditional-comments/
#comment-57228
31) http://codex.wordpress.org/Template_Tags/comment_text
- 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:
1 <form action="<?php echo get_option('siteurl'); ?>/wp-commentspost.php" method="post" id="commentform">
2
3
4
5 <?php if ( $user_ID ) : ?>
6
7
8
9 <p><?php printf('Angemeldet als %s.', '<a
href="'.get_option('siteurl').'/wp-admin/profile.php">'.
$user_identity.'</a>'); ?> <a href="<?php echo
get_option('siteurl'); ?>/wp-login.php?action=logout"
title="Ausloggen bzw. Abmelden">Abmelden »</a></p>
32) http://codex.wordpress.org/Function_Reference/
post_comments_feed_link
33) http://codex.wordpress.org/Template_Tags/trackback_url
- 27 -
10
11
12
13 <?php else : ?>
14
15
16
17 <p><input type="text" name="author" id="author" value="<?php echo
$comment_author; ?>" size="22" tabindex="1" />
18
19 <label for="author"><small>Name <?php if ($req) '(erforderlich)'; ?
></small></label></p>
20
21
22
23 <p><input type="text" name="email" id="email" value="<?php echo
$comment_author_email; ?>" size="22" tabindex="2" />
24
25 <label for="email"><small>E-Mail (wird nicht veröffentlicht) <?php
if ($req) '(erforderlich)'; ?></small></label></p>
26
27
28
29 <p><input type="text" name="url" id="url" value="<?php echo
$comment_author_url; ?>" size="22" tabindex="3" />
30
31 <label for="url"><small>Website</small></label></p>
32
33
34
35 <?php endif; ?>
36
37
38
39 <p>Folgende HTML-Tags sind erlaubt: <code><?php echo
allowed_tags(); ?></code>.</p>
40
41
42
43 <p><textarea name="comment" id="comment" cols="55" rows="12"
tabindex="4"></textarea></p>
44
45
46
- 28 -
47 <p><input name="submit" type="submit" id="submit" tabindex="5"
value="<?php echo attribute_escape(__('Submit Comment')); ?>" />
48
49 <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?
>" />
50
51 </p>
52
53 <?php do_action('comment_form', $post->ID); ?>
54
55
56
57 </form>
58
59
60
61 <?php endif; // Ende: wenn Registrierung erforderlich, aber man
nicht eingeloggt ist ?>
62
63
64
65 <?php else : // Kommentare sind geschlossen ?>
66
67 <p>Tut mir Leid, aber die Kommentar-Funktion ist momentan
deaktiviert.</p>
68
69 <?php endif; ?>
Auch innerhalb des Formulars gibt es eine Abfrage, ob der Kommentator
schon angemeldet ist oder nicht. Wenn er nämlich angemeldet ist, werden die
Felder mit dem Namen, der E-Mail-Adresse und der Website ausgeblendet.
Wenn man allerdings nicht angemeldet ist, muss man diese Felder noch
ausfüllen.
Das Kommentarformular
Der Rest des Formulars ist recht einfach nachzuvollziehen. Mit if($req) wird
abgefragt, ob es erforderlich ist, dass ein Feld ausgefüllt wird bevor man einen
Kommentar abgibt. Die Einstellungen dazu finden Sie unter "Einstellungen" »
"Diskussion".
Die Funktion allowed_tags(); gibt eine Auflistung von HTML-Tags, die in den
Kommentaren erlaubt sind.
do_action('comment_form', $post->ID); ist ein weiterer Template-Hook,
welcher signalisiert, dass man sich hier innerhalb des Kommentarformulars
- 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 ThemesOrdner 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:
- 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.
- 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 WordPressThemes Kurs-Serie ausschauen:
- 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. :-)
- 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: [email protected]
oder Telefon: (030) 616 55 - 0.
1)
2)
3)
4)
https://www.akademie.de/
https://www.akademie.de/online-workshops
https://www.akademie.de/user/mitglied-werden
mailto:[email protected]

Kurs-Serie: Wordpress Themes erstellen

Transcrição

Documentos relacionados

Grundlagen PHP - Programmierung Teil C

Vollblut-‐Webentwickler PHP (m/w)

Hotel-Liste

Erweiterte Suche unter Google nach Musik - FAQ

Hallo, ich bräuchte mal Hilfe/Rat bei ener Fehlermeldung zum

Teilnehmer der Jugendturniere TuS Harpen 2013

Praktikumsmöglichkeiten - Institut für Politik

kunst unterricht - Friedrich Verlag

Grundlagen der Web-Entwicklung Wintersemester 2010/2011

Interessante Internet Adressen