Unser Basis Template soll zwar schlicht sein, damit es jeder als Grundlage für sein eigenes Template nutzen kann, doch wir können mit einem kleinen Handgriff noch etwas mehr aus diesem schlichten Template rausholen. Der Trick ist, dass wir einfach das CSS Framework Blueprint CSS in unser Template einbinden. Dieses gibt uns eine saubere Grundformatierung, die in allen Browsern gleich aussieht.
1. Schritt – Blueprint CSS runterladen & installieren
Als erstes musst du dir das Blueprint CSS Framework runterladen: Download. Als nächstes entpacke die Datei und lade den Ordner “blueprint” in den Tutorial Template Ordner:
2. Schritt – Stylesheets einbinden
Damit unser Tutorial Template die Stylesheets auch verwendet, müssen wir sie noch in der header.php einbinden. Dazu öffne die Datei “header.php” und füge den markierten Code ein:
<!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('template_directory'); ?>/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<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><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h3><?php bloginfo('description'); ?></h3>
</div><!-- header -->
Damit sollte das Template nun optisch was besser aussehen und trotzdem ein leicht anpassbares WordPress Basis Template bleiben.
Vorher:
Nachher:
Wer nicht am blueprint CSS Framework selbst interessiert ist und dieses für sein Layout nutzen möchte, sollte vielleicht lediglich die Datei “Typography.css” aus dem Blueprint-Ordner einbinden, um das gleiche zu erreichen was wir hier sehen. Wer allerdings daran interessiert ist, kann sich hier das Quickstart Tutorial für Blueprint CSS anschauen.
Christoph | am 22. April 2011 um 09:11 Uhr
das ist natürlich ein großer Schritt für einen Neuling, nach der Einbindung des Blueprint CSS wurde an alle Links die Permalinks angehängt, die sonst versteckt waren. Sowohl in der Sidebar als auch an die Artikellinks. Müßte also irgendwie mit der CSS-Formatierung zusammenhängen.
Besten Dank