WordPress Theme Tutorial
Teil 1 - Teil 2 - Teil 3 - Teil 4 - Teil 5
header.php - Der Kopf des Themes
In diese Datei kommt nun der “Kopf” () des Templates. Dazu gehören vorallem die Meta- und Link- Daten. Außerdem wollen wir einen suchmaschinenfreundlichen Titel haben.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title><?php bloginfo('name'); ?><?php if ( is_single() ) { ?> ยป <?php } ?><?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="author" content="Dein Name” />
<meta name=”description” content=”<?php bloginfo(’description’); ?>” />
<meta name=”robots” content=”follow” />
<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(’rss2_url’); ?>” />
<link rel=”alternate” type=”application/atom+xml” title=”Atom 1.0″ href=”<?php bloginfo(’atom_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(’pingback_url’); ?>” />
</head>
<body>
An diesem fertigen Kopf müssen wir eigentlich nichts ändern. Man sollte nur “Dein Name” durch den eigenen Namen ersetzen. Die Meta-Daten erklären sich wohl von selbst. Diese werden mittels PHP selbstständig mit Daten befüllt. Die Link-Daten werden ebenfalls automatisch durch WordPress mit den entsprechenden Url befüllt.
Der Titel besteht bei der Startseite aus dem Blognamen. Bei der Einzelansicht eines Beitrags kommt hinter dem Blognamen noch der Name des Beitrags. Dies ist vorallem für Suchmaschinen, aber auch für den Leser, ganz nützlich.
Weiterhin können wir nun noch die erstens DIVs in die header.php schreiben. Dies könnte in etwa so aussehen:
<div id="page">
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>
Hierbei wird der Blogname (<h1>) und die Blogbeschreibung (<h2>) im DIV header ausgegeben. Davor wird noch ein DIV page geöffnet, aber nicht mehr geschlossen.
style.css - Die Cascading Style Sheets
In die Datei style.css kommen nun die notwendigen Styleinformationen hinein, die wir für unser Theme brauchen.
Die Datei haben wir schon am Anfang angelegt und dort die Theme-Informationen abgelegt.
Unterhalb dieser Informationen kann jetzt mit dem CSS begonnen werden.
body {
color: #ffffff;
font-size: 10pt;
background:#ffffff;
}
...
Hierbei muss eigentlich nichts besonderes beachtet werden.
footer.php - Und nun das Ende
Kommen wir nun zum Footer, dem Ende des Templates (nicht jedoch zum Ende des Tutorials ;)). Hier können alle noch nicht geschlossenen Tags (DIV, BODY und HTML) geschlossen werden. Außerdem kommt hier der sog. Footer mit ein paar Informationen zum Template und Templateersteller hinein.
</div>
<div id="footer"><?php bloginfo('name'); ?> läuft mit WordPress <?php bloginfo('version'); ?> <a href="http://webworkblog.net/" >Mein erstes Template</a> nach einem Tutorial von <a href="http://webworkblog.net">webworkblog.net</a></div></div>
</body>
</html>
Wir haben hier am Anfang ein DIV geschlossen, dann ein paar Infos zur verwendeten Blogsoftware und zum verwendeten Theme. Am Ende werden noch der Body und der HTML-Tag geschlossen.
WordPress Theme Tutorial
Teil 1 - Teil 2 - Teil 3 - Teil 4 - Teil 5
Letzte Kommentare