Im letzten Teil hast du deine erste Ausgabe mit WordPress gemacht, doch leider war das Layout nicht vorhanden, weil wir die style.css noch nicht verlinkt hatten. Darum geht es nun in diesem Teil, den Head-Bereich unseres Layouts zu füllen.
Im Head-Bereich zeigt WordPress z.b. den Artikeltitel an, bindet Stylesheets und Javascripts ein und fügt automatisch weitere nützliche Meta-Angaben ein, wenn wir WordPress darum bitten (was wir definitiv machen werden, da es uns Arbeit erspart). Bislang haben wir folgendes:
<!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"> <!-- wird noch ausgefüllt --> </head> ...
Den HTML-Kommentar „wird noch ausgefüllt„, ersetzen wir jetzt durch folgende Angaben:
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title(); ?> - <?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(); ?>
Erklärung:
- Zeile 1: das Meta Tag füllen wir mit dem Charset, welches für den Blog festgelegt ist. In der Regel dürfte das UTF-8 sein und damit liegt man meistens richtig
- Zeile 3: das Title-Tag füllen wir mit dem Namen des Artikels (auf der Einzelansicht) + den Namen des Blogs. An dieser Stelle kann man recht kreativ mit den WordPress Template Tags rumspielen, diese Struktur ist aber für die meisten Blogs gut und ausreichend.
- Zeile 5: jetzt verlinken wir endlich auf unsere style.css. Dazu nutzen wir das mächtige WordPress Template Tag „bloginfo()“ mit dem Parameter „stylesheet_url“ um die Link zur style.css zu erhalten
- Zeile 6: damit Blogs, die in ihrem Artikel auf einen von deinen Artikeln gelinkt haben, deinen Blog darüber informieren können (Pingback), nutzen wir den Pingback-Link und nutzen wieder „bloginfo()“ um uns den Link erzeugen zu lassen
- Zeile 8: dies ist eine sehr wichtige Funktion, denn viele Plugins funktionieren nur dann korrekt, wenn die Funktion im head-Bereich platziert wurde. Manche Plugins platzieren ihre eigenen Stylesheets oder Javascripts im Head-Bereich und das funktioniert nur, wenn dieser „Hook“ gesetzt wurde.
Wenn wir uns jetzt unser Layout anschauen, ist es zwar immernoch schlicht, aber wenigstens so wie wir es geplant hatten. In den weißen Bereich oben platzieren wir später unser Logo und den Spruch unseres Blogs, sieh dir dazu nochmal das Wireframe des WordPress Theme „Tutorial“ an.
Ich habe das Tutorial Template mal testweise im Lernen² Blog verwendet und folgendes Ergebnis bekommen:
Bei dir sollte es ähnlich aussehen (natürlich mit anderen Titeln und Artikeln).