Der Kopfbereich (header.php)

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">
        <ul>
            <?php wp_list_pages('title_li='); ?>
</ul>
    </div><!-- /#hauptnavi -->

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

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

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

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.

Anmerkung: 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.

Die Seitenleiste (sidebar.php)

Nachdem wir die header.php fertig gestellt haben, wenden wir uns einer weiteren Auslagerungsdatei des WordPress-Themes zu:

<div id="sidebar">
            <h2><label for="s">Suchen</label></h2>
            <form id="searchform" method="get" action="<?php bloginfo('url'); ?>/">
                <div>
                    <input name="s" id="s" size="20" type="text" />
                    <input name="submit" value="Suchen" type="submit" class="such-button" />
                </div>
            </form>

            <h2>Kategorien</h2>
            <ul>
                <?php wp_list_categories('orderby=name&show_count=1&title_li='); ?>
</ul>

            <h2>Monatsarchiv</h2>
            <ul>
                <?php wp_get_archives(); ?>
</ul>

        <?php wp_meta(); ?>

        </div><!-- /#sidebar -->
<!-- Ende der sidebar.php -->

Die Suche

Im ersten Abschnitt sehen Sie den Code für das Suchformular, welches sehr einfach gestrickt ist. Das komplette Formular besteht aus reinem HTML, lediglich für die Übergabe des Suchwortes wird der alte bekannte bloginfo('url'); bemüht. Suche ich z. B. auf www.perun.net nach dem Suchwort "Test", dann wird folgende URL aufgerufen:

http://www.perun.net/?s=test&submit=Suchen

Auflistung der Kategorien

Im zweiten Abschnitt werden die Kategorien aufgelistet. Dafür wird dann der Template-Tag wp_list_categories(); eingesetzt. Der Auflistung von Kategorien habe ich drei Parameterwerte gegeben:

  • orderby=name – Die Kategorien werden alphabetisch aufgelistet.

  • show_count=1 – Neben dem Kategorienamen wird die Anzahl der jeweiligen Beiträge ausgegeben.

  • title_li= – Entfernt die automatische Überschrift und das Listenelement ( <li> ), welches den kompletten Kategorie-Block umschließt.

Die einzelnen Parameter werden durch das kaufmännische und ( & ) verbunden. So schaut das dann im Frontend aus, wenn man einige Artikel verfasst hat:

Illustration 5: Auflistung der Kategorien: alphabetisch und mit Anzahl der Blog-Artikel

Das Monatsarchiv

Die Auflistung der einzelnen Monate in der Sidebar erreichen wir durch den Einsatz von wp_get_archives(); . Auch dieser Template-Tag verfügt über eine Reihe von Parametern und den dazugehörigen Werten. Aber auch in der Standardausführung – also ohne den Einsatz von Parametern tut dieser Tag genau das was wir möchten: die Auflistung der einzelnen Monate:

Illustration 6: Monatsarchiv in der Sidebar

Klickt man jetzt auf diesen Link, werden alle Blog-Artikel aufgelistet, die im Monat März 2009 verfasst wurden und die auch noch online sind.

Der Rest der Sidebar

Zum Schluss der Seitenleiste kommt lediglich noch wp_meta(); . Hierbei handelt es sich um einen weiteren Template-Hook.

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen

Newsletter abonnieren