Der Kopfbereich (header.php)

Die Template-Datei header.php wird nicht nur die Angaben im Dokumentkopf beherbergen, sondern auch einen Teil des sichtbaren Bereiches der Website: Kopfgrafik und die Hauptnavigation.

Ich werde Ihnen zuerst die komplette Datei zeigen und dann werde ich Ihnen Schritt für Schritt die erklärungsbedürftigen Passagen erläutern. Hierbei werde ich nur in Ausnahmefällen auf schon erklärte Codefragmente eingehen.

<!DOCTYPE html>
<html lang="de">
<head>

    <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_url'); ?>" />

    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>

<body>
<div id="container">

    <h1 id="kopfbereich"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

    <div id="hauptnavi">
        <?php wp_page_menu('depth=1'); ?>
    </div><!-- /#hauptnavi -->

    <div id="mittelbereich">
<!-- Ende header.php -->

Schauen wir uns mal die erste Stelle an, wo die Template-Tags zum Einsatz kommen:

Innerhalb des title -Elementes kommen zwei Template-Tags zum Einsatz: bloginfo('name'); und wp_title(); . Der erste Tag gibt allgemeine Informationen zu der WordPress-Installation wieder und hat mehrere Parameterwerte – in diesem Fall den Namen des Blogs. Dieser Template-Tag wird uns mehrfach begegnen.

Der zweite Tag wp_title(); gibt den Titel bzw. die Überschrift der Pages, der Blog-Beiträge oder die Namen der Kategorien in der Übersicht wieder.

Wenn wir uns den Rest der header.php anschauen, dann sehen wir an drei Stellen den Template-Tag bloginfo(); im Einsatz:

bloginfo('stylesheet_url'); – Die Adresse der CSS-Datei ( style.css )
bloginfo('rss2_url'); – Die Adresse des RSS2-Feeds ( /feed/ )
bloginfo('pingback_url'); – Die Adresse zur xmlrpc.php

Am Ende der header.php sehen Sie den Template-Hook wp_head(); , welcher einer Reihe von Plugins als Orientierungspunkt dient, die z. B. im Kopfbereich Code hinzufügen.

Mit Hilfe von <?php wp_page_menu ('depth=1'); ?> geben Sie in der Hauptnavigation die Seiten (Pages) aus. Bei diesem Template-Tag komm t ein Paramater zum Einsatz. Mit depth=1 bestimmen wir, dass nur die Hauptseiten (Seiten erster Ordnung) und nicht deren Unterseiten (Kind- und Enkelseiten) aufgelistet werden, damit nicht das Layout „zerschossen“ wird.

Aktueller Menüpunkt in der Navigation

Wie man den aktuellen Menüpunkt in der Hauptnavigation kennzeichnet und wie man dort auch den Startseiten-Link einfügt erfahren Sie im nächsten Kursteil. An diese Stelle wäre das im Moment zu viel des Guten.

Eigenes WordPress-Theme erstellen

Von der HTML-Vorlage zum fertigen WordPress-Theme: Der Kopfbereich (header.php)

Auf dieser Seite

Aktueller Menüpunkt in der Navigation