Jetzt wollen wir endlich mal den leeren Bereich oben im Template füllen. Laut unserem Wireframe soll oben auf der Seite das Logo, bzw. der Name der Website + ein passender Spruch angezeigt werden. Diese Daten können im WordPress Backend unter „Settings -> General“ eingestellt werden und betreffen den „Blog Title“ und die „Tagline“. Wenn diese Felder ausgefüllt sind, können wir mit der WordPress-Template Funktion „bloginfo()“ darauf zugreifen:
header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php wp_title(' - ', true, 'right'); ?> <?php bloginfo('name'); ?></title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_head(); ?> </head> <body> <div id="wrapper"> <div id="header"> <h1><?php bloginfo('name'); ?></h1> <h3><?php bloginfo('description'); ?></h3> </div><!-- header -->
Im h1-Tag zeigen wir den Blogtitel an, dieser wird über den Parameter-Wert „name“ ausgegeben. Die Tagline, also der Spruch des Blogs, erhält man mit dem Parameter-Wert „description“.
Zugegeben, das sieht nicht besonders schick aus, aber darum gehts hier ja erstmal nicht. Durch eine kleine Modifikation wird unser Titel gleichzeitig zu einem Link zurück zur Startseite des Blogs:
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
Jetzt nehmen wir noch eine simple Änderung an unserem Stylesheet vor, um eine Trennlinie zwischen dem header und dem main Bereich zu erhalten:
style.css
/* Theme Name: Tutorial Theme URI: http://wordpress.lernenhoch2.de Description: Template zum WordPress Tutorial auf http://wordpress.lernenhoch2.de Author: Christian Strang Author URI: http://lernenhoch2.de */ body {margin: 0px; padding: 0px; color: #333; background: #e5e5e5;} #wrapper {width: 850px; margin: auto; text-align: left; background: #fff;} #header {height: 160px; padding: 20px; border-bottom: 1px solid #ccc;} #main {width: 520px; padding: 20px; float: left;} #sidebar {width: 270px; padding: 10px; padding-top: 20px; float: left;} #footer {clear: both; height: 100px; padding: 20px; }