Bevor wir die Grundstruktur des in dieser Reihe erstellten Themes prettyNew testen können, müssen wir noch die Dateien für den Kopf-, Fußbereich und die Seitenleiste anpassen. Zusätzlich benötigen wir noch ein Stylesheet, da Wordpress das Thema sonst als fehlerhaft markiert und wir es im Backend nicht aktivieren können.
Ein einfaches Stylesheet festlegen
Dazu legen wir eine neue CSS-Datei mit dem Namen style.css im Ordner /wp-content/themes/prettyNew/ an. Dazu öffnen wir im Projektexplorer von Eclipse das Kontextmenü des Ordners und wählen aus dem Untermenü Neu den Befehl CSS File aus. Als File name geben wir style.css ein. Wichtig: Dieser Dateiname für das Stylesheet ist zwingend vorgeschrieben, denn Wordpress erkennt die Stile sonst nicht.
Die IDE legt die Datei neu an und öffnet sie sofort im Editor. Den bereits eingefügten body-Tag müssen wir mit weiteren Zeilen ergänzen, damit wir eine gültige Definition erhalten. Selbstverständlich werden wir diese Stil-Definitionen in der Folge erweitern und verbessern. Auch hier fügen wir gleich am Anfang einen Kommentar-Block ein. Der Block hat diesmal ein festes Format, denn er wird von Wordpress verwendet, um die Informationen im Backend anzuzeigen.
/*
Theme Name: prettyNew
Theme URI: http://franzis.de/
Description: Das erste Thema zum Buch
Version: 1.0
Author: Clemens Gull
Tags: Hintergrundfarbe, fixe Breite (950px) 3 Spalten, widgetfaehig
Dieses Thema wird im Rahmen des Buchs PHP und Wordpress erstellt.
*/
...
Jetzt ergänzen wir den
body-Tag und legen die grundlegende Definition für die Überschrift-Tags fest.
...
/* Formatierung fuer den body */
body {
background-color: #2851BD;
font-family: "Times New Roman", Times, serif;
font-size: 1.2em;
color: #FFFFFF;
margin: 0px;
padding: 0px;
text-align: center; /* zentrieren fuer NS 4 und IE 4-6 */
}
/* Ueberschriften festlegen */
h3 {
font-size: 1.2em;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
letter-spacing: 0.1em;
color: #FFE400;
}
h3 a {
color: inherit;
text-decoration: none;
}
h3 a:hover{
color: #99CC33;
}
...
Tipp: Auch in CSS-Dateien sind Kommentare möglich. Im Hinblick auf ein besseres Verständnis ist es auch hier sinnvoll, sie zu benutzen.
Da dieses Thema eine fixe Breite hat, sieht es nicht gut aus, wenn es im linken oberen Eck fixiert ist. Daher werden wir ein sogenanntes Wrapper-Element verwenden. Dieser div-Tag hat nur eine Funktion, nämlich den Inhalt im Browserfenster zentriert darzustellen.
| Ganzen Artikel lesen... |  |
...
/* Format fuer den Wrapper-Div zum zentrieren des Blogs */
div#wrapper {
background: transparent url(images/background_wrapper.png) no-repeat top left;
width: 955px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
...
Wie wir sehen, ist beim Wrapper der Hintergrund definiert worden. Da unser Design nicht nur funktional, sondern auch ansprechend sein soll, benötigen wir einige Bilder. Diese Grafiken kopieren wir in das Themenverzeichnis in den neuen Unterordner images. Nun folgen die Formatierungen für den Kopfbereich des Themas. Da wir später auch Überschriften im Kopf verwenden werden, definieren wir die entsprechenden h1 und h2-Tags. Da es der Anwender gewohnt ist, mit einem Klick auf das Logo oder den Titel einer Webseite auf die Startseite zu gelangen, müssen wir das berücksichtigen. Wir ändern somit auch gleich die Formatierung der a-Tags, wenn sie in einem h1 oder h2-Tag vorkommen.
...
/* Formate fuer den Kopfbereich */
div#header {
background: transparent url(images/header.png) no-repeat top center;
height: 97px;
width: 100%;
padding: 5px;
}
div#header h1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #2851BD;
font-size: 1.8em;
margin-left: 100px;
margin-top: 10px;
line-height: 1em;
letter-spacing: 0.2em;
}
div#header h2 {
color: #FFFFFF;
font-weight: normal;
font-size: 1.1em;
font-style: italic;
margin-left: 150px;
margin-top: -20px;
line-height: 1em;
letter-spacing: 0.1em;
}
div#header h1 a,
div#header h2 a {
color: #2851BD;
text-decoration: none;
}
div#header h1 a:hover,
div#header h2 a:hover {
color: #FFE400;
}
...
Nun folgt die Formatierung für den Fußbereich. Auch hier passen wir die a-Tags sowie den p-Tag an. Denn damit können wir die notwendigen Informationen komprimiert in der Fußzeile darstellen.
...
/* Formate fuer den Fussbereich */
div#footer {
background: transparent url(images/footer.png) no-repeat bottom center;
height: 56px;
width: 100%;
padding-top: 25px;
text-align: center;
clear: both;
margin-left: 7px;
}
div#footer p {
position: relative;
top: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-weight: normal;
letter-spacing: 0.1em;
}
div#footer a {
color: #C8583E;
text-decoration: none;
}
div#footer a:hover {
color: #2851BD;
}
...
Der nächste Schritt sind die Formate für die Seitenleisten. Dies wird ein wenig komplizierter: Wir werden zwei Bereiche nebeneinander und quer über das Suchformular darstellen. Zusätzlich wird unser Thema widgetfähig, was wir auch berücksichtigen müssen.
Dieser Textabschnitt ist dem Buch “PHP für WordPress – Themes und Templates selbst entwickeln” von Clemens Gull entnommen, das im Franzis-Verlag erschienen ist. Sie können es hier direkt bestellen.
Clemens Gull
Lernen Sie die ganze Vielfalt vom Franzis Buch- und Softwareverlag kennen
