Header gestalten in Wordpress

wp_logoDie Gestaltung des Headers(Kopfbereich) in Wordpress lässt sich mit ein paar einfachen Schritten durchführen. Hier finden Sie Informationen über das Einbinden in die header.php und über das Design in der style.css mit vielen Beispielen wie Headergrafik verlinken etc.

 

Nach dem Einrichten des Dokumenten-Kopfes in der header.php kann mit der Gestaltung begonnen werden.

 

Die Gestaltung beginnt immer mit dem “<body>” Tag in der “header.php”, hierzu kann die Wordpress Funktion “body_class”, die automatisch CSS-Klassen vergibt, benutzt werden. Diese Funktion wird hier genauer beschrieben: CSS mit body_class.

Beendet wird das Design mit “</body>” in der “footer.php”.

 

Als erstes sollte der Seitentitel und die Beschreibung der Seite im Adminbereich unter Einstellungen – Allgemein eingefügt werden.

 

Die “header.php” wird bei allen Seiten zu erst aufgerufen, deshalb wird auch dort die Gestaltung des Header vorgenommen.

 

Seitentitel verlinken

Eine einfache Möglichkeit, eine Überschrift im Kopfbereich, die auf die Startseite verlinkt:

header.php

<h1 id="header"> 
    <a href="/<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</h1>
  • <h1 id=”header”> hier wurde eine eindeutige ID für die Überschrift vergeben.
  • bloginfo('url') ist der Link zur Startseite die im Benutzermenü definiert wurde.
  • bloginfo('name') Es erscheint der Seitentitel aus den Einstellungen.

 

Das Aussehen für die Überschrift wird in der Datei “style.css” definiert.

style.css

#header h1 { 
    color: #000;
    font-size: 30px;
}

 

 

Titel mit Seitenbeschreibung und Hintergrundgrafik

Der Kopfbereich mit Blog-Titel, Blogbeschreibung und Hintergrundbild:

header.php

<div id="header"> 
    <div id="headerimg">
        <h1>
            <a href="/<?php bloginfo('url'); ?>">
            <?php bloginfo('name'); ?></a>
        </h1>
        <div class="description">
            <?php bloginfo('description'); ?>
        </div>
    </div>
</div>
  • <div id=”header”> umschließt den kompletten Kopfbereich.
  • <div id=”headerimg”> Der Seitentitel und die Beschreibung erscheinen innerhalb des Hintergrundbildes.
  • bloginfo('description') fügt die Seitenbeschreibung aus dem Adminbereich ein.

 

Der Hintergrund wird in der Datei “style.css” definiert:

#header { 
    background: #eee;
    height: 160px;
    width: 960px;
}
#headerimg  {
    background: url("images/header.jpg") no-repeat;
    margin: 10px 10px 0;
    height: 150px;
    width: 940px;
}
  • Der Kopfbereich bekommt einen hellgrauen Hintergrund.
  • Das Hintergrundbild befindet sich im Unterordner “images” des Themes und wird jeweils oben und an den Seiten um 10 Pixel eingerückt.
  • Für Seitentitel und Beschreibung können weitere Definitionen eingefügt werden.

 

Headergrafik verlinken

Um die gesamte Headergrafik anklickbar zu machen, kann die Grafik in die header.php eingefügt werden.

<div id="header"> 
    <a href="/<?php bloginfo('url'); ?>">
    <img src="/<?php bloginfo('template_url'); ?>/images/header.jpg alt="<?php bloginfo('name'); ?>" />
    </a>
    <h1><a href="/<?php bloginfo('url'); ?>">" title="<?php bloginfo('name'); ?>">
    <?php bloginfo('name'); ?></a>
    </h1>
</div>

 

Hintergrundgrafik verlinken

Die Headergrafik kann auch direkt durch Angabe der Linkgröße in der style.css verlinkt werden.

header.php

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

Der Link muss innerhalb von <div id=”header”> sein.

 

style.css

#header h1 a { 
    width: 940px;
    height: 150px;
    display: block;
    background: url(images/headerimage.gif) no-repeat;
}

 

 

Eine weitere Möglichkeit ist, die Hintergrundgrafiken über das Benutzermenü einzufügen, dazu muss “custom_image_header” in der functions.php definiert sein. Die Gestaltung in der style.css bleibt gleich.

 

 

Navigation hinzufügen

Menüs werden meist am oberen oder unteren Rand des Headers(Kopf) in horizontaler Form eingefügt. Hier wird ein neuer Bereich für die Navigation innerhalb von “header” definiert.

<div id="header"> 
    <h1><a href="/<?php bloginfo('url'); ?>/">
        <?php bloginfo('name'); ?></a>
    </h1>
</div>
<div id="menu">
    <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
</div>
</div>

Navigation unter der Headergrafik mit der Funktion "wp_nav_menu".

 

Dies sind nur einige Beispiele von vielen Möglichkeiten. Der Entwickler eines Themes kann seiner Kreativität freien lauf lassen.

 

Bei der Gestaltung sollte die am meist benutzte Bildschirmgröße von 1024x768 Pixel beachtet werden. Hier wird eine Themebreite von 980 Pixel empfohlen, da die Seitenleiste abgezogen werden muss und ein kleiner Rand für eine bessere Optik sorgt.

 

Weitere Informationen:

Navigations-Menü in Wordpress

Index.php erstellen

Wordpress Theme selbst erstellen

Unterschiedliches Aussehen der Artikel auf der Startseite

CSS Klassen mit body_class

Kommentare   

0 #4 Andy 2015-09-03 21:38
Hey, guter und verständlicher Beitrag. Hat mir sehr weitergeholfen :-)

lg
Andy
0 #3 Gerscher 2015-04-04 18:23
Ich finds auch gut. Dadurch wird vieles leichter und besser. Wünsche bei der Gelegenheit auch gleich noch ein schönes Osterfest.
LG Gerscher
+2 #2 Ralf 2011-11-09 20:35
Danke! Damit sollte meine bisher erfolglose Fummelei ja nun ein positives Ende nehmen. :D
+2 #1 David 2011-10-13 20:05
Vielen vielen Dank! Endlich mal ne Anleitung die auch ein Anfänger versteht!